From 9e54a3d260e037dd2ad154777771883a12ec42ba Mon Sep 17 00:00:00 2001
From: Matt Gilman <matt.c.gilman@gmail.com>
Date: Tue, 21 Jun 2016 16:55:49 -0400
Subject: [PATCH] NIFI-1946: - Updating palette styling. - Providing selection
 context. - Updating add connection icon. NIFI-2058: - Updating defaults for
 connection backpressure. NIFI-2014: - Updating birds eye colors. NIFI-2016: -
 Updating default label color. NIFI-2013: - Updating how we color processors.
 NIFI-2043: - Using correct group id when creating controller services inline.

Signed-off-by: Bryan Bende <bbende@apache.org>
---
 .../controller/StandardFlowFileQueue.java     |  43 +++--
 .../nifi-web/nifi-web-api/pom.xml             |   5 -
 .../nifi/web/StandardNiFiServiceFacade.java   |   3 +-
 .../partials/canvas/fill-color-dialog.jsp     |   2 +-
 .../WEB-INF/partials/canvas/navigation.jsp    |  11 ++
 .../src/main/webapp/css/dialog.css            |   6 +
 .../nifi-web-ui/src/main/webapp/css/graph.css |   6 +-
 .../src/main/webapp/css/navigation.css        |  49 +++++
 .../src/main/webapp/images/addConnect.png     | Bin 1996 -> 0 bytes
 .../propertytable/jquery.propertytable.js     |  19 +-
 .../nf-ng-canvas-graph-controls-controller.js | 172 ++++++++++++++----
 .../main/webapp/js/nf/canvas/nf-birdseye.js   |   9 +-
 .../webapp/js/nf/canvas/nf-canvas-utils.js    |   2 +-
 .../src/main/webapp/js/nf/canvas/nf-canvas.js |  25 ++-
 .../webapp/js/nf/canvas/nf-connectable.js     |  17 +-
 .../nf/canvas/nf-connection-configuration.js  |   4 +-
 .../js/nf/canvas/nf-controller-service.js     |   5 +-
 .../js/nf/canvas/nf-label-configuration.js    |   3 +
 .../src/main/webapp/js/nf/canvas/nf-label.js  |   2 +-
 .../js/nf/canvas/nf-port-configuration.js     |   3 +
 .../canvas/nf-process-group-configuration.js  |   3 +
 .../nf/canvas/nf-processor-configuration.js   |   5 +-
 .../main/webapp/js/nf/canvas/nf-processor.js  |  11 +-
 .../nf-remote-process-group-configuration.js  |   3 +
 .../webapp/js/nf/canvas/nf-reporting-task.js  |   4 +-
 .../main/webapp/js/nf/canvas/nf-settings.js   |   7 +
 26 files changed, 324 insertions(+), 95 deletions(-)
 delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/addConnect.png

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-framework-core/src/main/java/org/apache/nifi/controller/StandardFlowFileQueue.java b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-framework-core/src/main/java/org/apache/nifi/controller/StandardFlowFileQueue.java
index 673595961a..aa77765f92 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-framework-core/src/main/java/org/apache/nifi/controller/StandardFlowFileQueue.java
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-framework-core/src/main/java/org/apache/nifi/controller/StandardFlowFileQueue.java
@@ -16,25 +16,6 @@
  */
 package org.apache.nifi.controller;
 
-import java.io.FileNotFoundException;
-import java.io.IOException;
-import java.io.Serializable;
-import java.util.ArrayList;
-import java.util.Collection;
-import java.util.Collections;
-import java.util.Comparator;
-import java.util.Iterator;
-import java.util.List;
-import java.util.Map;
-import java.util.PriorityQueue;
-import java.util.Queue;
-import java.util.Set;
-import java.util.concurrent.ConcurrentHashMap;
-import java.util.concurrent.ConcurrentMap;
-import java.util.concurrent.TimeUnit;
-import java.util.concurrent.atomic.AtomicReference;
-import java.util.concurrent.locks.ReentrantReadWriteLock;
-
 import org.apache.nifi.connectable.Connection;
 import org.apache.nifi.controller.queue.DropFlowFileState;
 import org.apache.nifi.controller.queue.DropFlowFileStatus;
