You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by mc...@apache.org on 2016/04/29 22:32:15 UTC

[02/13] nifi git commit: NIFI-1554: - Populating component entities in the REST API to decouple key fields from the configuration DTOs. - Added initial support for components in UI when access isn't allowed. Formal styling to come later.

http://git-wip-us.apache.org/repos/asf/nifi/blob/ff98d823/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
index bde0f41..5af7a45 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
@@ -59,9 +59,7 @@ nf.ProcessGroup = (function () {
      * Selects the process group elements against the current process group map.
      */
     var select = function () {
-        return processGroupContainer.selectAll('g.process-group').data(processGroupMap.values(), function (d) {
-            return d.component.id;
-        });
+        return processGroupContainer.selectAll('g.process-group').data(processGroupMap.values());
     };
 
     /**
@@ -78,7 +76,7 @@ nf.ProcessGroup = (function () {
         var processGroup = entered.append('g')
                 .attr({
                     'id': function (d) {
-                        return 'id-' + d.component.id;
+                        return 'id-' + d.id;
                     },
                     'class': 'process-group component'
                 })
@@ -152,45 +150,48 @@ nf.ProcessGroup = (function () {
         // always support selecting and navigation
         processGroup.on('dblclick', function (d) {
                     // enter this group on double click
-                    nf.CanvasUtils.enterGroup(d.component.id);
+                    nf.CanvasUtils.enterGroup(d.id);
                 })
                 .call(nf.Selectable.activate).call(nf.ContextMenu.activate);
 
         // only support dragging, connection, and drag and drop if appropriate
         if (nf.Common.isDFM()) {
-            processGroup
-                    // Using mouseover/out to workaround chrome issue #122746
-                    .on('mouseover.drop', function (d) {
-                        // get the target and ensure its not already been marked for drop
-                        var target = d3.select(this);
-                        if (!target.classed('drop')) {
-                            var targetData = target.datum();
-                            
-                            // see if there is a selection being dragged
-                            var drag = d3.select('rect.drag-selection');
-                            if (!drag.empty()) {
-                                // filter the current selection by this group
-                                var selection = nf.CanvasUtils.getSelection().filter(function(d) {
-                                    return targetData.component.id === d.component.id;
-                                });
-                                
-                                // ensure this group isn't in the selection
-                                if (selection.empty()) {
-                                    // mark that we are hovering over a drop area if appropriate 
-                                    target.classed('drop', function () {
-                                        // get the current selection and ensure its disconnected
-                                        return nf.CanvasUtils.isDisconnected(nf.CanvasUtils.getSelection());
-                                    });
-                                }
-                            }
+            processGroup.filter(function (d) {
+                return d.accessPolicy.canWrite && d.accessPolicy.canRead;
+            })
+            .on('mouseover.drop', function (d) {
+                // Using mouseover/out to workaround chrome issue #122746
+
+                // get the target and ensure its not already been marked for drop
+                var target = d3.select(this);
+                if (!target.classed('drop')) {
+                    var targetData = target.datum();
+
+                    // see if there is a selection being dragged
+                    var drag = d3.select('rect.drag-selection');
+                    if (!drag.empty()) {
+                        // filter the current selection by this group
+                        var selection = nf.CanvasUtils.getSelection().filter(function(d) {
+                            return targetData.id === d.id;
+                        });
+
+                        // ensure this group isn't in the selection
+                        if (selection.empty()) {
+                            // mark that we are hovering over a drop area if appropriate
+                            target.classed('drop', function () {
+                                // get the current selection and ensure its disconnected
+                                return nf.CanvasUtils.isDisconnected(nf.CanvasUtils.getSelection());
+                            });
                         }
-                    })
-                    .on('mouseout.drop', function (d) {
-                        // mark that we are no longer hovering over a drop area unconditionally
-                        d3.select(this).classed('drop', false);
-                    })
-                    .call(nf.Draggable.activate)
-                    .call(nf.Connectable.activate);
+                    }
+                }
+            })
+            .on('mouseout.drop', function (d) {
+                // mark that we are no longer hovering over a drop area unconditionally
+                d3.select(this).classed('drop', false);
+            })
+            .call(nf.Draggable.activate)
+            .call(nf.Connectable.activate);
         }
 
         // call update to trigger some rendering
@@ -210,7 +211,7 @@ nf.ProcessGroup = (function () {
             return;
         }
 
-        updated.each(function () {
+        updated.each(function (processGroupData) {
             var processGroup = d3.select(this);
             var details = processGroup.select('g.process-group-details');
 
@@ -261,150 +262,152 @@ nf.ProcessGroup = (function () {
                     // contents
                     // --------
 
-                    // input ports icon
-                    details.append('image')
-                            .call(nf.CanvasUtils.disableImageHref)
-                            .attr({
-                                'xlink:href': 'images/iconInputPortSmall.png',
-                                'width': 16,
-                                'height': 16,
-                                'x': 10,
-                                'y': 25
-                            });
+                    if (processGroupData.accessPolicy.canRead) {
+                        // input ports icon
+                        details.append('image')
+                                .call(nf.CanvasUtils.disableImageHref)
+                                .attr({
+                                    'xlink:href': 'images/iconInputPortSmall.png',
+                                    'width': 16,
+                                    'height': 16,
+                                    'x': 10,
+                                    'y': 25
+                                });
 
-                    // input ports count
-                    details.append('text')
-                            .attr({
-                                'x': 29,
-                                'y': 37,
-                                'class': 'process-group-input-port-count process-group-contents-count'
-                            });
+                        // input ports count
+                        details.append('text')
+                                .attr({
+                                    'x': 29,
+                                    'y': 37,
+                                    'class': 'process-group-input-port-count process-group-contents-count'
+                                });
 
-                    // output ports icon
-                    details.append('image')
-                            .call(nf.CanvasUtils.disableImageHref)
-                            .attr({
-                                'xlink:href': 'images/iconOutputPortSmall.png',
-                                'width': 16,
-                                'height': 16,
-                                'y': 25,
-                                'class': 'process-group-output-port'
-                            });
+                        // output ports icon
+                        details.append('image')
+                                .call(nf.CanvasUtils.disableImageHref)
+                                .attr({
+                                    'xlink:href': 'images/iconOutputPortSmall.png',
+                                    'width': 16,
+                                    'height': 16,
+                                    'y': 25,
+                                    'class': 'process-group-output-port'
+                                });
 
-                    // output ports count
-                    details.append('text')
-                            .attr({
-                                'y': 37,
-                                'class': 'process-group-output-port-count process-group-contents-count'
-                            });
+                        // output ports count
+                        details.append('text')
+                                .attr({
+                                    'y': 37,
+                                    'class': 'process-group-output-port-count process-group-contents-count'
+                                });
 
-                    // transmitting icon
-                    details.append('image')
-                            .call(nf.CanvasUtils.disableImageHref)
-                            .attr({
-                                'xlink:href': 'images/iconTransmissionActive.png',
-                                'width': 16,
-                                'height': 16,
-                                'y': 25,
-                                'class': 'process-group-transmitting'
-                            });
+                        // transmitting icon
+                        details.append('image')
+                                .call(nf.CanvasUtils.disableImageHref)
+                                .attr({
+                                    'xlink:href': 'images/iconTransmissionActive.png',
+                                    'width': 16,
+                                    'height': 16,
+                                    'y': 25,
+                                    'class': 'process-group-transmitting'
+                                });
 
-                    // transmitting count
-                    details.append('text')
-                            .attr({
-                                'y': 37,
-                                'class': 'process-group-transmitting-count process-group-contents-count'
-                            });
+                        // transmitting count
+                        details.append('text')
+                                .attr({
+                                    'y': 37,
+                                    'class': 'process-group-transmitting-count process-group-contents-count'
+                                });
 
-                    // not transmitting icon
-                    details.append('image')
-                            .call(nf.CanvasUtils.disableImageHref)
-                            .attr({
-                                'xlink:href': 'images/iconTransmissionInactive.png',
-                                'width': 16,
-                                'height': 16,
-                                'y': 25,
-                                'class': 'process-group-not-transmitting'
-                            });
+                        // not transmitting icon
+                        details.append('image')
+                                .call(nf.CanvasUtils.disableImageHref)
+                                .attr({
+                                    'xlink:href': 'images/iconTransmissionInactive.png',
+                                    'width': 16,
+                                    'height': 16,
+                                    'y': 25,
+                                    'class': 'process-group-not-transmitting'
+                                });
 
-                    // not transmitting count
-                    details.append('text')
-                            .attr({
-                                'y': 37,
-                                'class': 'process-group-not-transmitting-count process-group-contents-count'
-                            });
+                        // not transmitting count
+                        details.append('text')
+                                .attr({
+                                    'y': 37,
+                                    'class': 'process-group-not-transmitting-count process-group-contents-count'
+                                });
 
-                    // running icon
-                    details.append('image')
-                            .call(nf.CanvasUtils.disableImageHref)
-                            .attr({
-                                'xlink:href': 'images/iconRun.png',
-                                'width': 16,
-                                'height': 16,
-                                'y': 25,
-                                'class': 'process-group-running'
-                            });
+                        // running icon
+                        details.append('image')
+                                .call(nf.CanvasUtils.disableImageHref)
+                                .attr({
+                                    'xlink:href': 'images/iconRun.png',
+                                    'width': 16,
+                                    'height': 16,
+                                    'y': 25,
+                                    'class': 'process-group-running'
+                                });
 
-                    // running count
-                    details.append('text')
-                            .attr({
-                                'y': 37,
-                                'class': 'process-group-running-count process-group-contents-count'
-                            });
+                        // running count
+                        details.append('text')
+                                .attr({
+                                    'y': 37,
+                                    'class': 'process-group-running-count process-group-contents-count'
+                                });
 
-                    // stopped icon
-                    details.append('image')
-                            .call(nf.CanvasUtils.disableImageHref)
-                            .attr({
-                                'xlink:href': 'images/iconStop.png',
-                                'width': 16,
-                                'height': 16,
-                                'y': 25,
-                                'class': 'process-group-stopped'
-                            });
+                        // stopped icon
+                        details.append('image')
+                                .call(nf.CanvasUtils.disableImageHref)
+                                .attr({
+                                    'xlink:href': 'images/iconStop.png',
+                                    'width': 16,
+                                    'height': 16,
+                                    'y': 25,
+                                    'class': 'process-group-stopped'
+                                });
 
-                    // stopped count
-                    details.append('text')
-                            .attr({
-                                'y': 37,
-                                'class': 'process-group-stopped-count process-group-contents-count'
-                            });
+                        // stopped count
+                        details.append('text')
+                                .attr({
+                                    'y': 37,
+                                    'class': 'process-group-stopped-count process-group-contents-count'
+                                });
 
-                    // invalid icon
-                    details.append('image')
-                            .call(nf.CanvasUtils.disableImageHref)
-                            .attr({
-                                'xlink:href': 'images/iconAlert.png',
-                                'width': 16,
-                                'height': 16,
-                                'y': 25,
-                                'class': 'process-group-invalid'
-                            });
+                        // invalid icon
+                        details.append('image')
+                                .call(nf.CanvasUtils.disableImageHref)
+                                .attr({
+                                    'xlink:href': 'images/iconAlert.png',
+                                    'width': 16,
+                                    'height': 16,
+                                    'y': 25,
+                                    'class': 'process-group-invalid'
+                                });
 
-                    // invalid count
-                    details.append('text')
-                            .attr({
-                                'y': 37,
-                                'class': 'process-group-invalid-count process-group-contents-count'
-                            });
+                        // invalid count
+                        details.append('text')
+                                .attr({
+                                    'y': 37,
+                                    'class': 'process-group-invalid-count process-group-contents-count'
+                                });
 
-                    // disabled icon
-                    details.append('image')
-                            .call(nf.CanvasUtils.disableImageHref)
-                            .attr({
-                                'xlink:href': 'images/iconDisable.png',
-                                'width': 16,
-                                'height': 16,
-                                'y': 25,
-                                'class': 'process-group-disabled'
-                            });
+                        // disabled icon
+                        details.append('image')
+                                .call(nf.CanvasUtils.disableImageHref)
+                                .attr({
+                                    'xlink:href': 'images/iconDisable.png',
+                                    'width': 16,
+                                    'height': 16,
+                                    'y': 25,
+                                    'class': 'process-group-disabled'
+                                });
 
-                    // disabled count
-                    details.append('text')
-                            .attr({
-                                'y': 37,
-                                'class': 'process-group-disabled-count process-group-contents-count'
-                            });
+                        // disabled count
+                        details.append('text')
+                                .attr({
+                                    'y': 37,
+                                    'class': 'process-group-disabled-count process-group-contents-count'
+                                });
+                    }
 
                     // -----
                     // stats
@@ -600,157 +603,159 @@ nf.ProcessGroup = (function () {
                             });
                 }
 
-                // update the input ports
-                var inputPortCount = details.select('text.process-group-input-port-count')
-                        .text(function (d) {
-                            return d.component.inputPortCount;
-                        });
+                if (processGroupData.accessPolicy.canRead) {
+                    // update the input ports
+                    var inputPortCount = details.select('text.process-group-input-port-count')
+                            .text(function (d) {
+                                return d.component.inputPortCount;
+                            });
 
-                // update the output ports
-                var outputPort = details.select('image.process-group-output-port')
-                        .attr('x', function () {
-                            var inputPortCountX = parseInt(inputPortCount.attr('x'), 10);
-                            return inputPortCountX + inputPortCount.node().getComputedTextLength() + CONTENTS_SPACER;
-                        });
-                details.select('text.process-group-output-port-count')
-                        .attr('x', function () {
-                            var outputPortImageX = parseInt(outputPort.attr('x'), 10);
-                            var outputPortImageWidth = parseInt(outputPort.attr('width'), 10);
-                            return outputPortImageX + outputPortImageWidth + CONTENTS_SPACER;
-                        })
-                        .text(function (d) {
-                            return d.component.outputPortCount;
-                        });
+                    // update the output ports
+                    var outputPort = details.select('image.process-group-output-port')
+                            .attr('x', function () {
+                                var inputPortCountX = parseInt(inputPortCount.attr('x'), 10);
+                                return inputPortCountX + inputPortCount.node().getComputedTextLength() + CONTENTS_SPACER;
+                            });
+                    details.select('text.process-group-output-port-count')
+                            .attr('x', function () {
+                                var outputPortImageX = parseInt(outputPort.attr('x'), 10);
+                                var outputPortImageWidth = parseInt(outputPort.attr('width'), 10);
+                                return outputPortImageX + outputPortImageWidth + CONTENTS_SPACER;
+                            })
+                            .text(function (d) {
+                                return d.component.outputPortCount;
+                            });
 
-                // get the container to help right align
-                var container = details.select('rect.process-group-contents-container');
-
-                // update disabled
-                var disabledCount = details.select('text.process-group-disabled-count')
-                        .text(function (d) {
-                            return d.component.disabledCount;
-                        })
-                        .attr('x', function () {
-                            var containerX = parseInt(container.attr('x'), 10);
-                            var containerWidth = parseInt(container.attr('width'), 10);
-                            return containerX + containerWidth - this.getComputedTextLength() - CONTENTS_SPACER;
-                        });
-                var disabled = details.select('image.process-group-disabled')
-                        .attr('x', function () {
-                            var disabledCountX = parseInt(disabledCount.attr('x'), 10);
-                            var width = parseInt(d3.select(this).attr('width'), 10);
-                            return disabledCountX - width - CONTENTS_SPACER;
-                        });
+                    // get the container to help right align
+                    var container = details.select('rect.process-group-contents-container');
 
-                // update invalid
-                var invalidCount = details.select('text.process-group-invalid-count')
-                        .text(function (d) {
-                            return d.component.invalidCount;
-                        })
-                        .attr('x', function () {
-                            var disabledX = parseInt(disabled.attr('x'), 10);
-                            return disabledX - this.getComputedTextLength() - CONTENTS_SPACER;
-                        });
-                var invalid = details.select('image.process-group-invalid')
-                        .attr('x', function () {
-                            var invalidCountX = parseInt(invalidCount.attr('x'), 10);
-                            var width = parseInt(d3.select(this).attr('width'), 10);
-                            return invalidCountX - width - CONTENTS_SPACER;
-                        });
+                    // update disabled
+                    var disabledCount = details.select('text.process-group-disabled-count')
+                            .text(function (d) {
+                                return d.component.disabledCount;
+                            })
+                            .attr('x', function () {
+                                var containerX = parseInt(container.attr('x'), 10);
+                                var containerWidth = parseInt(container.attr('width'), 10);
+                                return containerX + containerWidth - this.getComputedTextLength() - CONTENTS_SPACER;
+                            });
+                    var disabled = details.select('image.process-group-disabled')
+                            .attr('x', function () {
+                                var disabledCountX = parseInt(disabledCount.attr('x'), 10);
+                                var width = parseInt(d3.select(this).attr('width'), 10);
+                                return disabledCountX - width - CONTENTS_SPACER;
+                            });
 
-                // update stopped
-                var stoppedCount = details.select('text.process-group-stopped-count')
-                        .text(function (d) {
-                            return d.component.stoppedCount;
-                        })
-                        .attr('x', function () {
-                            var invalidX = parseInt(invalid.attr('x'), 10);
-                            return invalidX - this.getComputedTextLength() - CONTENTS_SPACER;
-                        });
-                var stopped = details.select('image.process-group-stopped')
-                        .attr('x', function () {
-                            var stoppedCountX = parseInt(stoppedCount.attr('x'), 10);
-                            var width = parseInt(d3.select(this).attr('width'), 10);
-                            return stoppedCountX - width - CONTENTS_SPACER;
-                        });
+                    // update invalid
+                    var invalidCount = details.select('text.process-group-invalid-count')
+                            .text(function (d) {
+                                return d.component.invalidCount;
+                            })
+                            .attr('x', function () {
+                                var disabledX = parseInt(disabled.attr('x'), 10);
+                                return disabledX - this.getComputedTextLength() - CONTENTS_SPACER;
+                            });
+                    var invalid = details.select('image.process-group-invalid')
+                            .attr('x', function () {
+                                var invalidCountX = parseInt(invalidCount.attr('x'), 10);
+                                var width = parseInt(d3.select(this).attr('width'), 10);
+                                return invalidCountX - width - CONTENTS_SPACER;
+                            });
 
-                // update running
-                var runningCount = details.select('text.process-group-running-count')
-                        .text(function (d) {
-                            return d.component.runningCount;
-                        })
-                        .attr('x', function () {
-                            var stoppedX = parseInt(stopped.attr('x'), 10);
-                            return stoppedX - this.getComputedTextLength() - CONTENTS_SPACER;
-                        });
-                var running = details.select('image.process-group-running')
-                        .attr('x', function () {
-                            var runningCountX = parseInt(runningCount.attr('x'), 10);
-                            var width = parseInt(d3.select(this).attr('width'), 10);
-                            return runningCountX - width - CONTENTS_SPACER;
-                        });
+                    // update stopped
+                    var stoppedCount = details.select('text.process-group-stopped-count')
+                            .text(function (d) {
+                                return d.component.stoppedCount;
+                            })
+                            .attr('x', function () {
+                                var invalidX = parseInt(invalid.attr('x'), 10);
+                                return invalidX - this.getComputedTextLength() - CONTENTS_SPACER;
+                            });
+                    var stopped = details.select('image.process-group-stopped')
+                            .attr('x', function () {
+                                var stoppedCountX = parseInt(stoppedCount.attr('x'), 10);
+                                var width = parseInt(d3.select(this).attr('width'), 10);
+                                return stoppedCountX - width - CONTENTS_SPACER;
+                            });
 
-                // update not transmitting
-                var notTransmittingCount = details.select('text.process-group-not-transmitting-count')
-                        .text(function (d) {
-                            return d.component.inactiveRemotePortCount;
-                        })
-                        .attr('x', function () {
-                            var runningX = parseInt(running.attr('x'), 10);
-                            return runningX - this.getComputedTextLength() - CONTENTS_SPACER;
-                        });
-                var notTransmitting = details.select('image.process-group-not-transmitting')
-                        .attr('x', function () {
-                            var notTransmittingCountX = parseInt(notTransmittingCount.attr('x'), 10);
-                            var width = parseInt(d3.select(this).attr('width'), 10);
-                            return notTransmittingCountX - width - CONTENTS_SPACER;
-                        });
+                    // update running
+                    var runningCount = details.select('text.process-group-running-count')
+                            .text(function (d) {
+                                return d.component.runningCount;
+                            })
+                            .attr('x', function () {
+                                var stoppedX = parseInt(stopped.attr('x'), 10);
+                                return stoppedX - this.getComputedTextLength() - CONTENTS_SPACER;
+                            });
+                    var running = details.select('image.process-group-running')
+                            .attr('x', function () {
+                                var runningCountX = parseInt(runningCount.attr('x'), 10);
+                                var width = parseInt(d3.select(this).attr('width'), 10);
+                                return runningCountX - width - CONTENTS_SPACER;
+                            });
 
-                // update transmitting
-                var transmittingCount = details.select('text.process-group-transmitting-count')
-                        .text(function (d) {
-                            return d.component.activeRemotePortCount;
-                        })
-                        .attr('x', function () {
-                            var notTransmittingX = parseInt(notTransmitting.attr('x'), 10);
-                            return notTransmittingX - this.getComputedTextLength() - CONTENTS_SPACER;
-                        });
-                details.select('image.process-group-transmitting')
-                        .attr('x', function () {
-                            var transmittingCountX = parseInt(transmittingCount.attr('x'), 10);
-                            var width = parseInt(d3.select(this).attr('width'), 10);
-                            return transmittingCountX - width - CONTENTS_SPACER;
-                        });
+                    // update not transmitting
+                    var notTransmittingCount = details.select('text.process-group-not-transmitting-count')
+                            .text(function (d) {
+                                return d.component.inactiveRemotePortCount;
+                            })
+                            .attr('x', function () {
+                                var runningX = parseInt(running.attr('x'), 10);
+                                return runningX - this.getComputedTextLength() - CONTENTS_SPACER;
+                            });
+                    var notTransmitting = details.select('image.process-group-not-transmitting')
+                            .attr('x', function () {
+                                var notTransmittingCountX = parseInt(notTransmittingCount.attr('x'), 10);
+                                var width = parseInt(d3.select(this).attr('width'), 10);
+                                return notTransmittingCountX - width - CONTENTS_SPACER;
+                            });
 
-                // update the process group comments
-                details.select('text.process-group-comments')
-                        .each(function (d) {
-                            var processGroupComments = d3.select(this);
+                    // update transmitting
+                    var transmittingCount = details.select('text.process-group-transmitting-count')
+                            .text(function (d) {
+                                return d.component.activeRemotePortCount;
+                            })
+                            .attr('x', function () {
+                                var notTransmittingX = parseInt(notTransmitting.attr('x'), 10);
+                                return notTransmittingX - this.getComputedTextLength() - CONTENTS_SPACER;
+                            });
+                    details.select('image.process-group-transmitting')
+                            .attr('x', function () {
+                                var transmittingCountX = parseInt(transmittingCount.attr('x'), 10);
+                                var width = parseInt(d3.select(this).attr('width'), 10);
+                                return transmittingCountX - width - CONTENTS_SPACER;
+                            });
 
-                            // reset the process group name to handle any previous state
-                            processGroupComments.text(null).selectAll('tspan, title').remove();
+                    // update the process group comments
+                    details.select('text.process-group-comments')
+                            .each(function (d) {
+                                var processGroupComments = d3.select(this);
 
-                            // apply ellipsis to the port name as necessary
-                            nf.CanvasUtils.multilineEllipsis(processGroupComments, 2, getProcessGroupComments(d));
-                        }).classed('unset', function (d) {
-                    return nf.Common.isBlank(d.component.comments);
-                }).append('title').text(function (d) {
-                    return getProcessGroupComments(d);
-                });
+                                // reset the process group name to handle any previous state
+                                processGroupComments.text(null).selectAll('tspan, title').remove();
 
-                // update the process group name
-                processGroup.select('text.process-group-name')
-                        .each(function (d) {
-                            var processGroupName = d3.select(this);
+                                // apply ellipsis to the port name as necessary
+                                nf.CanvasUtils.multilineEllipsis(processGroupComments, 2, getProcessGroupComments(d));
+                            }).classed('unset', function (d) {
+                        return nf.Common.isBlank(d.component.comments);
+                    }).append('title').text(function (d) {
+                        return getProcessGroupComments(d);
+                    });
 
-                            // reset the process group name to handle any previous state
-                            processGroupName.text(null).selectAll('title').remove();
+                    // update the process group name
+                    processGroup.select('text.process-group-name')
+                            .each(function (d) {
+                                var processGroupName = d3.select(this);
 
-                            // apply ellipsis to the process group name as necessary
-                            nf.CanvasUtils.ellipsis(processGroupName, d.component.name);
-                        }).append('title').text(function (d) {
-                    return d.component.name;
-                });
+                                // reset the process group name to handle any previous state
+                                processGroupName.text(null).selectAll('title').remove();
+
+                                // apply ellipsis to the process group name as necessary
+                                nf.CanvasUtils.ellipsis(processGroupName, d.component.name);
+                            }).append('title').text(function (d) {
+                        return d.component.name;
+                    });
+                }
 
                 // hide the preview
                 processGroup.select('image.process-group-preview').style('display', 'none');
@@ -758,16 +763,18 @@ nf.ProcessGroup = (function () {
                 // populate the stats
                 processGroup.call(updateProcessGroupStatus);
             } else {
-                // update the process group name
-                processGroup.select('text.process-group-name')
-                        .text(function (d) {
-                            var name = d.component.name;
-                            if (name.length > PREVIEW_NAME_LENGTH) {
-                                return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
-                            } else {
-                                return name;
-                            }
-                        });
+                if (processGroupData.accessPolicy.canRead) {
+                    // update the process group name
+                    processGroup.select('text.process-group-name')
+                            .text(function (d) {
+                                var name = d.component.name;
+                                if (name.length > PREVIEW_NAME_LENGTH) {
+                                    return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
+                                } else {
+                                    return name;
+                                }
+                            });
+                }
 
                 // show the preview
                 processGroup.select('image.process-group-preview').style('display', 'block');
@@ -876,7 +883,7 @@ nf.ProcessGroup = (function () {
     var removeTooltips = function (removed) {
         removed.each(function (d) {
             // remove any associated tooltips
-            $('#bulletin-tip-' + d.component.id).remove();
+            $('#bulletin-tip-' + d.id).remove();
         });
     };
 
@@ -898,28 +905,27 @@ nf.ProcessGroup = (function () {
         /**
          * Populates the graph with the specified process groups.
          *
-         * @argument {object | array} processGroups                    The process groups to add
+         * @argument {object | array} processGroupEntities                    The process groups to add
          * @argument {boolean} selectAll                Whether or not to select the new contents
          */
-        add: function (processGroups, selectAll) {
+        add: function (processGroupEntities, selectAll) {
             selectAll = nf.Common.isDefinedAndNotNull(selectAll) ? selectAll : false;
 
-            var add = function (processGroup) {
+            var add = function (processGroupEntity) {
                 // add the process group
-                processGroupMap.set(processGroup.id, {
+                processGroupMap.set(processGroupEntity.id, $.extend({
                     type: 'ProcessGroup',
-                    component: processGroup,
                     dimensions: dimensions
-                });
+                }, processGroupEntity));
             };
 
             // determine how to handle the specified process groups
-            if ($.isArray(processGroups)) {
-                $.each(processGroups, function (_, processGroup) {
-                    add(processGroup);
+            if ($.isArray(processGroupEntities)) {
+                $.each(processGroupEntities, function (_, processGroupEntity) {
+                    add(processGroupEntity);
                 });
             } else {
-                add(processGroups);
+                add(processGroupEntities);
             }
 
             // apply the selection and handle all new process group
@@ -974,7 +980,7 @@ nf.ProcessGroup = (function () {
                     url: processGroup.uri,
                     dataType: 'json'
                 }).done(function (response) {
-                    nf.ProcessGroup.set(response.processGroup);
+                    nf.ProcessGroup.set(response);
                 });
             }
         },
@@ -993,27 +999,27 @@ nf.ProcessGroup = (function () {
          * will set each process group. If it is not an array, it will
          * attempt to set the specified process group.
          *
-         * @param {object | array} processGroups
+         * @param {object | array} processGroupEntities
          */
-        set: function (processGroups) {
-            var set = function (processGroup) {
-                if (processGroupMap.has(processGroup.id)) {
+        set: function (processGroupEntities) {
+            var set = function (processGroupEntity) {
+                if (processGroupMap.has(processGroupEntity.id)) {
                     // update the current entry
-                    var processGroupEntry = processGroupMap.get(processGroup.id);
-                    processGroupEntry.component = processGroup;
-
+                    var processGroupEntry = processGroupMap.get(processGroupEntity.id);
+                    $.extend(processGroupEntry, processGroupEntity);
+                    
                     // update the process group in the UI
-                    d3.select('#id-' + processGroup.id).call(updateProcessGroups);
+                    d3.select('#id-' + processGroupEntry.id).call(updateProcessGroups);
                 }
             };
 
             // determine how to handle the specified process group
-            if ($.isArray(processGroups)) {
-                $.each(processGroups, function (_, processGroup) {
-                    set(processGroup);
+            if ($.isArray(processGroupEntities)) {
+                $.each(processGroupEntities, function (_, processGroupEntity) {
+                    set(processGroupEntity);
                 });
             } else {
-                set(processGroups);
+                set(processGroupEntities);
             }
         },
         
@@ -1040,13 +1046,6 @@ nf.ProcessGroup = (function () {
         },
 
         /**
-         * Returns the entity key when marshalling an entity of this type.
-         */
-        getEntityKey: function (d) {
-            return 'processGroup';
-        },
-        
-        /**
          * Removes the specified process group.
          *
          * @param {string} processGroups      The process group id(s)

http://git-wip-us.apache.org/repos/asf/nifi/blob/ff98d823/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
----------------------------------------------------------------------
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 1271480..b6b7f34 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
@@ -303,7 +303,7 @@ nf.ProcessorConfiguration = (function () {
         // create the processor entity
         var processorEntity = {};
         processorEntity['revision'] = nf.Client.getRevision();
-        processorEntity['processor'] = processorDto;
+        processorEntity['component'] = processorDto;
 
         // return the marshaled details
         return processorEntity;
@@ -340,7 +340,7 @@ nf.ProcessorConfiguration = (function () {
      */
     var validateDetails = function (details) {
         var errors = [];
-        var processor = details['processor'];
+        var processor = details['component'];
         var config = processor['config'];
 
         // ensure numeric fields are specified correctly
@@ -377,8 +377,10 @@ nf.ProcessorConfiguration = (function () {
     var reloadProcessorConnections = function (processor) {
         var connections = nf.Connection.getComponentConnections(processor.id);
         $.each(connections, function (_, connection) {
-            if (connection.source.id === processor.id) {
-                nf.Connection.reload(connection);
+            if (connection.accessPolicy.canRead) {
+                if (connection.sourceId === processor.id) {
+                    nf.Connection.reload(connection);
+                }
             }
         });
     };
@@ -435,7 +437,7 @@ nf.ProcessorConfiguration = (function () {
                 processData: false,
                 contentType: 'application/json'
             }).done(function (response) {
-                if (nf.Common.isDefinedAndNotNull(response.processor)) {
+                if (nf.Common.isDefinedAndNotNull(response.component)) {
                     // update the revision
                     nf.Client.setRevision(response.revision);
                 }
@@ -592,7 +594,7 @@ nf.ProcessorConfiguration = (function () {
                 // once everything is loaded, show the dialog
                 $.when.apply(window, requests).done(function (processorResponse, historyResponse) {
                     // get the updated processor
-                    processor = processorResponse[0].processor;
+                    processor = processorResponse[0].component;
                     
                     // get the processor history
                     var processorHistory = historyResponse[0].componentHistory;
@@ -717,7 +719,7 @@ nf.ProcessorConfiguration = (function () {
                                     // save the processor
                                     saveProcessor(processor).done(function (response) {
                                         // set the new processor state based on the response
-                                        nf.Processor.set(response.processor);
+                                        nf.Processor.set(response);
 
                                         // reload the processor's outgoing connections
                                         reloadProcessorConnections(processor);

http://git-wip-us.apache.org/repos/asf/nifi/blob/ff98d823/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
----------------------------------------------------------------------
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 e46b462..dbe5246 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
@@ -47,9 +47,7 @@ nf.Processor = (function () {
      * Selects the processor elements against the current processor map.
      */
     var select = function () {
-        return processorContainer.selectAll('g.processor').data(processorMap.values(), function (d) {
-            return d.component.id;
-        });
+        return processorContainer.selectAll('g.processor').data(processorMap.values());
     };
 
     // renders the processors
@@ -61,7 +59,7 @@ nf.Processor = (function () {
         var processor = entered.append('g')
                 .attr({
                     'id': function (d) {
-                        return 'id-' + d.component.id;
+                        return 'id-' + d.id;
                     },
                     'class': 'processor component'
                 })
@@ -138,9 +136,9 @@ nf.Processor = (function () {
         processor.call(nf.Selectable.activate).call(nf.ContextMenu.activate);
 
         // only activate dragging and connecting if appropriate
-        if (nf.Common.isDFM()) {
-            processor.call(nf.Draggable.activate).call(nf.Connectable.activate);
-        }
+        processor.filter(function (d) {
+            return d.accessPolicy.canWrite && d.accessPolicy.canRead;
+        }).call(nf.Draggable.activate).call(nf.Connectable.activate);
 
         // call update to trigger some rendering
         processor.call(updateProcessors);
@@ -156,7 +154,7 @@ nf.Processor = (function () {
             return;
         }
 
-        updated.each(function () {
+        updated.each(function (processorData) {
             var processor = d3.select(this);
             var details = processor.select('g.processor-details');
 
@@ -176,28 +174,30 @@ nf.Processor = (function () {
                                 'y': 5
                             });
 
-                    // processor type
-                    details.append('text')
-                            .attr({
-                                'x': 25,
-                                'y': 30,
-                                'width': 246,
-                                'height': 16,
-                                'font-size': '8pt',
-                                'font-weight': 'normal',
-                                'fill': 'black'
-                            })
-                            .each(function (d) {
-                                var processorType = d3.select(this);
-
-                                // reset the processor type to handle any previous state
-                                processorType.text(null).selectAll('title').remove();
-
-                                // apply ellipsis to the processor type as necessary
-                                nf.CanvasUtils.ellipsis(processorType, nf.Common.substringAfterLast(d.component.type, '.'));
-                            }).append('title').text(function (d) {
-                        return nf.Common.substringAfterLast(d.component.type, '.');
-                    });
+                    if (processorData.accessPolicy.canRead) {
+                        // processor type
+                        details.append('text')
+                                .attr({
+                                    'x': 25,
+                                    'y': 30,
+                                    'width': 246,
+                                    'height': 16,
+                                    'font-size': '8pt',
+                                    'font-weight': 'normal',
+                                    'fill': 'black'
+                                })
+                                .each(function (d) {
+                                    var processorType = d3.select(this);
+
+                                    // reset the processor type to handle any previous state
+                                    processorType.text(null).selectAll('title').remove();
+
+                                    // apply ellipsis to the processor type as necessary
+                                    nf.CanvasUtils.ellipsis(processorType, nf.Common.substringAfterLast(d.component.type, '.'));
+                                }).append('title').text(function (d) {
+                            return nf.Common.substringAfterLast(d.component.type, '.');
+                        });
+                    }
 
                     // -----
                     // stats
@@ -412,62 +412,64 @@ nf.Processor = (function () {
                             });
                 }
 
-                // update the run status
-                details.select('image.run-status-icon')
-                        .attr('xlink:href', function (d) {
-                            var img = '';
-                            if (d.component.state === 'DISABLED') {
-                                img = 'images/iconDisable.png';
-                            } else if (!nf.Common.isEmpty(d.component.validationErrors)) {
-                                img = 'images/iconAlert.png';
-                            } else if (d.component.state === 'RUNNING') {
-                                img = 'images/iconRun.png';
-                            } else if (d.component.state === 'STOPPED') {
-                                img = 'images/iconStop.png';
-                            }
-                            return img;
-                        })
-                        .each(function (d) {
-                            // remove the existing tip if necessary
-                            var tip = d3.select('#run-status-tip-' + d.component.id);
-                            if (!tip.empty()) {
-                                tip.remove();
-                            }
-
-                            // if there are validation errors generate a tooltip
-                            if (!nf.Common.isEmpty(d.component.validationErrors)) {
-                                tip = d3.select('#processor-tooltips').append('div')
-                                        .attr('id', function () {
-                                            return 'run-status-tip-' + d.component.id;
-                                        })
-                                        .attr('class', 'tooltip nifi-tooltip')
-                                        .html(function () {
-                                            var list = nf.Common.formatUnorderedList(d.component.validationErrors);
-                                            if (list === null || list.length === 0) {
-                                                return '';
-                                            } else {
-                                                return $('<div></div>').append(list).html();
-                                            }
-                                        });
-
-                                // add the tooltip
-                                nf.CanvasUtils.canvasTooltip(tip, d3.select(this));
-                            }
-                        });
+                if (processorData.accessPolicy.canRead) {
+                    // update the run status
+                    details.select('image.run-status-icon')
+                            .attr('xlink:href', function (d) {
+                                var img = '';
+                                if (d.component.state === 'DISABLED') {
+                                    img = 'images/iconDisable.png';
+                                } else if (!nf.Common.isEmpty(d.component.validationErrors)) {
+                                    img = 'images/iconAlert.png';
+                                } else if (d.component.state === 'RUNNING') {
+                                    img = 'images/iconRun.png';
+                                } else if (d.component.state === 'STOPPED') {
+                                    img = 'images/iconStop.png';
+                                }
+                                return img;
+                            })
+                            .each(function (d) {
+                                // remove the existing tip if necessary
+                                var tip = d3.select('#run-status-tip-' + d.id);
+                                if (!tip.empty()) {
+                                    tip.remove();
+                                }
+
+                                // if there are validation errors generate a tooltip
+                                if (!nf.Common.isEmpty(d.component.validationErrors)) {
+                                    tip = d3.select('#processor-tooltips').append('div')
+                                            .attr('id', function () {
+                                                return 'run-status-tip-' + d.id;
+                                            })
+                                            .attr('class', 'tooltip nifi-tooltip')
+                                            .html(function () {
+                                                var list = nf.Common.formatUnorderedList(d.component.validationErrors);
+                                                if (list === null || list.length === 0) {
+                                                    return '';
+                                                } else {
+                                                    return $('<div></div>').append(list).html();
+                                                }
+                                            });
+
+                                    // add the tooltip
+                                    nf.CanvasUtils.canvasTooltip(tip, d3.select(this));
+                                }
+                            });
 
-                // update the processor name
-                processor.select('text.processor-name')
-                        .each(function (d) {
-                            var processorName = d3.select(this);
+                    // update the processor name
+                    processor.select('text.processor-name')
+                            .each(function (d) {
+                                var processorName = d3.select(this);
 
-                            // reset the processor name to handle any previous state
-                            processorName.text(null).selectAll('title').remove();
+                                // reset the processor name to handle any previous state
+                                processorName.text(null).selectAll('title').remove();
 
-                            // apply ellipsis to the processor name as necessary
-                            nf.CanvasUtils.ellipsis(processorName, d.component.name);
-                        }).append('title').text(function (d) {
-                    return d.component.name;
-                });
+                                // apply ellipsis to the processor name as necessary
+                                nf.CanvasUtils.ellipsis(processorName, d.component.name);
+                            }).append('title').text(function (d) {
+                        return d.component.name;
+                    });
+                }
 
                 // hide the preview
                 processor.select('image.processor-stats-preview').style('display', 'none');
@@ -475,16 +477,18 @@ nf.Processor = (function () {
                 // populate the stats
                 processor.call(updateProcessorStatus);
             } else {
-                // update the processor name
-                processor.select('text.processor-name')
-                        .text(function (d) {
-                            var name = d.component.name;
-                            if (name.length > PREVIEW_NAME_LENGTH) {
-                                return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
-                            } else {
-                                return name;
-                            }
-                        });
+                if (processorData.accessPolicy.canRead) {
+                    // update the processor name
+                    processor.select('text.processor-name')
+                            .text(function (d) {
+                                var name = d.component.name;
+                                if (name.length > PREVIEW_NAME_LENGTH) {
+                                    return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
+                                } else {
+                                    return name;
+                                }
+                            });
+                }
 
                 // show the preview
                 processor.select('image.processor-stats-preview').style('display', 'block');
@@ -509,9 +513,11 @@ nf.Processor = (function () {
 
         // determine all unique colors
         processorMap.forEach(function (id, d) {
-            var color = d.component.style['background-color'];
-            if (nf.Common.isDefinedAndNotNull(color)) {
-                colors.add(nf.Common.substringAfterLast(color, '#'));
+            if (d.accessPolicy.canRead) {
+                var color = d.component.style['background-color'];
+                if (nf.Common.isDefinedAndNotNull(color)) {
+                    colors.add(nf.Common.substringAfterLast(color, '#'));
+                }
             }
         });
         nf.Canvas.defineProcessorColors(colors.values());
@@ -521,9 +527,11 @@ nf.Processor = (function () {
                 .attr('stroke', function (d) {
                     var color = nf.Processor.defaultColor();
 
-                    // use the specified color if appropriate
-                    if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) {
-                        color = d.component.style['background-color'];
+                    if (d.accessPolicy.canRead) {
+                        // use the specified color if appropriate
+                        if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) {
+                            color = d.component.style['background-color'];
+                        }
                     }
 
                     return color;
@@ -533,9 +541,11 @@ nf.Processor = (function () {
                 .attr('fill', function (d) {
                     var color = nf.Processor.defaultColor();
 
-                    // use the specified color if appropriate
-                    if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) {
-                        color = d.component.style['background-color'];
+                    if (d.accessPolicy.canRead) {
+                        // use the specified color if appropriate
+                        if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) {
+                            color = d.component.style['background-color'];
+                        }
                     }
 
                     // get just the color code part
@@ -635,8 +645,8 @@ nf.Processor = (function () {
     var removeTooltips = function (removed) {
         removed.each(function (d) {
             // remove any associated tooltips
-            $('#run-status-tip-' + d.component.id).remove();
-            $('#bulletin-tip-' + d.component.id).remove();
+            $('#run-status-tip-' + d.id).remove();
+            $('#bulletin-tip-' + d.id).remove();
         });
     };
 
@@ -658,28 +668,27 @@ nf.Processor = (function () {
         /**
          * Populates the graph with the specified processors.
          * 
-         * @argument {object | array} processors                The processors to add
+         * @argument {object | array} processorEntities                The processors to add
          * @argument {boolean} selectAll                Whether or not to select the new contents
          */
-        add: function (processors, selectAll) {
+        add: function (processorNodeEntities, selectAll) {
             selectAll = nf.Common.isDefinedAndNotNull(selectAll) ? selectAll : false;
 
-            var add = function (processor) {
+            var add = function (processorEntity) {
                 // add the processor
-                processorMap.set(processor.id, {
+                processorMap.set(processorEntity.id, $.extend({
                     type: 'Processor',
-                    component: processor,
                     dimensions: dimensions
-                });
+                }, processorEntity));
             };
 
             // determine how to handle the specified processor
-            if ($.isArray(processors)) {
-                $.each(processors, function (_, processor) {
-                    add(processor);
+            if ($.isArray(processorNodeEntities)) {
+                $.each(processorNodeEntities, function (_, processorEntity) {
+                    add(processorEntity);
                 });
             } else {
-                add(processors);
+                add(processorNodeEntities);
             }
 
             // apply the selection and handle all new processors
@@ -743,7 +752,7 @@ nf.Processor = (function () {
                     url: processor.uri,
                     dataType: 'json'
                 }).done(function (response) {
-                    nf.Processor.set(response.processor);
+                    nf.Processor.set(response);
                 });
             }
         },
@@ -753,27 +762,27 @@ nf.Processor = (function () {
          * will set each processor. If it is not an array, it will 
          * attempt to set the specified processor.
          * 
-         * @param {object | array} processors
+         * @param {object | array} processorEntities
          */
-        set: function (processors) {
-            var set = function (processor) {
-                if (processorMap.has(processor.id)) {
+        set: function (processorEntities) {
+            var set = function (processorEntity) {
+                if (processorMap.has(processorEntity.id)) {
                     // update the current entry
-                    var processorEntry = processorMap.get(processor.id);
-                    processorEntry.component = processor;
-
+                    var processorEntry = processorMap.get(processorEntity.id);
+                    $.extend(processorEntry, processorEntity);
+                    
                     // update the processor in the UI
-                    d3.select('#id-' + processor.id).call(updateProcessors);
+                    d3.select('#id-' + processorEntry.id).call(updateProcessors);
                 }
             };
 
             // determine how to handle the specified processor
-            if ($.isArray(processors)) {
-                $.each(processors, function (_, processor) {
-                    set(processor);
+            if ($.isArray(processorEntities)) {
+                $.each(processorEntities, function (_, processorEntity) {
+                    set(processorEntity);
                 });
             } else {
-                set(processors);
+                set(processorEntities);
             }
         },
         
@@ -825,13 +834,6 @@ nf.Processor = (function () {
         },
 
         /**
-         * Returns the entity key when marshalling an entity of this type.
-         */
-        getEntityKey: function (d) {
-            return 'processor';
-        },
-        
-        /**
          * Returns the default color that should be used when drawing a processor.
          */
         defaultColor: function () {

http://git-wip-us.apache.org/repos/asf/nifi/blob/ff98d823/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
index 5f9de0c..6a8277b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
@@ -380,7 +380,7 @@ nf.QueueListing = (function () {
             // issue the request to list the flow files
             $.ajax({
                 type: 'POST',
-                url: '../nifi-api/flowfile-queues/' + connection.component.id + '/listing-requests',
+                url: '../nifi-api/flowfile-queues/' + connection.id + '/listing-requests',
                 dataType: 'json',
                 contentType: 'application/json'
             }).done(function(response) {

http://git-wip-us.apache.org/repos/asf/nifi/blob/ff98d823/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
----------------------------------------------------------------------
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 738b5b0..f539b66 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
@@ -32,8 +32,8 @@ nf.RemoteProcessGroupConfiguration = (function () {
 
                                 // create the remote process group details
                                 var remoteProcessGroupEntity = {
-                                    revision: nf.Client.getRevision(),
-                                    remoteProcessGroup: {
+                                    'revision': nf.Client.getRevision(),
+                                    'component': {
                                         id: remoteProcessGroupId,
                                         communicationsTimeout: $('#remote-process-group-timeout').val(),
                                         yieldDuration: $('#remote-process-group-yield-duration').val()
@@ -52,7 +52,7 @@ nf.RemoteProcessGroupConfiguration = (function () {
                                     nf.Client.setRevision(response.revision);
                                     
                                     // refresh the remote process group component
-                                    nf.RemoteProcessGroup.set(response.remoteProcessGroup);
+                                    nf.RemoteProcessGroup.set(response);
 
                                     // close the details panel
                                     $('#remote-process-group-configuration').modal('hide');
@@ -113,7 +113,7 @@ nf.RemoteProcessGroupConfiguration = (function () {
                 var selectionData = selection.datum();
 
                 // populate the port settings
-                $('#remote-process-group-id').text(selectionData.component.id);
+                $('#remote-process-group-id').text(selectionData.id);
                 $('#remote-process-group-name').text(selectionData.component.name);
                 $('#remote-process-group-url').text(selectionData.component.targetUri);
 

http://git-wip-us.apache.org/repos/asf/nifi/blob/ff98d823/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
index b74628a..8ec7c89 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
@@ -58,7 +58,7 @@ nf.RemoteProcessGroupDetails = (function () {
                 var selectionData = selection.datum();
 
                 // populate the port settings
-                nf.Common.populateField('read-only-remote-process-group-id', selectionData.component.id);
+                nf.Common.populateField('read-only-remote-process-group-id', selectionData.id);
                 nf.Common.populateField('read-only-remote-process-group-name', selectionData.component.name);
                 nf.Common.populateField('read-only-remote-process-group-url', selectionData.component.targetUri);
                 nf.Common.populateField('read-only-remote-process-group-timeout', selectionData.component.communicationsTimeout);

http://git-wip-us.apache.org/repos/asf/nifi/blob/ff98d823/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js
index ef51f46..4a0789e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js
@@ -40,8 +40,8 @@ nf.RemoteProcessGroupPorts = (function () {
 
                                 // create the remote process group details
                                 var remoteProcessGroupPortEntity = {
-                                    revision: nf.Client.getRevision(),
-                                    remoteProcessGroupPort: {
+                                    'revision': nf.Client.getRevision(),
+                                    'remoteProcessGroupPort': {
                                         id: remotePortId,
                                         useCompression: $('#remote-port-use-compression').hasClass('checkbox-checked'),
                                         concurrentlySchedulableTaskCount: remotePortConcurrentTasks
@@ -259,8 +259,8 @@ nf.RemoteProcessGroupPorts = (function () {
 
                     // create the remote process group details
                     var remoteProcessGroupPortEntity = {
-                        revision: nf.Client.getRevision(),
-                        remoteProcessGroupPort: {
+                        'revision': nf.Client.getRevision(),
+                        'remoteProcessGroupPort': {
                             id: port.id,
                             transmitting: isTransmitting
                         }
@@ -460,7 +460,7 @@ nf.RemoteProcessGroupPorts = (function () {
                     var remoteProcessGroup = response.remoteProcessGroup;
 
                     // set the model locally
-                    nf.RemoteProcessGroup.set(remoteProcessGroup);
+                    nf.RemoteProcessGroup.set(response);
 
                     // populate the port settings
                     $('#remote-process-group-ports-id').text(remoteProcessGroup.id);