You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by ma...@apache.org on 2017/03/24 15:10:51 UTC

[04/17] nifi git commit: NIFI-3380 Bumping NAR plugin to 1.2.0-SNAPSHOT development to leverage changes from master, adding buildnumber-maven-plugin to nifi-nar-bundles to properly set build info in MANIFEST of NARs - Refactoring NarDetails to include al

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/canvas.jsp
----------------------------------------------------------------------
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 77f7841..3afb0f0 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
@@ -141,6 +141,7 @@
         <jsp:include page="/WEB-INF/partials/canvas/listing-request-status-dialog.jsp"/>
         <jsp:include page="/WEB-INF/partials/canvas/queue-listing.jsp"/>
         <jsp:include page="/WEB-INF/partials/canvas/component-state-dialog.jsp"/>
+        <jsp:include page="/WEB-INF/partials/canvas/component-version-dialog.jsp"/>
         <jsp:include page="/WEB-INF/partials/connection-details.jsp"/>
         <div id="context-menu" class="context-menu unselectable"></div>
         <span id="nifi-content-viewer-url" class="hidden"></span>

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/component-version-dialog.jsp
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/component-version-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/component-version-dialog.jsp
new file mode 100644
index 0000000..5a0d295
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/component-version-dialog.jsp
@@ -0,0 +1,63 @@
+<%--
+ Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+--%>
+<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
+<div id="component-version-dialog" layout="column" class="hidden">
+    <div class="dialog-content">
+        <div class="setting">
+            <div class="setting-name">Name</div>
+            <div class="setting-field">
+                <div id="component-version-name"></div>
+            </div>
+        </div>
+        <div class="setting">
+            <div class="setting-name">Bundle</div>
+            <div class="setting-field">
+                <div id="component-version-bundle"></div>
+            </div>
+        </div>
+        <div class="setting">
+            <div class="setting-name">Version</div>
+            <div class="setting-field">
+                <div id="component-version-selector"></div>
+            </div>
+        </div>
+        <div id="component-version-controller-service-apis-container" class="setting hidden">
+            <div class="setting-name">Supports Controller Services</div>
+            <div class="setting-field">
+                <div id="component-version-controller-service-apis"></div>
+            </div>
+        </div>
+        <div class="setting">
+            <div class="setting-name">Tags</div>
+            <div class="setting-field">
+                <div id="component-version-tags"></div>
+            </div>
+        </div>
+        <div class="setting">
+            <div class="setting-name">Restriction</div>
+            <div class="setting-field">
+                <div id="component-version-restriction"></div>
+            </div>
+        </div>
+        <div class="setting">
+            <div class="setting-name">Description</div>
+            <div class="setting-field">
+                <div id="component-version-description"></div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/controller-service-configuration.jsp
----------------------------------------------------------------------
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 33a6298..951631e 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
@@ -42,6 +42,14 @@
                             <span id="controller-service-type"></span>
                         </div>
                     </div>
+                    <div class="setting">
+                        <div class="setting-name">Bundle</div>
+                        <div id="controller-service-bundle" class="setting-field"></div>
+                    </div>
+                    <div class="setting">
+                        <div class="setting-name">Supports Controller Service</div>
+                        <div id="controller-service-compatible-apis" class="setting-field"></div>
+                    </div>
                 </div>
                 <div class="spacer">&nbsp;</div>
                 <div class="settings-right">

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/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
----------------------------------------------------------------------
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 1373a98..7cb75ea 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,11 +15,11 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
-<div id="new-controller-service-dialog" layout="column" class="hidden large-dialog">
+<div id="new-controller-service-dialog" layout="column" class="hidden">
     <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" style="margin-top: 10px;">Source</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">
@@ -34,14 +34,21 @@
             <div flex="25" id="controller-service-tag-cloud-container">
                 <div class="setting">
                     <div class="setting-field">
+                        <div id="controller-service-bundle-group-combo"></div>
+                    </div>
+                </div>
+                <div class="setting">
+                    <div class="setting-field">
                         <div id="controller-service-tag-cloud"></div>
                     </div>
                 </div>
             </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" class="ellipsis"></div>
+                <div id="controller-service-type-container">
+                    <div id="controller-service-type-name"></div>
+                    <div id="controller-service-type-bundle"></div>
+                </div>
                 <div id="controller-service-description-container" class="hidden">
                     <div id="controller-service-type-description" class="ellipsis multiline"></div>
                     <span class="hidden" id="selected-controller-service-name"></span>

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp
----------------------------------------------------------------------
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 c79ef89..7bf9508 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,11 +15,11 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
-<div id="new-processor-dialog" layout="column" class="hidden large-dialog">
+<div id="new-processor-dialog" layout="column" class="hidden">
     <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" style="margin-top: 10px;">Source</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">
@@ -35,14 +35,21 @@
             <div flex="25" id="processor-tag-cloud-container">
                 <div class="setting">
                     <div class="setting-field">