@@ -74,6 +55,25 @@ import org.apache.nifi.util.concurrency.TimedLock;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
+import java.io.FileNotFoundException;
+import java.io.IOException;
+import java.io.Serializable;
+import java.util.ArrayList;
+import java.util.Collection;
+import java.util.Collections;
+import java.util.Comparator;
+import java.util.Iterator;
+import java.util.List;
+import java.util.Map;
+import java.util.PriorityQueue;
+import java.util.Queue;
+import java.util.Set;
+import java.util.concurrent.ConcurrentHashMap;
+import java.util.concurrent.ConcurrentMap;
+import java.util.concurrent.TimeUnit;
+import java.util.concurrent.atomic.AtomicReference;
+import java.util.concurrent.locks.ReentrantReadWriteLock;
+
 /**
  * A FlowFileQueue is used to queue FlowFile objects that are awaiting further
  * processing. Must be thread safe.
@@ -95,7 +95,10 @@ public final class StandardFlowFileQueue implements FlowFileQueue {
 
     private boolean swapMode = false;
 
-    private final AtomicReference<MaxQueueSize> maxQueueSize = new AtomicReference<>(new MaxQueueSize("0 MB", 0L, 0L));
+    public static final int DEFAULT_BACKPRESSURE_COUNT = 10000;
+    public static final String DEFAULT_BACKPRESSURE_SIZE = "1 GB";
+    private final AtomicReference<MaxQueueSize> maxQueueSize = new AtomicReference<>(new MaxQueueSize(DEFAULT_BACKPRESSURE_SIZE,
+            DataUnit.parseDataSize(DEFAULT_BACKPRESSURE_SIZE, DataUnit.B).longValue(), DEFAULT_BACKPRESSURE_COUNT));
     private final AtomicReference<TimePeriod> expirationPeriod = new AtomicReference<>(new TimePeriod("0 mins", 0L));
 
     private final EventReporter eventReporter;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-api/pom.xml b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-api/pom.xml
index b0d4dda454..98824865ea 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-api/pom.xml
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-api/pom.xml
@@ -360,10 +360,5 @@
             <artifactId>spock-core</artifactId>
             <scope>test</scope>
         </dependency>
-        <dependency>
-            <groupId>cglib</groupId>
-            <artifactId>cglib-nodep</artifactId>
-            <scope>test</scope>
-        </dependency>
     </dependencies>
 </project>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-api/src/main/java/org/apache/nifi/web/StandardNiFiServiceFacade.java b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-api/src/main/java/org/apache/nifi/web/StandardNiFiServiceFacade.java
index a1e88cab45..af3f8a4100 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-api/src/main/java/org/apache/nifi/web/StandardNiFiServiceFacade.java
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-api/src/main/java/org/apache/nifi/web/StandardNiFiServiceFacade.java
@@ -2664,7 +2664,8 @@ public class StandardNiFiServiceFacade implements NiFiServiceFacade {
                 descriptor = new PropertyDescriptor.Builder().name(property).addValidator(Validator.INVALID).dynamic(true).build();
             }
 
-            return dtoFactory.createPropertyDescriptorDto(descriptor, controllerService.getProcessGroup().getIdentifier());
+            final String groupId = controllerService.getProcessGroup() == null ? null : controllerService.getProcessGroup().getIdentifier();
+            return dtoFactory.createPropertyDescriptorDto(descriptor, groupId);
         });
     }
 
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 e6c7ae3a56..04844a77af 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,7 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
-<div id="fill-color-dialog" class="hidden small-dialog">
+<div id="fill-color-dialog" class="hidden">
     <div class="dialog-content">
         <div class="setting">
             <div class="setting-name">Color</div>
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 9e89e58fb5..59d2a4535d 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
@@ -81,6 +81,17 @@
             <div class="clear"></div>
         </div>
         <div class="graph-control-content hidden">
+            <div id="operation-context">
+                <div id="operation-context-logo">
+                    <i class="icon" ng-class="appCtrl.serviceProvider.graphControlsCtrl.getContextIcon()"></i>
+                </div>
+                <div id="operation-context-details-container">
+                    <div id="operation-context-name">{{appCtrl.serviceProvider.graphControlsCtrl.getContextName()}}</div>
+                    <div id="operation-context-type" ng-class="appCtrl.serviceProvider.graphControlsCtrl.hide()">{{appCtrl.serviceProvider.graphControlsCtrl.getContextType()}}</div>
+                </div>
+                <div class="clear"></div>
+                <div id="operation-context-id" ng-class="appCtrl.serviceProvider.graphControlsCtrl.hide()">{{appCtrl.serviceProvider.graphControlsCtrl.getContextId()}}</div>
+            </div>
             <div id="operation-buttons">
                 <div>
                     <div id="operate-configure" class="action-button" title="Configuration">
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 38265396f7..f0366fb3f4 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
@@ -22,6 +22,12 @@
     width: 160px;
 }
 
+#fill-color-dialog {
+    display: none;
+    width: 215px;
+    height: 470px;
+}
+
 #fill-color-value {
     width: 100%;
 }
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 bab817acc3..a22fb4324c 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
@@ -149,8 +149,11 @@ rect.selection, rect.drag-selection, rect.label-drag {
     fill: transparent;
 }
 
-image.add-connect {
+text.add-connect {
     cursor: pointer;
+    font-family: flowfont;
+    font-size: 28px;
+    fill: #004849;
 }
 
 /*
@@ -168,7 +171,6 @@ text.processor-type {
 }
 
 text.processor-icon {
-    fill: #ad9897;
     font-family: flowfont;
     font-size: 30px;
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css
index ba5b705ac6..88d831472c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css
@@ -38,6 +38,7 @@
 #graph-controls {
     position: absolute;
     left: 0;
+    top: 110px;
     z-index: 2;
 }
 
@@ -120,6 +121,54 @@ div.graph-control-header-action {
     margin-top: 10px;
 }
 
+#operation-context {
+    margin-top: 10px;
+}
+
+#operation-context-logo {
+    float: left;
+}
+
+#operation-context-logo i.icon {
+    font-size: 32px;
+    font-family: flowfont;
+    color: #ad9897;
+}
+
+#operation-context-details-container {
+    float: left;
+    padding-left: 10px;
+}
+
+#operation-context-name {
+    height: 15px;
+    font-size: 15px;
+    font-family: Roboto;
+    color: #262626;
+    width: 210px;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    white-space: nowrap;
+}
+
+#operation-context-type {
+    font-size: 12px;
+    font-family: Roboto;
+    color: #728e9b;
+    margin-top: 3px;
+}
+
+#operation-context-id {
+    font-size: 12px;
+    font-family: Roboto;
+    color: #775351;
+    margin-top: 10px;
+}
+
+#operation-context-type.invisible, #operation-context-id.invisible {
+    visibility: hidden;
+}
+
 #operation-buttons {
     margin-top: 10px;
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/addConnect.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/addConnect.png
deleted file mode 100755
index b33a305df8d7887a85b2deae75ba8cb41e44abcb..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1996
zcmV;-2Q&DIP)<h;3K|Lk000e1NJLTq000~S000~a1^@s6at+^<00004b3#c}2nYxW
zd<bNS00009a7bBm000XT000XT0n*)m`~Uy|9CSrkbW?9;ba!ELWdK2BZ(?O2Mrm?o
zcW-iQb09-gGzPNMpa1{>7IZ~ebVG7wVRUJ4ZXi@?ZDjy3H7_wSFEKFCBDYfj00$&V
zL_t(YiG`M5XjIu9$G_*^J2SbHxk;Q!Tv3TGiIR2Onh6n0tVm=EU8E20d-LK`VM87y
zSOphhE3JqH6Z;psi<k<E<|zwBBo+U>h#;}4gZVodleozpGygJk?!D(<A98OtG3oZe
zmvb)6oX`3F&iS45CHVi1_|kll4N@B<eFfkDb20#cQk#E62ni-Nu3Wit$g-@{jIraC
z(v}Y=F->zi6be15R4T*${rzbGd~M3jlM+I<2NFUw0Q%LdR}Yz{d0x}BpB+4SFw)l6
z7HVv4jOe<q2q92PK?p%?+jb`=CcKG>2~P;|lv4V;{{H^g0EALX{vgnYg$4%)e<g(Y
z&9P(0b{sl%C|pxhv;N2Jno<g`>uTwA+I#x+X<pa$-}m<R-U7e^=oX+43l9zsei4ty
z&z?MavL+sn3&SwBq<p(Z2!Rj+xm?Z|9UZ0leEwQ*Z|@BNo>EF~0%Gkzga!r%dJ>7m
zZ@as@jh#DpdK;oA+c35Sy0-OzZQG&I(NU4h<u3O1_1y%(07yMp9023u#fv}LyLa!O
zjvhT4-o1Nw6@c_NJ~(~yLp@l0U=7a=$Db`fi#=O@7F%VjXt7!<rfITREEZl_S?M}_
z`0&3TJ$hsVP}&AyxUsSEe5q90H99)lu&}V8ODVZhiYcXnev|HJ?pqHRAI5CQ#)aes
z*cBTO=N`uHP2H;pz?z$zOZ)ciizX6@3jo3ZNKjWsUtiy+(P*@*SS*saZ{HgC@856C
zX0y7Kl1nMsb{cs*QfF6e*sJzh8p}59vW=0+kvgRm_n~FeG`r58J^LvDV;z`CBtDPD
zVmNW)!~$cCXEK@a&6_uOEiW$<Kf*1t%Ql8mLm2w`5CCB4vmp$f8iHN0;b(_8H8rhT
zmW4zj@%ctzSW0;;8jZSbZEg8er%ugzp2ufqX2O>*U*11AH>YoxQoCTI<C_k2{JjGJ
z(D9cJbo{Yn9Vn&boO2$F#T+5TF#ur=fDRz!y6(rOX|B4i%i7x7@~2Oq&Xmh#H9tRZ
zT)TE{Zzhw`J_H{B==ic-uwm!@l;+pQ$M+mxR!T9~b(!nB%(ARi*L6Pz5DFsHg%GHz
zsd1{+s-TpL_V)JoXU?2?Bc)`oU%!r?KYzY;etupH(m6al+|V}LMpJuI-{n?vFwdFD
zt>lnuPJQ=P>Z@7Dak%TcoKh;n;jk-&007<afg0zWXqv_x$B|M>BBdmqot^ofo}QWO
z*RLO3TwJWVbm>xSe}Dh<t5>gLH*VZ$NhXsk1AiEJGw|8KY*4S9b2yFz#uzx~V2mlw
zITu0@0Gbh$g_M$1DisoqMuR&NQcBX*)wNPCm#1&vzP*2HYRWoy?%XH&d_DpI*=)8}
zN{K*12nZnp7-5Vl#u&=wvgSuff;v=EO0~4K6!AO{uInP`UDqY4R4Uig(=$s5Q2`79
z-oJkznVg)AIF18KDICWklv3h24hiP)JP)~CE+nM{0A&O>h*Bz>&1M^$o11AU6k1=c
zVHglXpj<9%QpzpY+xYl+EFO=0L4;CDaLzaB-Me>D09gQ1^MS%~oaeb*u7*+y*L8{O
zx^Nr^j^kitWTffVty^2(K>(PVnu=0Ng9z9AK(6azX=y21tyZ4{5E=jhfX&Rzd`l@c
zGMP-&bzS8H$%6+En(o}Wvn>n&(&=>FMp!ToQaUv?Ra>oAjoI1RZvimfKc!@LcD9mC
zCOb=|(!N9@QPDI_DW$Mu#}2QxwY6wjmgm2Dh7cmydlZYsNGg?@XN(cX81WAa7-J}v
zO8WEX&p%>}jorO__ZtAK8(#~pwzhV`vaDZHN<&ReO;sTTF$_aCG&Fbz4jd>QIdUY|
z-QB&|-rk;TY;3I7)z!J0rpb6bUX4bh%m=BU9~&Es7YYUA&6_u0&dtqb064*+;Q*W`
zPoBJLYHIqMl=6#ED8yP@TT9_^7@DRjP1A^`X&{84wzk&o=;*M6+5-T`aUi8s!Qq*n
zo~~P1Sg0=+i#HxWemn-i0l<R@;e%B=ot|!KX{o7Jt3O>`UDX>J8fZ|LLI`lq$%b(t
z<rg_9rDS}3Jdw?2<K=SsANTIv`x-#e2g;4W04mez^naS0n?26?(Z$8ZI;E6|L?T>D
zxg8At-eG=zzIJSEY*(RB2o(y2zYY%%e+?iHfcjZf+j<%RQ2-5{ot??n*4AI^y8h!x
zB*HDrqV@Il)Uqs3*LB4?*C?e%u~;+<g+kQxJVOZa@5#x@KfieK;w69rfGW20G#|P)
z049K10QJda@<;pk@Bf8qnn^;)9)EE}DHYho1xo45OeXWsmoHzA`zfsWk!|nVK4=;M
z!w1*+5u5%vjI}2%aNYud=kF2qBXY22nmE?H&wBeICl=Uy-3N#LMHu+r@(0F>`|^B{
e!1u;$Q~NKBVI8j8g!OX(0000<MNUMnLSTa2rJ}z8

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 e436c0456e..4c8478c244 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
@@ -45,6 +45,7 @@
 (function ($) {
     var languageId = 'nfel';
     var editorClass = languageId + '-editor';
+    var groupId = null;
 
     // text editor
     var textEditor = function (args) {
@@ -962,8 +963,8 @@
 
                     // determine the appropriate uri for creating the controller service
                     var uri = '../nifi-api/controller/controller-services';
-                    if (nf.Common.isDefinedAndNotNull(configurationOptions.groupId)) {
-                        uri = '../nifi-api/process-groups/' + encodeURIComponent(configurationOptions.groupId) + '/controller-services';
+                    if (nf.Common.isDefinedAndNotNull(groupId)) {
+                        uri = '../nifi-api/process-groups/' + encodeURIComponent(groupId) + '/controller-services';
                     }
 
                     // add the new controller service
@@ -1217,7 +1218,10 @@
                         });
                     } else {
                         if ($('#settings').is(':visible')) {
-                            deferred.resolve();
+                            // reload the settings
+                            nf.Settings.loadSettings().done(function () {
+                                deferred.resolve();
+                            });
                         } else {
                             // reload the settings and show
                             nf.Settings.showSettings().done(function () {
@@ -1771,6 +1775,15 @@
             });
 
             return properties;
+        },
+
+        /**
+         * Sets the current group id.
+         */
+        setGroupId: function (currentGroupId) {
+            return this.each(function () {
+                groupId = currentGroupId;
+            });
         }
     };
 
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 328776817b..9990eaeadf 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
@@ -20,20 +20,6 @@
 nf.ng.Canvas.GraphControlsCtrl = function (serviceProvider, navigateCtrl, operateCtrl) {
     'use strict';
 
-    var MIN_GRAPH_CONTROL_TOP = 117;
-
-    /**
-     * Positions the graph controls based on the size of the screen.
-     */
-    var positionGraphControls = function () {
-        var windowHeight = $(window).height();
-        var navigationHeight = $('#navigation-control').outerHeight();
-        var operationHeight = $('#operation-control').outerHeight();
-        var graphControlTop = (windowHeight / 2) - ((navigationHeight + operationHeight) / 2);
-
-        $('#graph-controls').css('top', Math.max(MIN_GRAPH_CONTROL_TOP, graphControlTop));
-    };
-
     /**
      * Opens the specified graph control.
      *
@@ -66,9 +52,6 @@ nf.ng.Canvas.GraphControlsCtrl = function (serviceProvider, navigateCtrl, operat
         var graphControlId = graphControl.attr('id');
         graphControlVisibility[graphControlId] = true;
         nf.Storage.setItem('graph-control-visibility', graphControlVisibility);
-
-        // reset the graph control position
-        positionGraphControls();
     };
 
     /**
@@ -103,9 +86,6 @@ nf.ng.Canvas.GraphControlsCtrl = function (serviceProvider, navigateCtrl, operat
         var graphControlId = graphControl.attr('id');
         graphControlVisibility[graphControlId] = false;
         nf.Storage.setItem('graph-control-visibility', graphControlVisibility);
-
-        // reset the graph control position
-        positionGraphControls();
     };
 
     function GraphControlsCtrl(navigateCtrl, operateCtrl) {
@@ -143,17 +123,10 @@ nf.ng.Canvas.GraphControlsCtrl = function (serviceProvider, navigateCtrl, operat
                         }
                     }
                 });
+            } else {
+                openGraphControl($('#navigation-control'));
+                openGraphControl($('#operation-control'));
             }
-
-            // set the initial position
-            positionGraphControls();
-        },
-
-        /**
-         * Position the graph controls
-         */
-        positionGraphControls: function () {
-            positionGraphControls();
         },
 
         /**
@@ -175,7 +148,144 @@ nf.ng.Canvas.GraphControlsCtrl = function (serviceProvider, navigateCtrl, operat
             } else {
                 hideGraphControl(icon.closest('div.graph-control'));
             }
-        }
+        },
+
+        /**
+         * Gets the icon to show for the selection context.
+         */
+        getContextIcon: function () {
+            var selection = nf.CanvasUtils.getSelection();
+
+            if (selection.empty()) {
+                if (nf.Canvas.getParentGroupId() === null) {
+                    return 'icon-drop';
+                } else {
+                    return 'icon-group';
+                }
+            } else {
+                if (selection.size() === 1) {
+                    if (nf.CanvasUtils.isProcessor(selection)) {
+                        return 'icon-processor';
+                    } else if (nf.CanvasUtils.isProcessGroup(selection)) {
+                        return 'icon-group';
+                    } else if (nf.CanvasUtils.isInputPort(selection)) {
+                        return 'icon-port-in';
+                    } else if (nf.CanvasUtils.isOutputPort(selection)) {
+                        return 'icon-port-out';
+                    } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) {
+                        return 'icon-group-remote';
+                    } else if (nf.CanvasUtils.isFunnel(selection)) {
+                        return 'icon-funnel';
+                    } else if (nf.CanvasUtils.isLabel(selection)) {
+                        return 'icon-label';
+                    } else if (nf.CanvasUtils.isConnection(selection)) {
+                        return 'icon-connect';
+                    }
+                } else {
+                    return 'icon-drop';
+                }
+            }
+        },
+
+        /**
+         * Will hide target when appropriate.
+         */
+        hide: function () {
+            var selection = nf.CanvasUtils.getSelection();
+            if (selection.size() > 1) {
+                return 'invisible'
+            } else {
+                return '';
+            }
+        },
+
+        /**
+         * Gets the name to show for the selection context.
+         */
+        getContextName: function () {
+            var selection = nf.CanvasUtils.getSelection();
+            var canRead = nf.Canvas.canRead();
+
+            if (selection.empty()) {
+                if (canRead) {
+                    return nf.Canvas.getGroupName();
+                } else {
+                    return nf.Canvas.getGroupId();
+                }
+            } else {
+                if (selection.size() === 1) {
+                    var d = selection.datum();
+                    if (d.accessPolicy.canRead) {
+                        if (nf.CanvasUtils.isLabel(selection)) {
+                            if ($.trim(d.component.label) !== '') {
+                                return d.component.label;
+                            } else {
+                                return '';
+                            }
+                        } else if (nf.CanvasUtils.isConnection(selection)) {
+                            return nf.CanvasUtils.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 = nf.CanvasUtils.getSelection();
+
+            if (selection.empty()) {
+                return 'Process Group';
+            } else {
+                if (selection.size() === 1) {
+                    if (nf.CanvasUtils.isProcessor(selection)) {
+                        return 'Processor';
+                    } else if (nf.CanvasUtils.isProcessGroup(selection)) {
+                        return 'Process Group';
+                    } else if (nf.CanvasUtils.isInputPort(selection)) {
+                        return 'Input Port';
+                    } else if (nf.CanvasUtils.isOutputPort(selection)) {
+                        return 'Output Port';
+                    } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) {
+                        return 'Remote Process Group';
+                    } else if (nf.CanvasUtils.isFunnel(selection)) {
+                        return 'Funnel';
+                    } else if (nf.CanvasUtils.isLabel(selection)) {
+                        return 'Label';
+                    } else if (nf.CanvasUtils.isConnection(selection)) {
+                        return 'Connection';
+                    }
+                } else {
+                    return 'Multiple selected';
+                }
+            }
+        },
+
+        /**
+         * Gets the id to show for the selection context.
+         */
+        getContextId: function () {
+            var selection = nf.CanvasUtils.getSelection();
+
+            if (selection.empty()) {
+                return nf.Canvas.getGroupId();
+            } else {
+                if (selection.size() === 1) {
+                    var d = selection.datum();
+                    return d.id;
+                } else {
+                    return 'Multiple selected';
+                }     
+            }
+        },
     }
 
     var graphControlsCtrl = new GraphControlsCtrl(navigateCtrl, operateCtrl);
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
index 9cbe22845c..51fb5505d1 100644
--- 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
@@ -163,32 +163,31 @@ nf.Birdseye = (function () {
         });
 
         // funnels
-        context.fillStyle = '#9f6000';
+        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 = '#aaa';
+        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 = '#294c58';
+        context.fillStyle = '#728e9b';
         $.each(components.remoteProcessGroups, function (_, d) {
             context.fillRect(d.position.x, d.position.y, d.dimensions.width, d.dimensions.height);
         });
 
         // process groups
-        context.fillStyle = '#294c58';
         $.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) {
-            var color = nf.Processor.defaultColor();
+            var color = '#dde4eb';
 
             if (d.accessPolicy.canRead) {
                 // use the specified color if appropriate
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 990504b67b..31576bafe2 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
@@ -974,7 +974,7 @@ nf.CanvasUtils = (function () {
             }
             return supportsModification;
         },
-        
+
         /**
          * Determines the connectable type for the specified source selection.
          *
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
index d5f4addda5..0f8c9e3849 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
@@ -527,8 +527,6 @@ nf.Canvas = (function () {
                 updateGraphSize();
                 updateFlowStatusContainerSize();
 
-                nf.ng.Bridge.get('appCtrl.serviceProvider.graphControlsCtrl').positionGraphControls();
-
                 // resize grids when appropriate
                 if ($('#process-group-controller-services-table').is(':visible')) {
                     nf.ProcessGroupConfiguration.resetTableSize();
@@ -646,12 +644,20 @@ nf.Canvas = (function () {
             // set the group details
             nf.Canvas.setGroupId(processGroupFlow.id);
 
+            // get the current group name from the breadcrumb
+            var breadcrumb = processGroupFlow.breadcrumb;
+            if (breadcrumb.accessPolicy.canRead) {
+                nf.Canvas.setGroupName(breadcrumb.breadcrumb.name);
+            } else {
+                nf.Canvas.setGroupName(breadcrumb.id);
+            }
+
             // update the access policies
             accessPolicy = flowResponse.accessPolicy;
             
             // update the breadcrumbs
             nf.ng.Bridge.injector.get('breadcrumbsCtrl').resetBreadcrumbs();
-            nf.ng.Bridge.injector.get('breadcrumbsCtrl').generateBreadcrumbs(processGroupFlow.breadcrumb);
+            nf.ng.Bridge.injector.get('breadcrumbsCtrl').generateBreadcrumbs(breadcrumb);
             nf.ng.Bridge.injector.get('breadcrumbsCtrl').resetScrollPosition();
 
             // update the timestamp
@@ -959,6 +965,19 @@ nf.Canvas = (function () {
             return parentGroupId;
         },
 
+        /**
+         * Whether the current user can write in this group.
+         *
+         * @returns {boolean}   can write
+         */
+        canRead: function () {
+            if (accessPolicy === null) {
+                return false;
+            } else {
+                return accessPolicy.canRead === true;
+            }
+        },
+        
         /**
          * Whether the current user can write in this group.
          * 
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
index 0c69774827..d81c3f591d 100644
--- 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
@@ -94,7 +94,7 @@ nf.Connectable = (function () {
                 .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 + 20) + ')';
+                        return 'translate(' + d3.event.x + ', ' + (d3.event.y + 50) + ')';
                     });
 
                     // mark node's connectable if supported
@@ -205,32 +205,29 @@ nf.Connectable = (function () {
                         // ensure the current component supports connection source
                         if (nf.CanvasUtils.isValidConnectionSource(selection)) {
                             // see if theres already a connector rendered
-                            var addConnect = d3.select('image.add-connect');
+                            var addConnect = d3.select('text.add-connect');
                             if (addConnect.empty()) {
                                 var x = (d.dimensions.width / 2) - 14;
-                                var y = (d.dimensions.height / 2) - 14;
+                                var y = (d.dimensions.height / 2) + 14;
 
-                                selection.append('image')
+                                selection.append('text')
                                     .datum({
                                         origX: x,
                                         origY: y
                                     })
                                     .call(connect)
-                                    .call(nf.CanvasUtils.disableImageHref)
                                     .attr({
                                         'class': 'add-connect',
-                                        'xlink:href': 'images/addConnect.png',
-                                        'width': 28,
-                                        'height': 28,
                                         'transform': 'translate(' + x + ', ' + y + ')'
-                                    });
+                                    })
+                                    .text('\ue834');
                             }
                         }
                     }
                 })
                 .on('mouseleave.connectable', function () {
                     // conditionally remove the connector
-                    var addConnect = d3.select(this).select('image.add-connect');
+                    var addConnect = d3.select(this).select('text.add-connect');
                     if (!addConnect.empty() && !addConnect.classed('dragging')) {
                         addConnect.remove();
                     }
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 485896b348..b4f6ba0375 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
@@ -1203,8 +1203,8 @@ nf.ConnectionConfiguration = (function () {
             $.when(initializeSourceNewConnectionDialog(source), initializeDestinationNewConnectionDialog(destination)).done(function () {
                 // set the default values
                 $('#flow-file-expiration').val('0 sec');
-                $('#back-pressure-object-threshold').val('0');
-                $('#back-pressure-data-size-threshold').val('0 MB');
+                $('#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();
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 29b2f27ff9..16d778727a 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
@@ -1670,7 +1670,6 @@ nf.ControllerService = (function () {
                 // initialize the property table
                 $('#controller-service-properties').propertytable('destroy').propertytable({
                     readOnly: false,
-                    // groupId: controllerServiceEntity.component.parentGroupId,
                     dialogContainer: '#new-controller-service-property-container',
                     descriptorDeferred: getControllerServicePropertyDescriptor,
                     goToServiceDeferred: function () {
@@ -1813,7 +1812,9 @@ nf.ControllerService = (function () {
                 controllerServiceDialog.modal('setButtonModel', buttons);
 
                 // load the property table
-                $('#controller-service-properties').propertytable('loadProperties', controllerService.properties, controllerService.descriptors, controllerServiceHistory.propertyHistory);
+                $('#controller-service-properties')
+                    .propertytable('setGroupId', controllerService.parentGroupId)
+                    .propertytable('loadProperties', controllerService.properties, controllerService.descriptors, controllerServiceHistory.propertyHistory);
 
                 // show the details
                 controllerServiceDialog.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-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 2c5a3a0869..36d4c00ad8 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
@@ -67,6 +67,9 @@ nf.LabelConfiguration = (function () {
                             }).done(function (response) {
                                 // get the label out of the response
                                 nf.Label.set(response);
+
+                                // inform Angular app values have changed
+                                nf.ng.Bridge.digest();
                             }).fail(nf.Common.handleAjaxError);
 
                             // reset and hide the dialog
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
index f99f0e579c..94c7b0c0bb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
@@ -509,7 +509,7 @@ nf.Label = (function () {
          * Returns the default color that should be used when drawing a label.
          */
         defaultColor: function () {
-            return '#ffde93';
+            return '#fff7d7';
         }
     };
 }());
