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>

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;

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>

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);
         });
     }
 

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>

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">

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%;
 }

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;
 }

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;
 }

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)) {
+                    if (nf.Common.isDefinedAndNotNull(groupId)) {
-                        uri = '../nifi-api/process-groups/' + encodeURIComponent(configurationOptions.groupId) + '/controller-services';
+                        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;
+            });
         }
     };
 

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);

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

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.
          *

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.
          * 

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();
                     }

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-object-threshold').val('10000');
-                $('#back-pressure-data-size-threshold').val('0 MB');
+                $('#back-pressure-data-size-threshold').val('1 GB');
 
                 // select the first tab
                 $('#connection-configuration-tabs').find('li:first').click();

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');

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

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';
         }
     };
 }());

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) {

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);
     };
 

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');

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';
         }
     };
 }());

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) {

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');

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.
          *