+                        <div id="processor-bundle-group-combo"></div>
+                    </div>
+                </div>
+                <div class="setting">
+                    <div class="setting-field">
                         <div id="processor-tag-cloud"></div>
                     </div>
                 </div>
             </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" class="ellipsis"></div>
+                <div id="processor-type-container">
+                    <div id="processor-type-name"></div>
+                    <div id="processor-type-bundle"></div>
+                </div>
                 <div id="processor-description-container">
                     <div id="processor-type-description" class="ellipsis multiline"></div>
                     <span class="hidden" id="selected-processor-name"></span>

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/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
----------------------------------------------------------------------
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 816b02a..e8eadb1 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,11 +15,11 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
-<div id="new-reporting-task-dialog" layout="column" class="hidden large-dialog">
+<div id="new-reporting-task-dialog" layout="column" class="hidden">
     <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" style="margin-top: 10px;">Source</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">
@@ -33,7 +33,11 @@
         <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-field">
+                        <div id="reporting-task-bundle-group-combo"></div>
+                    </div>
+                </div>
+                <div class="setting">
                     <div class="setting-field">
                         <div id="reporting-task-tag-cloud"></div>
                     </div>
@@ -41,8 +45,10 @@
             </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" class="ellipsis"></div>
+                <div id="reporting-task-type-container">
+                    <div id="reporting-task-type-name"></div>
+                    <div id="reporting-task-type-bundle"></div>
+                </div>
                 <div id="reporting-task-description-container" class="hidden">
                     <div id="reporting-task-type-description" class="ellipsis multiline"></div>
                     <span class="hidden" id="selected-reporting-task-name"></span>

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/processor-configuration.jsp
----------------------------------------------------------------------
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 185166e..a0ce8c4 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
@@ -44,6 +44,10 @@
                         </div>
                     </div>
                     <div class="setting">
+                        <div class="setting-name">Bundle</div>
+                        <div id="processor-bundle" class="setting-field"></div>
+                    </div>
+                    <div class="setting">
                         <div class="penalty-duration-setting">
                             <div class="setting-name">
                                 Penalty duration

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/reporting-task-configuration.jsp
----------------------------------------------------------------------
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 2788c0f..6a488d0 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
@@ -46,6 +46,10 @@
                             <span id="reporting-task-type"></span>
                         </div>
                     </div>
+                    <div class="setting">
+                        <div class="setting-name">Bundle</div>
+                        <div id="reporting-task-bundle" class="setting-field"></div>
+                    </div>
                 </div>
                 <div class="spacer">&nbsp;</div>
                 <div class="settings-right">

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/history/action-details-dialog.jsp
----------------------------------------------------------------------
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 cc52f6b..b6c6f78 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,7 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
-<div id="action-details-dialog" class="hidden small-dialog">
+<div id="action-details-dialog" class="hidden medium-dialog">
     <div class="dialog-content">
         <div class="setting">
             <div class="setting-field">

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/processor-details.jsp
----------------------------------------------------------------------
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 15d8cc3..dffe4cf 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
@@ -36,9 +36,12 @@
                     </div>
                     <div class="setting">
                         <div class="setting-name">Type</div>
-                        <div class="setting-field">
-                            <span id="read-only-processor-type"></span>
-                        </div>
+                        <div id="read-only-processor-type" class="setting-field"></div>
+                        <div class="clear"></div>
+                    </div>
+                    <div class="setting">
+                        <div class="setting-name">Bundle</div>
+                        <div id="read-only-processor-bundle" class="setting-field"></div>
                         <div class="clear"></div>
                     </div>
                     <div class="setting">

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/controller-service.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/controller-service.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/controller-service.css
index 3fe8018..24f83e95 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/controller-service.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/controller-service.css
@@ -39,6 +39,12 @@
 
 /* controller-service settings */
 
+#controller-service-bundle {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 /*
     Service references
 */