\ 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-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 da71567009..be8fb2307d 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
@@ -74,6 +74,9 @@ nf.PortConfiguration = (function () {
                             // refresh the port component
                             nf.Port.set(response);
 
+                            // inform Angular app values have changed
+                            nf.ng.Bridge.digest();
+                            
                             // close the details panel
                             $('#port-configuration').modal('hide');
                         }).fail(function (xhr, status, error) {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js
index 11c388cd2f..2e5f39d393 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js
@@ -87,6 +87,9 @@ nf.ProcessGroupConfiguration = (function () {
             $('#process-group-configuration-save').off('click').on('click', function () {
                 saveConfiguration(response.revision.version, groupId);
             });
+
+            // inform Angular app values have changed
+            nf.ng.Bridge.digest();
         }).fail(nf.Common.handleAjaxError);
     };
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
index 323833977b..536f39b0fe 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
@@ -540,7 +540,6 @@ nf.ProcessorConfiguration = (function () {
             // initialize the property table
             $('#processor-properties').propertytable({
                 readOnly: false,
-                groupId: nf.Canvas.getGroupId(),
                 dialogContainer: '#new-processor-property-container',
                 descriptorDeferred: function (propertyName) {
                     var processor = $('#processor-configuration').data('processorDetails');
@@ -800,7 +799,9 @@ nf.ProcessorConfiguration = (function () {
                     $('#processor-configuration').modal('setButtonModel', buttons);
 
                     // load the property table
-                    $('#processor-properties').propertytable('loadProperties', processor.config.properties, processor.config.descriptors, processorHistory.propertyHistory);
+                    $('#processor-properties')
+                        .propertytable('setGroupId', processor.parentGroupId)
+                        .propertytable('loadProperties', processor.config.properties, processor.config.descriptors, processorHistory.propertyHistory);
 
                     // show the details
                     $('#processor-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-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 6f1a025420..d553b576b6 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
@@ -547,14 +547,15 @@ nf.Processor = (function () {
         // ---------------
 
         // update the processor color
-        updated.select('rect.body')
+        updated.select('text.processor-icon')
             .style('fill', function (d) {
-                if (!d.accessPolicy.canRead) {
-                    return null;
-                }
                 
                 // get the default color
                 var color = nf.Processor.defaultColor();
+                
+                if (!d.accessPolicy.canRead) {
+                    return color;
+                }
 
                 // use the specified color if appropriate
                 if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) {
@@ -923,7 +924,7 @@ nf.Processor = (function () {
          * Returns the default color that should be used when drawing a processor.
          */
         defaultColor: function () {
-            return '#ffffff';
+            return '#ad9897';
         }
     };
 }());
\ 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-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js
index 7159033888..b6520591dc 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js
@@ -60,6 +60,9 @@ nf.RemoteProcessGroupConfiguration = (function () {
                                 // refresh the remote process group component
                                 nf.RemoteProcessGroup.set(response);
 
+                                // inform Angular app values have changed
+                                nf.ng.Bridge.digest();
+                                
                                 // close the details panel
                                 $('#remote-process-group-configuration').modal('hide');
                             }).fail(function (xhr, status, error) {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-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 9d02ab0277..6e1a9d63ec 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
@@ -555,7 +555,9 @@ nf.ReportingTask = (function () {
                 $('#reporting-task-configuration').modal('setButtonModel', buttons);
 
                 // load the property table
-                $('#reporting-task-properties').propertytable('loadProperties', reportingTask.properties, reportingTask.descriptors, reportingTaskHistory.propertyHistory);
+                $('#reporting-task-properties')
+                    .propertytable('setGroupId', reportingTask.parentGroupId)
+                    .propertytable('loadProperties', reportingTask.properties, reportingTask.descriptors, reportingTaskHistory.propertyHistory);
 
                 // show the details
                 $('#reporting-task-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-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 a74e780664..e3744c6890 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
@@ -1029,6 +1029,13 @@ nf.Settings = (function () {
             return loadSettings().done(showSettings);
         },
 
+        /**
+         * Loads the settings dialogs.
+         */
+        loadSettings: function () {
+            return loadSettings();
+        },
+
         /**
          * Selects the specified controller service.
          *