@@ -212,21 +218,8 @@ div.disable-referencing-components, div.enable-referencing-components {
     New inline controller service dialog
 */
 
-div.new-inline-controller-service-combo {    width: 50%;
-    margin-bottom: 10px;
-}
-
-div.new-inline-controller-service-tags {
-    height: 18px;
-    width: 340px;
-    margin-bottom: 10px;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-div.new-inline-controller-service-description {
-    height: 115px;
-    overflow: auto;
+div.new-inline-controller-service-requirement, div.new-inline-controller-service-combo, div.new-inline-controller-service-bundle, div.new-inline-controller-service-tags {
+    margin-bottom: 15px;
 }
 
 div.new-inline-controller-service-button-container {

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css
index 4aaa253..1e01919 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css
@@ -204,6 +204,15 @@ div.progress-label {
 }
 
 /*
+    Component Version
+ */
+
+#component-version-dialog {
+    width: 550px;
+    height: 575px;
+}
+
+/*
     General dialog styles.
 */
 

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css
index bc198a9..18a32b2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css
@@ -66,15 +66,22 @@ g.component rect.body.unauthorized {
     fill: #f4f6f7;
 }
 
+
 g.component rect.border {
     stroke: rgba(0,0,0,0.25);
     stroke-width: 1;
 }
 
 g.component rect.border.unauthorized {
-    stroke-width: 1.5;
+    stroke-width: 3;
     stroke: #ba554a !important;
-    stroke-dasharray: 3,3;
+    stroke-dasharray: 4;
+}
+
+g.component rect.border.ghost {
+    stroke-width: 3;
+    stroke: #aaaaaa !important;
+    stroke-dasharray: 4;
 }
 
 g.component rect.processor-icon-container.unauthorized {
@@ -166,6 +173,11 @@ text.processor-type {
     font-size: 12px;
 }
 
+text.processor-bundle {
+    fill: #666;
+    font-size: 10px;
+}
+
 rect.processor-icon-container {
     fill: #ffffff;
 }

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-controller-service-dialog.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-controller-service-dialog.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-controller-service-dialog.css
index 0440805..087b0bc 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-controller-service-dialog.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-controller-service-dialog.css
@@ -22,18 +22,12 @@
 #new-controller-service-dialog {
     min-height:620px;
     height: 620px;
-    width: 760px;
+    width: 800px;
     min-width: 760px;
 }
 
-#new-controller-service-dialog span.link {
-    cursor: pointer;
-    color: #004849;
-    font-weight: bold;
-    display: inline-block;
-    background-color: #E3E8EB;
-    border-radius: 2px;
-    padding: 1px 4px;
+#controller-service-bundle-group-combo {
+    margin-right: 2px;
 }
 
 #controller-service-tag-cloud-container {
@@ -44,21 +38,34 @@
     padding: 0px;
 }
 
+#controller-service-type-container {
+    padding: 20px 0 5px 0;
+    display: flex;
+}
+
 #controller-service-type-name {
-    min-height: 15px;
     color: #775351;
-    font-size: 13px;
+    font-size: 16px;
     font-weight: 500;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
-#controller-service-type-name-title {
-    font-family: Roboto Slab;
-    padding: 20px 0 5px 0;
-    font-size: 12px;
+#controller-service-type-bundle {
+    margin-left: 15px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 13px;
+    line-height: 16px;
+    color: #666;
+    letter-spacing: 0.25px;
+    min-width: 0;
 }
 
 #controller-service-type-description {
-    height: 62px;
+    height: 80px;
     font-size: 13px;
     line-height: 17px;
     padding-top: 10px;
@@ -87,4 +94,8 @@
 
 #controller-service-type-filter {
     width: 200px;
+}
+
+#controller-service-tag-cloud {
+    margin-top: -2px;
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-processor-dialog.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-processor-dialog.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-processor-dialog.css
index 29a3232..1004a4c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-processor-dialog.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-processor-dialog.css
@@ -22,20 +22,10 @@
 #new-processor-dialog {
     min-height:620px;
     height: 620px;
-    width: 760px;
+    width: 800px;
     min-width: 760px;
 }
 
-#new-processor-dialog span.link{
-    cursor: pointer;
-    color: #004849;
-    font-weight: bold;
-    display: inline-block;
-    background-color: #E3E8EB;
-    border-radius: 2px;
-    padding: 1px 4px;
-}
-
 #processor-types-container {
     padding: 0px;
 }
@@ -44,21 +34,37 @@
     padding: 0px;
 }
 
+#processor-type-container {
+    padding: 20px 0 5px 0;
+    display: flex;
+}
+
+#processor-bundle-group-combo {
+    margin-right: 2px;
+}
+
 #processor-type-name {
-    min-height: 15px;
     color: #775351;
-    font-size: 13px;
+    font-size: 16px;
     font-weight: 500;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
-#processor-type-name-title {
-    font-family: Roboto Slab;
-    padding: 20px 0 5px 0;
-    font-size: 12px;
+#processor-type-bundle {
+    margin-left: 15px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 13px;
+    line-height: 16px;
+    color: #666;
+    letter-spacing: 0.25px;
 }
 
 #processor-type-description {
-    height: 62px;
+    height: 80px;
     font-size: 13px;
     line-height: 17px;
     padding-top: 10px;
@@ -94,4 +100,8 @@
 
 div.view-usage-restriction {
     color: #ba554a !important;
+}
+
+#processor-tag-cloud {
+    margin-top: -2px;
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-reporting-task-dialog.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-reporting-task-dialog.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-reporting-task-dialog.css
index 5f6b8a3..55eb50f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-reporting-task-dialog.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-reporting-task-dialog.css
@@ -16,49 +16,56 @@
  */
 
 /* 
-    New controller service dialog.
+    New reporting task dialog.
 */
 
 #new-reporting-task-dialog {
     min-height:620px;
     height: 620px;
-    width: 760px;
+    width: 800px;
     min-width: 760px;
 }
 
-#new-reporting-task-dialog span.link{
-    cursor: pointer;
-    color: #004849;
-    font-weight: bold;
-    display: inline-block;
-    background-color: #E3E8EB;
-    border-radius: 2px;
-    padding: 1px 4px;
-}
-
 #reporting-task-types-container {
     padding: 0px;
 }
 
+#reporting-task-bundle-group-combo {
+    margin-right: 2px;
+}
+
 #reporting-task-description-container {
     padding: 0px;
 }
 
+#reporting-task-type-container {
+    padding: 20px 0 5px 0;
+    display: flex;
+}
+
 #reporting-task-type-name {
-    min-height: 15px;
     color: #775351;
-    font-size: 13px;
+    font-size: 16px;
     font-weight: 500;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
-#reporting-task-type-name-title {
-    font-family: Roboto Slab;
-    padding: 20px 0 5px 0;
-    font-size: 12px;
+#reporting-task-type-bundle {
+    margin-left: 15px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 13px;
+    line-height: 16px;
+    color: #666;
+    letter-spacing: 0.25px;
+    min-width: 0;
 }
 
 #reporting-task-type-description {
-    height: 62px;
+    height: 80px;
     font-size: 13px;
     line-height: 17px;
     padding-top: 10px;
@@ -91,4 +98,8 @@
 
 #reporting-task-type-filter {
     width: 200px;
+}
+
+#reporting-task-tag-cloud {
+    margin-top: -2px;
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
index d0d639c..a12edcb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
@@ -37,6 +37,12 @@
     float: left;
 }
 
+#processor-bundle {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 #processor-enabled {
     width: 12px;
     height: 12px;

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-details.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-details.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-details.css
index 4c23986..dd3e93f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-details.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-details.css
@@ -36,6 +36,12 @@
     height: 100%;
 }
 
+#read-only-processor-bundle {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 #read-only-auto-terminate-relationship-names {
     border: 0 solid #CCCCCC;
     height: 290px;

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/reporting-task.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/reporting-task.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/reporting-task.css
index bb84f3f..7e669b2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/reporting-task.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/reporting-task.css
@@ -61,6 +61,12 @@ div.reporting-task-enabled-container {
     margin-left: 10px;
 }
 
+#reporting-task-bundle {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 input.reporting-task-scheduling-period {
     width: 150px;
 }

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.css
----------------------------------------------------------------------
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
index 6ab472d..2764104 100644
--- 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
@@ -110,8 +110,4 @@ div.combo-nifi-tooltip {
 
 div.combo-button-normal {
     background-color: #eaeef0;
-}
-
-span.combo-option-text {
-    max-width: 227px;
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
----------------------------------------------------------------------
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 b606359..6ee9a2f 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
@@ -611,7 +611,7 @@
                         scope.cancel();
 
                         // prompt for the new service type
-                        promptForNewControllerService(gridContainer, args.grid, args.item, propertyDescriptor.identifiesControllerService, configurationOptions);
+                        promptForNewControllerService(gridContainer, args.grid, args.item, propertyDescriptor.identifiesControllerService, propertyDescriptor.identifiesControllerServiceBundle, configurationOptions);
                     }
                 }
             }).css({
@@ -943,23 +943,33 @@
      * @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 {string} serviceType The type of service to create
+     * @param {object} bundle The bundle the service impl should implement
      * @param {object} configurationOptions The configuration options
      */
-    var promptForNewControllerService = function (gridContainer, grid, item, serviceType, configurationOptions) {
+    var promptForNewControllerService = function (gridContainer, grid, item, serviceType, bundle, configurationOptions) {
         $.ajax({
             type: 'GET',
             url: '../nifi-api/flow/controller-service-types',
             data: {
-                serviceType: serviceType
+                'serviceType': serviceType,
+                'serviceBundleGroup': bundle.group,
+                'serviceBundleArtifact': bundle.artifact,
+                'serviceBundleVersion': bundle.version
             },
             dataType: 'json'
         }).done(function (response) {
+            // get the property descriptor
+            var descriptors = gridContainer.data('descriptors');
+            var propertyDescriptor = descriptors[item.property];
+
+            var controllerServiceLookup = d3.map();
             var options = [];
             $.each(response.controllerServiceTypes, function (i, controllerServiceType) {
+                controllerServiceLookup.set(i, controllerServiceType);
                 options.push({
-                    text: nfCommon.substringAfterLast(controllerServiceType.type, '.'),
-                    value: controllerServiceType.type,
+                    text: nfCommon.formatType(controllerServiceType),
+                    value: i,
                     description: nfCommon.escapeHtml(controllerServiceType.description)
                 });
             });
@@ -973,47 +983,74 @@
             } 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 class="dialog-content">' +
+                            '<div>' +
+                                '<div class="setting-name">Requires Controller Service</div>' +
+                                '<div class="setting-field">' +
+                                    '<div class="new-inline-controller-service-requirement"></div>' +
+                                '</div>' +
+                            '</div>' +
+                            '<div>' +
+                                '<div class="setting-name">Compatible Controller Services</div>' +
+                                '<div class="setting-field">' +
+                                    '<div class="new-inline-controller-service-combo"></div>' +
+                                '</div>' +
+                            '</div>' +
+                            '<div>' +
+                                '<div class="setting-name">Bundle</div>' +
+                                '<div class="setting-field">' +
+                                    '<div class="new-inline-controller-service-bundle"></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 newControllerServiceRequirement = newControllerServiceDialog.find('div.new-inline-controller-service-requirement');
                 var newControllerServiceCombo = newControllerServiceDialog.find('div.new-inline-controller-service-combo');
+                var newControllerServiceBundle = newControllerServiceDialog.find('div.new-inline-controller-service-bundle');
                 var newControllerServiceTags = newControllerServiceDialog.find('div.new-inline-controller-service-tags');
                 var newControllerServiceDescription = newControllerServiceDialog.find('div.new-inline-controller-service-description');
 
+                // include the required service
+                var formattedType = nfCommon.formatType({
+                    'type': propertyDescriptor.identifiesControllerService,
+                    'bundle': propertyDescriptor.identifiesControllerServiceBundle
+                });
+                var formattedBundle = nfCommon.formatBundle(propertyDescriptor.identifiesControllerServiceBundle);
+                newControllerServiceRequirement.text(formattedType + ' from ' + formattedBundle);
+
+                // sort the text version visible to the user
+                options.sort(function (a, b) {
+                    var aCS = controllerServiceLookup.get(a.value);
+                    var bCS = controllerServiceLookup.get(b.value);
+
+                    var aName = nfCommon.substringAfterLast(aCS.type, '.');
+                    var bName = nfCommon.substringAfterLast(bCS.type, '.');
+
+                    return aName === bName ? -nfCommon.sortVersion(aCS.bundle.version, bCS.bundle.version) : aName > bName ? 1 : -1;
+                });
+
                 // 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();
+                        var service = controllerServiceLookup.get(option.value);
+                        newControllerServiceBundle.text(nfCommon.formatBundle(service.bundle));
+                        newControllerServiceTags.text(service.tags.join(', '));
                         newControllerServiceDescription.text(service.description);
                     }
                 });
@@ -1050,7 +1087,8 @@
                 });
 
                 var create = function () {
-                    var newControllerServiceType = newControllerServiceCombo.combo('getSelectedOption').value;
+                    var newControllerServiceKey = newControllerServiceCombo.combo('getSelectedOption').value;
+                    var newControllerServiceType = controllerServiceLookup.get(newControllerServiceKey);
 
                     // build the controller service entity
                     var controllerServiceEntity = {
@@ -1060,7 +1098,8 @@
                             }
                         }),
                         'component': {
-                            'type': newControllerServiceType
+                            'type': newControllerServiceType.type,
+                            'bundle': newControllerServiceType.bundle
                         }
                     };
 
@@ -1158,6 +1197,8 @@
                 if (nfCommon.isSensitiveProperty(propertyDescriptor)) {
                     valueMarkup = '<span class="table-cell sensitive">Sensitive value set</span>';
                 } else {
+                    var resolvedAllowableValue = false;
+
                     // if there are allowable values, attempt to swap out for the display name
                     var allowableValues = nfCommon.getAllowableValues(propertyDescriptor);
                     if ($.isArray(allowableValues)) {
@@ -1165,6 +1206,7 @@
                             var allowableValue = allowableValueEntity.allowableValue;
                             if (value === allowableValue.value) {
                                 value = allowableValue.displayName;
+                                resolvedAllowableValue = true;
                                 return false;
                             }
                         });
@@ -1173,7 +1215,11 @@
                     if (value === '') {
                         valueMarkup = '<span class="table-cell blank">Empty string set</span>';
                     } else {
-                        valueMarkup = '<div class="table-cell value"><pre class="ellipsis">' + nfCommon.escapeHtml(value) + '</pre></div>';
+                        if (!resolvedAllowableValue && nfCommon.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService)) {
+                            valueMarkup = '<span class="table-cell blank">Incompatible Controller Service Configured</div>';
+                        } else {
+                            valueMarkup = '<div class="table-cell value"><pre class="ellipsis">' + nfCommon.escapeHtml(value) + '</pre></div>';
+                        }
                     }
                 }
             } else {

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.css
----------------------------------------------------------------------
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
index d1210dd..af31275 100644
--- 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
@@ -21,7 +21,6 @@
 
 ul.tag-cloud {
     font-size: 90%;
-    padding: 2px;
     margin-left: -5px;
     overflow: hidden;
 }
@@ -36,35 +35,26 @@ ul.tag-cloud li {
     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-cloud span.link {
+    cursor: pointer;
+    color: #004849;
+    font-weight: bold;
+    display: inline-block;
+    background-color: #E3E8EB;
+    border-radius: 2px;
+    padding: 1px 4px;
 }
 
-ul.tag-filter li {
-    background: #004849;
+ul.tag-cloud span.link.selected {
+    cursor: pointer;
+    background-color: #004849;
+    font-weight: bold;
+    display: inline-block;
+    color: #E3E8EB;
     border-radius: 2px;
-    line-height: 15px;
-    padding: 5px 10px;
-    color: #ffffff;
-    margin: 5px;
+    padding: 1px 4px;
 }
 
-.tag-filter .fa {
-    color: #fff !important;
+ul.tag-cloud span.link-over.selected {
+    border-bottom-color: #E3E8EB;
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.js
----------------------------------------------------------------------
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 526a64c..67fa131 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
@@ -59,38 +59,22 @@
      * Adds the specified tag filter.
      *
      * @argument {jQuery} cloudContainer    The tag cloud container
-     * @argument {string} tag               The tag to add
+     * @argument {jQuery} 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);
+        if (tag.hasClass('selected')) {
+            // unselect
+            tag.removeClass('selected');
+
+            // fire a remove event if applicable
+            if (isDefinedAndNotNull(config.remove)) {
+                config.remove.call(cloudContainer, tag);
+            }
+        } else {
+            // select
+            tag.addClass('selected');
 
             // fire a select event if applicable
             if (isDefinedAndNotNull(config.select)) {
@@ -118,7 +102,6 @@
 
                     // 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 = [];
@@ -173,11 +156,8 @@
                             })).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);
-                                }
+                                var tag = $(this).children('span');
+                                addTagFilter(cloudContainer, tag);
                             }).appendTo(cloud).ellipsis();
                         });
                     } else {
@@ -206,7 +186,7 @@
 
             this.each(function () {
                 var cloudContainer = $(this);
-                cloudContainer.find('div.selected-tag-text').each(function () {
+                cloudContainer.find('span.link.selected').each(function () {
                     tags.push($(this).text());
                 });
             });

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/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
----------------------------------------------------------------------
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 87bb580..bb42ee7 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
@@ -133,16 +133,26 @@
                 }
             }
 
+            // determine if the row matches the selected source group
+            var matchesGroup = true;
+            if (matchesFilter && matchesTags) {
+                var bundleGroup = $('#processor-bundle-group-combo').combo('getSelectedOption');
+                if (nfCommon.isDefinedAndNotNull(bundleGroup) && bundleGroup.value !== '') {
+                    matchesGroup = (item.bundle.group === bundleGroup.value);
+                }
+            }
+
             // determine if this row should be visible
-            var matches = matchesFilter && matchesTags;
+            var matches = matchesFilter && matchesTags && matchesGroup;
 
             // 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('');
+                $('#processor-type-description').attr('title', '').text('');
+                $('#processor-type-name').attr('title', '').text('');
+                $('#processor-type-bundle').attr('title', '').text('');
                 $('#selected-processor-name').text('');
-                $('#selected-processor-type').text('');
+                $('#selected-processor-type').text('').removeData('bundle');
 
                 // clear the active cell the it can be reselected when its included
                 var processTypesGrid = $('#processor-types-table').data('gridInstance');
@@ -179,24 +189,6 @@
         };
 
         /**
-         * 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.
@@ -212,6 +204,11 @@
             // clear the selected tag cloud
             $('#processor-tag-cloud').tagcloud('clearSelectedTags');
 
+            // reset the group combo
+            $('#processor-bundle-group-combo').combo('setSelectedOption', {
+                value: ''
+            });
+
             // clear any filter strings
             $('#processor-type-filter').val('');
 
@@ -219,10 +216,11 @@
             applyFilter();
 
             // clear the selected row
-            $('#processor-type-description').text('');
-            $('#processor-type-name').text('');
+            $('#processor-type-description').attr('title', '').text('');
+            $('#processor-type-name').attr('title', '').text('');
+            $('#processor-type-bundle').attr('title', '').text('');
             $('#selected-processor-name').text('');
-            $('#selected-processor-type').text('');
+            $('#selected-processor-type').text('').removeData('bundle');
 
             // unselect any current selection
             var processTypesGrid = $('#processor-types-table').data('gridInstance');
@@ -235,9 +233,10 @@
          *
          * @argument {string} name              The processor name.
          * @argument {string} processorType     The processor type.
+         * @argument {object} bundle            The processor bundle.
          * @argument {object} pt                The point that the processor was dropped.
          */
-        var createProcessor = function (name, processorType, pt) {
+        var createProcessor = function (name, processorType, bundle, pt) {
             var processorEntity = {
                 'revision': nfClient.getRevision({
                     'revision': {
@@ -246,6 +245,7 @@
                 }),
                 'component': {
                     'type': processorType,
+                    'bundle': bundle,
                     'name': name,
                     'position': {
                         'x': pt.x,
@@ -317,6 +317,14 @@
                                 resizable: true
                             },
                             {
+                                id: 'version',
+                                name: 'Version',
+                                field: 'version',
+                                formatter: nfCommon.typeVersionFormatter,
+                                sortable: true,
+                                resizable: true
+                            },
+                            {
                                 id: 'tags',
                                 name: 'Tags',
                                 field: 'tags',
@@ -346,7 +354,7 @@
                         processorTypesData.setFilter(filter);
 
                         // initialize the sort
-                        sort({
+                        nfCommon.sortType({
                             columnId: 'type',
                             sortAsc: true
                         }, processorTypesData);
@@ -357,7 +365,7 @@
                         processorTypesGrid.registerPlugin(new Slick.AutoTooltips());
                         processorTypesGrid.setSortColumn('type', true);
                         processorTypesGrid.onSort.subscribe(function (e, args) {
-                            sort({
+                            nfCommon.sortType({
                                 columnId: args.sortCol.field,
                                 sortAsc: args.sortAsc
                             }, processorTypesData);
@@ -380,10 +388,14 @@
                                             .ellipsis();
                                     }
 
+                                    var bundle = nfCommon.formatBundle(processorType.bundle);
+                                    var type = nfCommon.formatType(processorType);
+
                                     // populate the dom
-                                    $('#processor-type-name').text(processorType.label).ellipsis();
+                                    $('#processor-type-name').text(type).attr('title', type);
+                                    $('#processor-type-bundle').text(bundle).attr('title', bundle);
                                     $('#selected-processor-name').text(processorType.label);
-                                    $('#selected-processor-type').text(processorType.type);
+                                    $('#selected-processor-type').text(processorType.type).data('bundle', processorType.bundle);
 
                                     // refresh the buttons based on the current selection
                                     $('#new-processor-dialog').modal('refreshButtons');
@@ -443,6 +455,7 @@
                             dataType: 'json'
                         }).done(function (response) {
                             var tags = [];
+                            var groups = d3.set();
 
                             // begin the update
                             processorTypesData.beginUpdate();
@@ -451,11 +464,15 @@
                             $.each(response.processorTypes, function (i, documentedType) {
                                 var type = documentedType.type;
 
+                                // record the group
+                                groups.add(documentedType.bundle.group);
+
                                 // create the row for the processor type
                                 processorTypesData.addItem({
                                     id: i,
                                     label: nfCommon.substringAfterLast(type, '.'),
                                     type: type,
+                                    bundle: documentedType.bundle,
                                     description: nfCommon.escapeHtml(documentedType.description),
                                     usageRestriction: nfCommon.escapeHtml(documentedType.usageRestriction),
                                     tags: documentedType.tags.join(', ')
@@ -467,9 +484,13 @@
                                 });
                             });
 
-                            // end the udpate
+                            // end the update
                             processorTypesData.endUpdate();
 
+                            // resort
+                            processorTypesData.reSort();
+                            processorTypesGrid.invalidate();
+
                             // set the total number of processors
                             $('#total-processor-types, #displayed-processor-types').text(response.processorTypes.length);
 
@@ -479,6 +500,24 @@
                                 select: applyFilter,
                                 remove: applyFilter
                             });
+
+                            // build the combo options
+                            var options = [{
+                                text: 'all groups',
+                                value: ''
+                            }];
+                            groups.forEach(function (group) {
+                                options.push({
+                                    text: group,
+                                    value: group
+                                });
+                            });
+
+                            // initialize the bundle group combo
+                            $('#processor-bundle-group-combo').combo({
+                                options: options,
+                                select: applyFilter
+                            });
                         }).fail(nfErrorHandler.handleAjaxError);
                     }
                 },
@@ -597,6 +636,7 @@
                     // get the type of processor currently selected
                     var name = $('#selected-processor-name').text();
                     var processorType = $('#selected-processor-type').text();
+                    var bundle = $('#selected-processor-type').data('bundle');
 
                     // ensure something was selected
                     if (name === '' || processorType === '') {
@@ -606,7 +646,7 @@
                         });
                     } else {
                         // create the new processor
-                        createProcessor(name, processorType, pt);
+                        createProcessor(name, processorType, bundle, pt);
                     }
 
                     // hide the dialog
@@ -615,6 +655,7 @@
 
                 // get the grid reference
                 var grid = $('#processor-types-table').data('gridInstance');
+                var dataview = grid.getData();
 
                 // add the processor when its double clicked in the table
                 var gridDoubleClick = function (e, args) {
@@ -622,7 +663,7 @@
 
                     if (isSelectable(processorType)) {
                         $('#selected-processor-name').text(processorType.label);
-                        $('#selected-processor-type').text(processorType.type);
+                        $('#selected-processor-type').text(processorType.type).data('bundle', processorType.bundle);
 
                         addProcessor();
                     }
@@ -647,7 +688,7 @@
                             var item = grid.getDataItem(selected[0]);
                             return isSelectable(item) === false;
                         } else {
-                            return grid.getData().getLength() === 0;
+                            return dataview.getLength() === 0;
                         }
                     },
                     handler: {
@@ -700,9 +741,13 @@
 
                 // adjust the grid canvas now that its been rendered
                 grid.resizeCanvas();
-                grid.setSelectedRows([0]);
+
+                // auto select the first row if possible
+                if (dataview.getLength() > 0) {
+                    grid.setSelectedRows([0]);
+                }
             }
-        }
+        };
 
         var processorComponent = new ProcessorComponent();
         return processorComponent;

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
----------------------------------------------------------------------
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 a728c52..7050df0 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
@@ -51,10 +51,11 @@
                 'nf.Label',
                 'nf.Processor',
                 'nf.RemoteProcessGroupPorts',
+                'nf.ComponentVersion',
                 '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));
+            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, nfComponentVersion, 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, nfComponentVersion, nfQueueListing, nfStatusHistory));
             });
     } else if (typeof exports === 'object' && typeof module === 'object') {
         module.exports = (nf.Actions =
@@ -90,6 +91,7 @@
                 require('nf.Label'),
                 require('nf.Processor'),
                 require('nf.RemoteProcessGroupPorts'),
+                require('nf.ComponentVersion'),
                 require('nf.QueueListing'),
                 require('nf.StatusHistory')));
     } else {
@@ -125,10 +127,11 @@
             root.nf.Label,
             root.nf.Processor,
             root.nf.RemoteProcessGroupPorts,
+            root.nf.ComponentVersion,
             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) {
+}(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, nfComponentVersion, nfQueueListing, nfStatusHistory) {
     'use strict';
 
     var config = {
@@ -855,7 +858,10 @@
             if (selection.size() === 1 && nfCanvasUtils.isProcessor(selection)) {
                 var selectionData = selection.datum();
                 nfShell.showPage('../nifi-docs/documentation?' + $.param({
-                        select: nfCommon.substringAfterLast(selectionData.component.type, '.')
+                        select: selectionData.component.type,
+                        group: selectionData.component.bundle.group,
+                        artifact: selectionData.component.bundle.artifact,
+                        version: selectionData.component.bundle.version
                     }));
             }
         },
@@ -1228,6 +1234,23 @@
         },
 
         /**
+         * Views the state for the specified processor.
+         *
+         * @param {selection} selection
+         */
+        changeVersion: function (selection) {
+            if (selection.size() !== 1 || !nfCanvasUtils.isProcessor(selection)) {
+                return;
+            }
+
+            // get the processor data
+            var processor = selection.datum();
+
+            // attempt to change the version of the specified component
+            nfComponentVersion.promptForVersionChange(processor);
+        },
+
+        /**
          * Aligns the components in the specified selection vertically along the center of the components.
          *
          * @param {array} selection      The selection

http://git-wip-us.apache.org/repos/asf/nifi/blob/d90cf846/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/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
index 2d98e08..f0ea29e 100644
--- 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
@@ -37,6 +37,7 @@
                 'nf.Actions',
                 'nf.QueueListing',
                 'nf.ComponentState',
+                'nf.ComponentVersion',
                 'nf.Draggable',
                 'nf.Connectable',
                 'nf.StatusHistory',
@@ -79,8 +80,8 @@
                 '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, breadcrumbs
 Directive, 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, br
 eadcrumbsDirective, draggableDirective);
+            function ($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfComponentVersion, 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, oper
 ateCtrl, breadcrumbsDirective, draggableDirective) {
+                return factory($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfComponentVersion, 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, navigateC
 trl, operateCtrl, breadcrumbsDirective, draggableDirective);
             });
     } else if (typeof exports === 'object' && typeof module === 'object') {
         module.exports = factory(require('jquery'),
@@ -101,6 +102,7 @@
             require('nf.Snippet'),
             require('nf.QueueListing'),
             require('nf.ComponentState'),
+            require('nf.ComponentVersion'),
             require('nf.Draggable'),
             require('nf.Connectable'),
             require('nf.StatusHistory'),
@@ -162,6 +164,7 @@
             root.nf.Snippet,
             root.nf.QueueListing,
             root.nf.ComponentState,
+            root.nf.ComponentVersion,
             root.nf.Draggable,
             root.nf.Connectable,
             root.nf.StatusHistory,
@@ -205,7 +208,7 @@
             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, breadcrumbsDire
 ctive, draggableDirective) {
+}(this, function ($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfClusterSummary, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfShell, nfSettings, nfActions, nfSnippet, nfQueueListing, nfComponentState, nfComponentVersion, 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, operateC
 trl, breadcrumbsDirective, draggableDirective) {
 
     var config = {
         urls: {
@@ -339,6 +342,7 @@
                     nfActions.init();
                     nfQueueListing.init();
                     nfComponentState.init();
+                    nfComponentVersion.init(nfSettings);
 
                     // initialize the component behaviors
                     nfDraggable.init();