From f3e49fefa083667fd9638dc38fa23ffa7d4d8ba0 Mon Sep 17 00:00:00 2001
From: Scott Aslan <jaslan@hortonworks.com>
Date: Mon, 25 Jul 2016 10:35:50 -0400
Subject: [PATCH] [NIFI-2367] Overlapping links repositioned on error/login
 pages [NIFI-2025] update birdseye after dragging/dropping element on the
 canvas [NIFI-2367] update width of content viewer combo [NIFI-2355] update
 table sorting based on auth efforts [NIFI-2027] update EL editors [NIFI-2387]
 update bulletin alert backgroud color to actually change the color of the
 icon not the div background [NIFI-2141] Hide bulletin icon/background on
 processors unless a bulletin exists [NIFI-2400] close any open combos
 contained within a shell when closing the shell [NIFI-2404] remove extra
 scrollbar from #node-events [NIFI-2027] account for min widths of EL editors
 [NIFI-2025] update birdseye after changing color [NIFI-2027] Update EL editor
 checkbox text [NIFI-2027] update checkbox text [NIFI-2355] update table
 sorting [NIFI-2141] Hide bulletin icon/background on processors unless a
 bulletin exists [NIFI-2027] update EL editors [NIFI-2367] Overlapping links
 repositioned on error/login pages This closes #715

---
 .../src/main/webapp/css/main.css              |  1 +
 .../webapp/WEB-INF/partials/message-pane.jsp  | 20 ++---
 .../src/main/webapp/css/cluster.css           |  1 -
 .../nifi-web-ui/src/main/webapp/css/graph.css |  4 -
 .../nifi-web-ui/src/main/webapp/css/main.css  |  7 +-
 .../src/main/webapp/css/message-pane.css      |  2 +
 .../webapp/js/jquery/combo/jquery.combo.js    |  9 +-
 .../webapp/js/jquery/modal/jquery.modal.js    | 13 +--
 .../js/jquery/nfeditor/jquery.nfeditor.css    |  1 +
 .../propertytable/jquery.propertytable.css    | 21 ++---
 .../propertytable/jquery.propertytable.js     | 84 ++++++++++++-------
 .../nf-ng-canvas-operate-controller.js        |  2 +
 .../webapp/js/nf/canvas/nf-canvas-utils.js    |  6 +-
 .../webapp/js/nf/canvas/nf-component-state.js | 17 +++-
 .../js/nf/canvas/nf-controller-services.js    | 63 ++++++++------
 .../main/webapp/js/nf/canvas/nf-draggable.js  |  2 +
 .../js/nf/canvas/nf-policy-management.js      | 17 +++-
 .../main/webapp/js/nf/canvas/nf-settings.js   | 65 ++++++++------
 .../src/main/webapp/js/nf/nf-shell.js         |  8 ++
 .../js/nf/templates/nf-templates-table.js     | 25 ++++--
 .../main/webapp/js/nf/users/nf-users-table.js | 17 +++-
 21 files changed, 241 insertions(+), 144 deletions(-)

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-content-viewer/src/main/webapp/css/main.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-content-viewer/src/main/webapp/css/main.css
index 698e0ff347..20efd89f78 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-content-viewer/src/main/webapp/css/main.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-content-viewer/src/main/webapp/css/main.css
@@ -42,6 +42,7 @@
     position: relative;
     top: 72px;
     left: 150px;
+    width: 148px;
 }
 
 #content-filename {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/message-pane.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/message-pane.jsp
index 0b12baa228..cdba1b5d34 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/message-pane.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/message-pane.jsp
@@ -16,18 +16,18 @@
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
 <div id="message-pane" class="message-pane hidden">
-    <div id="user-links-container">
-        <ul class="links">
-            <li id="user-logout-container" style="display: none;">
-                <span id="user-logout" class="link">log out</span>
-            </li>
-            <li>
-                <span id="user-home" class="link">home</span>
-            </li>
-        </ul>
-    </div>
     <div class="message-pane-message-box">
         <div id="message-title" class="message-pane-title"></div>
+        <div id="user-links-container">
+            <ul class="links">
+                <li id="user-logout-container" style="display: none;">
+                    <span id="user-logout" class="link">log out</span>
+                </li>
+                <li>
+                    <span id="user-home" class="link">home</span>
+                </li>
+            </ul>
+        </div>
         <div id="message-content" class="message-pane-content"></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/cluster.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/cluster.css
index dad9bc4ea2..f515ecfc65 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/cluster.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/cluster.css
@@ -82,5 +82,4 @@ span.sorted {
 
 #node-events {
     max-height: 200px;
-    overflow-y: auto;
 }
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css
index 5aa780afa8..641b02d987 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css
@@ -110,10 +110,6 @@ text.bulletin-icon {
 }
 
 rect.bulletin-background {
-    fill: #728e9b;
-}
-
-rect.bulletin-background.has-bulletins {
     fill: #ba554a;
 }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css
index b0ed15065c..3332072181 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css
@@ -95,10 +95,9 @@ div.context-menu-provenance {
 }
 
 #user-links-container {
-    position: absolute;
-    right: 20px;
-    top: 69px;
+    float: left;
     z-index: 1300;
+    margin-left: 20px;
 }
 
 .ellipsis {
@@ -166,7 +165,7 @@ div.valid {
 }
 
 div.has-bulletins {
-    background: #ba554a;
+    color: #ba554a !important;
 }
 
 /*
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/message-pane.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/message-pane.css
index 6269a3fdb1..3adc09891a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/message-pane.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/message-pane.css
@@ -28,6 +28,7 @@
     font-size: 12px;
     color: #262626;
     line-height: normal;
+    clear: both;
 }
 
 .message-pane-message-box {
@@ -42,4 +43,5 @@
     font-family: 'Roboto Slab';
     font-style: normal;
     font-weight: bold;
+    float: left;
 }
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js
index 6372a16829..b79ea16306 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/combo/jquery.combo.js
@@ -368,7 +368,7 @@
         },
 
         /**
-         * Destroy's the combo.
+         * Destroys the combo.
          */
         destroy: function () {
             return this.each(function () {
@@ -377,6 +377,13 @@
                 // remove the options if open
                 $('div.combo-glass-pane').click();
             });
+        },
+
+        /**
+         * Closes the combo.
+         */
+        close: function () {
+            $('div.combo-glass-pane').click();
         }
     };
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
index 49500bd666..0993c88254 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
@@ -513,18 +513,19 @@
         hide: function () {
             return this.each(function () {
                 var dialog = $(this);
+
+                // invoke the handler
+                var handler = dialog.data('nf-dialog').close;
+                if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
+                    handler.call(dialog);
+                }
+
                 if (dialog.is(':visible')) {
                     // remove the modal glass pane overlay
                     $('body').find("[data-nf-dialog-parent='" + dialog.attr('id') + "']").remove();
 
                     // hide the dialog
                     dialog.hide();
-
-                    // invoke the handler
-                    var handler = dialog.data('nf-dialog').close;
-                    if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
-                        handler.call(dialog);
-                    }
                 }
             });
         }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.css
index b2c9b3a892..3c0a6d931f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/nfeditor/jquery.nfeditor.css
@@ -25,6 +25,7 @@
     background-color: #fff;
     cursor: default;
     line-height: normal;
+    min-width: 210px;
 }
 
 .nfel-editor .CodeMirror-scroll {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
index 023b45be5b..4797192648 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
@@ -74,7 +74,8 @@ div.new-property-button-container {
 */
 
 div.slickgrid-nfel-editor .nfel-editor, div.property-detail .nfel-editor {
-    margin-bottom: 30px;
+    margin-bottom: 5px;
+    margin-top: 10px;
 }
 
 div.edit-property-value {
@@ -89,26 +90,23 @@ textarea.value-field {
     font-size: 11px !important;
     resize: vertical;
     overflow-y: auto;
+
 }
 
 div.string-check-container {
-    float: left;
-    margin-top: 1px;
-    height: 20px;
     line-height: 20px;
 }
 
 div.string-check {
     width: 12px;
     height: 12px;
-    float: left;
     margin-top: 4px;
-    margin-left: 4px;
 }
 
 span.string-check-label {
-    font-size: 9px;
+    font-size: 13px;
     font-weight: normal;
+    color: #262626;
 }
 
 div.value pre {
@@ -116,15 +114,6 @@ div.value pre {
     overflow: hidden;
 }
 
-/*
-    Styles for the property value combo
-*/
-
-div.value-combo {
-    float: left;
-    border: 1px solid #eaeef0;
-}
-
 /*
     Table styles
 */
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
index 042deacc6f..90d62c4678 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
@@ -76,6 +76,7 @@
                 'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
                 'background-color': 'rgb(255, 255, 255)',
                 'overflow': 'hidden',
+                'padding': '10px 20px',
                 'cursor': 'move'
             }).appendTo(container);
 
@@ -83,7 +84,9 @@
             input = $('<textarea hidefocus rows="5"/>').css({
                 'height': '80px',
                 'width': args.position.width + 'px',
-                'margin': '20px 20px'
+                'min-width': '212px',
+                'margin-bottom': '5px',
+                'margin-top': '10px'
             }).tab().on('keydown', scope.handleKeyDown).appendTo(wrapper);
 
             wrapper.draggable({
@@ -93,10 +96,11 @@
 
             // create the button panel
             var stringCheckPanel = $('<div class="string-check-container">');
+            stringCheckPanel.appendTo(wrapper);
 
             // build the custom checkbox
             isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel);
-            $('<span class="string-check-label">&nbsp;Empty</span>').appendTo(stringCheckPanel);
+            $('<span class="string-check-label">&nbsp;Set empty string</span>').appendTo(stringCheckPanel);
 
             var ok = $('<div class="button">Ok</div>').css({
                 'color': '#fff',
@@ -116,7 +120,14 @@
                 }, function () {
                     $(this).css('background', '#E3E8EB');
                 }).on('click', scope.cancel);
-            $('<div></div>').append(stringCheckPanel).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper);
+            $('<div></div>').css({
+                'position': 'relative',
+                'top': '10px',
+                'left': '20px',
+                'width': '212px',
+                'clear': 'both',
+                'float': 'right'
+            }).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper);
 
             // position and focus
             scope.position(args.position);
@@ -154,8 +165,8 @@
 
         this.position = function (position) {
             wrapper.css({
-                'top': position.top - 5,
-                'left': position.left - 5
+                'top': position.top - 27,
+                'left': position.left - 20
             });
         };
 
@@ -299,8 +310,8 @@
             // create the editor
             editor = $('<div></div>').addClass(editorClass).appendTo(wrapper).nfeditor({
                 languageId: languageId,
-                width: args.position.width,
-                minWidth: 175,
+                width: (args.position.width < 212) ? 212 : args.position.width,
+                minWidth: 212,
                 minHeight: 100,
                 resizable: true,
                 sensitive: sensitive,
@@ -314,10 +325,11 @@
 
             // create the button panel
             var stringCheckPanel = $('<div class="string-check-container">');
+            stringCheckPanel.appendTo(wrapper);
 
             // build the custom checkbox
             isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel);
-            $('<span class="string-check-label">&nbsp;Empty</span>').appendTo(stringCheckPanel);
+            $('<span class="string-check-label">&nbsp;Set empty string</span>').appendTo(stringCheckPanel);
 
             var ok = $('<div class="button">Ok</div>').css({
                 'color': '#fff',
@@ -338,11 +350,13 @@
                     $(this).css('background', '#E3E8EB');
                 }).on('click', scope.cancel);
             $('<div></div>').css({
-                'position': 'absolute',
-                'bottom': '0',
-                'left': '0',
-                'right': '0'
-            }).append(stringCheckPanel).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper);
+                'position': 'relative',
+                'top': '10px',
+                'left': '20px',
+                'width': '212px',
+                'clear': 'both',
+                'float': 'right'
+            }).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper);
 
             // position and focus
             scope.position(args.position);
@@ -364,13 +378,13 @@
 
         this.show = function () {
             wrapper.show();
-            editor.nfeditor('setSize', args.position.width, null).nfeditor('refresh');
+            editor.nfeditor('refresh');
         };
 
         this.position = function (position) {
             wrapper.css({
-                'top': position.top - 5,
-                'left': position.left - 5
+                'top': position.top - 22,
+                'left': position.left - 20
             });
         };
 
@@ -433,7 +447,7 @@
 
                 // if the field hasn't been modified return the previous value... this
                 // is important because sensitive properties contain the text 'sensitive
-                // value set' which is cleared when the value is edited. we do not 
+                // value set' which is cleared when the value is edited. we do not
                 // want to actually use this value
                 if (editor.nfeditor('isModified') === false) {
                     return previousValue;
@@ -487,7 +501,7 @@
             wrapper = $('<div class="combo-editor"></div>').css({
                 'z-index': 1999,
                 'position': 'absolute',
-                'padding': '5px',
+                'padding': '10px 20px',
                 'overflow': 'hidden',
                 'border-radius': '2px',
                 'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
@@ -557,12 +571,13 @@
                         promptForNewControllerService(gridContainer, args.grid, args.item, propertyDescriptor.identifiesControllerService, configurationOptions);
                     }
                 }
-            }).width(position.width - 16).appendTo(wrapper);
+            }).css({
+                'margin-top': '10px',
+                'margin-bottom': '10px',
+                'width': ((position.width - 16) < 212) ? 212 : (position.width - 16) + 'px'}).appendTo(wrapper);
 
             // add buttons for handling user input
-            $('<div class="secondary-button">Cancel</div>').css({
-                'margin': '0 0 0 5px',
-                'float': 'left',
+            var cancel = $('<div class="secondary-button">Cancel</div>').css({
                 'color': '#004849',
                 'background': '#E3E8EB'
             }).hover(
@@ -570,10 +585,8 @@
                     $(this).css('background', '#C7D2D7');
                 }, function () {
                     $(this).css('background', '#E3E8EB');
-                }).on('click', scope.cancel).appendTo(wrapper);
-            $('<div class="button">Ok</div>').css({
-                'margin': '0 0 0 5px',
-                'float': 'left',
+                }).on('click', scope.cancel);
+            var ok = $('<div class="button">Ok</div>').css({
                 'color': '#fff',
                 'background': '#728E9B'
             }).hover(
@@ -581,7 +594,16 @@
                     $(this).css('background', '#004849');
                 }, function () {
                     $(this).css('background', '#728E9B');
-                }).on('click', scope.save).appendTo(wrapper);
+                }).on('click', scope.save);
+
+            $('<div></div>').css({
+                'position': 'relative',
+                'top': '10px',
+                'left': '20px',
+                'width': '212px',
+                'clear': 'both',
+                'float': 'right'
+            }).append(ok).append(cancel).appendTo(wrapper);
 
             // position and focus
             scope.position(position);
@@ -605,8 +627,8 @@
 
         this.position = function (position) {
             wrapper.css({
-                'top': position.top - 5,
-                'left': position.left - 5
+                'top': position.top - 24,
+                'left': position.left - 20
             });
         };
 
@@ -1715,11 +1737,11 @@
             return this.each(function () {
                 var propertyTableContainer = $(this);
                 var options = propertyTableContainer.data('options');
-                
+
                 if (nf.Common.isDefinedAndNotNull(options)) {
                     // clear the property table container
                     clear(propertyTableContainer);
-                    
+
                     // clear any existing new property dialogs
                     if (nf.Common.isDefinedAndNotNull(options.dialogContainer)) {
                         $('#new-property-dialog').modal("hide");
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
index d6c2831efc..9ae29009ea 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
@@ -302,6 +302,8 @@ nf.ng.Canvas.OperateCtrl = function () {
                                                         dialogContent: nf.Common.escapeHtml(xhr.responseText)
                                                     });
                                                 }
+                                            }).always(function(){
+                                                nf.Birdseye.refresh();
                                             });
                                         }
                                     });
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
index e2a256b0b5..e5ae99e14f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
@@ -516,10 +516,12 @@ nf.CanvasUtils = (function () {
                         });
 
                 // update the tooltip background
-                selection.select('rect.bulletin-background').classed('has-bulletins', true);
+                selection.select('text.bulletin-icon').style("visibility", "visible");
+                selection.select('rect.bulletin-background').style("visibility", "visible");
             } else {
                 // update the tooltip background
-                selection.select('rect.bulletin-background').classed('has-bulletins', false);
+                selection.select('text.bulletin-icon').style("visibility", "hidden");
+                selection.select('rect.bulletin-background').style("visibility", "hidden");
             }
         },
         
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
index ce659d7849..c92942b505 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
@@ -90,9 +90,20 @@ nf.ComponentState = (function () {
     var sort = function (sortDetails, data) {
         // defines a function for sorting
         var comparer = function (a, b) {
-            var aString = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-            var bString = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-            return aString === bString ? 0 : aString > bString ? 1 : -1;
+            if(a.permissions.canRead && b.permissions.canRead) {
+                var aString = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                var bString = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                return aString === bString ? 0 : aString > bString ? 1 : -1;
+            } else {
+                if (!a.permissions.canRead && !b.permissions.canRead){
+                    return 0;
+                }
+                if(a.permissions.canRead){
+                    return 1;
+                } else {
+                    return -1;
+                }
+            }
         };
 
         // perform the sort
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
index 5dc275e7de..e77ab19931 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
@@ -471,34 +471,45 @@ nf.ControllerServices = (function () {
     var sort = function (sortDetails, data) {
         // defines a function for sorting
         var comparer = function (a, b) {
-            if (sortDetails.columnId === 'moreDetails') {
-                var aBulletins = 0;
-                if (!nf.Common.isEmpty(a.bulletins)) {
-                    aBulletins = a.bulletins.length;
+            if(a.permissions.canRead && b.permissions.canRead) {
+                if (sortDetails.columnId === 'moreDetails') {
+                    var aBulletins = 0;
+                    if (!nf.Common.isEmpty(a.bulletins)) {
+                        aBulletins = a.bulletins.length;
+                    }
+                    var bBulletins = 0;
+                    if (!nf.Common.isEmpty(b.bulletins)) {
+                        bBulletins = b.bulletins.length;
+                    }
+                    return aBulletins - bBulletins;
+                } else if (sortDetails.columnId === 'type') {
+                    var aType = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? nf.Common.substringAfterLast(a.component[sortDetails.columnId], '.') : '';
+                    var bType = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? nf.Common.substringAfterLast(b.component[sortDetails.columnId], '.') : '';
+                    return aType === bType ? 0 : aType > bType ? 1 : -1;
+                } else if (sortDetails.columnId === 'state') {
+                    var aState = 'Invalid';
+                    if (nf.Common.isEmpty(a.component.validationErrors)) {
+                        aState = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                    }
+                    var bState = 'Invalid';
+                    if (nf.Common.isEmpty(b.component.validationErrors)) {
+                        bState = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                    }
+                    return aState === bState ? 0 : aState > bState ? 1 : -1;
+                } else {
+                    var aString = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                    var bString = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                    return aString === bString ? 0 : aString > bString ? 1 : -1;
                 }
-                var bBulletins = 0;
-                if (!nf.Common.isEmpty(b.bulletins)) {
-                    bBulletins = b.bulletins.length;
-                }
-                return aBulletins - bBulletins;
-            } else if (sortDetails.columnId === 'type') {
-                var aType = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? nf.Common.substringAfterLast(a[sortDetails.columnId], '.') : '';
-                var bType = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? nf.Common.substringAfterLast(b[sortDetails.columnId], '.') : '';
-                return aType === bType ? 0 : aType > bType ? 1 : -1;
-            } else if (sortDetails.columnId === 'state') {
-                var aState = 'Invalid';
-                if (nf.Common.isEmpty(a.validationErrors)) {
-                    aState = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                }
-                var bState = 'Invalid';
-                if (nf.Common.isEmpty(b.validationErrors)) {
-                    bState = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                }
-                return aState === bState ? 0 : aState > bState ? 1 : -1;
             } else {
-                var aString = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                var bString = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                return aString === bString ? 0 : aString > bString ? 1 : -1;
+                if (!a.permissions.canRead && !b.permissions.canRead){
+                    return 0;
+                }
+                if(a.permissions.canRead){
+                    return 1;
+                } else {
+                    return -1;
+                }
             }
         };
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
index 6ff095905c..f6ae344dae 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
@@ -202,6 +202,8 @@ nf.Draggable = (function () {
             connections.forEach(function (connectionId) {
                 nf.Connection.refresh(connectionId);
             });
+        }).always(function(){
+            nf.Birdseye.refresh();
         });
     };
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js
index c207e80ecd..5415cdae99 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js
@@ -477,9 +477,20 @@ nf.PolicyManagement = (function () {
     var sort = function (sortDetails, data) {
         // defines a function for sorting
         var comparer = function (a, b) {
-            var aString = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-            var bString = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-            return aString === bString ? 0 : aString > bString ? 1 : -1;
+            if(a.permissions.canRead && b.permissions.canRead) {
+                var aString = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                var bString = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                return aString === bString ? 0 : aString > bString ? 1 : -1;
+            } else {
+                if (!a.permissions.canRead && !b.permissions.canRead){
+                    return 0;
+                }
+                if(a.permissions.canRead){
+                    return 1;
+                } else {
+                    return -1;
+                }
+            }
         };
 
         // perform the sort
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
index 2c29e99e0f..74f1ea6148 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
@@ -204,34 +204,45 @@ nf.Settings = (function () {
     var sort = function (sortDetails, data) {
         // defines a function for sorting
         var comparer = function (a, b) {
-            if (sortDetails.columnId === 'moreDetails') {
-                var aBulletins = 0;
-                if (!nf.Common.isEmpty(a.bulletins)) {
-                    aBulletins = a.bulletins.length;
+            if(a.permissions.canRead && b.permissions.canRead) {
+                if (sortDetails.columnId === 'moreDetails') {
+                    var aBulletins = 0;
+                    if (!nf.Common.isEmpty(a.bulletins)) {
+                        aBulletins = a.bulletins.length;
+                    }
+                    var bBulletins = 0;
+                    if (!nf.Common.isEmpty(b.bulletins)) {
+                        bBulletins = b.bulletins.length;
+                    }
+                    return aBulletins - bBulletins;
+                } else if (sortDetails.columnId === 'type') {
+                    var aType = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? nf.Common.substringAfterLast(a.component[sortDetails.columnId], '.') : '';
+                    var bType = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? nf.Common.substringAfterLast(b.component[sortDetails.columnId], '.') : '';
+                    return aType === bType ? 0 : aType > bType ? 1 : -1;
+                } else if (sortDetails.columnId === 'state') {
+                    var aState = 'Invalid';
+                    if (nf.Common.isEmpty(a.component.validationErrors)) {
+                        aState = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                    }
+                    var bState = 'Invalid';
+                    if (nf.Common.isEmpty(b.component.validationErrors)) {
+                        bState = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                    }
+                    return aState === bState ? 0 : aState > bState ? 1 : -1;
+                } else {
+                    var aString = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                    var bString = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                    return aString === bString ? 0 : aString > bString ? 1 : -1;
                 }
-                var bBulletins = 0;
-                if (!nf.Common.isEmpty(b.bulletins)) {
-                    bBulletins = b.bulletins.length;
-                }
-                return aBulletins - bBulletins;
-            } else if (sortDetails.columnId === 'type') {
-                var aType = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? nf.Common.substringAfterLast(a[sortDetails.columnId], '.') : '';
-                var bType = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? nf.Common.substringAfterLast(b[sortDetails.columnId], '.') : '';
-                return aType === bType ? 0 : aType > bType ? 1 : -1;
-            } else if (sortDetails.columnId === 'state') {
-                var aState = 'Invalid';
-                if (nf.Common.isEmpty(a.validationErrors)) {
-                    aState = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                }
-                var bState = 'Invalid';
-                if (nf.Common.isEmpty(b.validationErrors)) {
-                    bState = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                }
-                return aState === bState ? 0 : aState > bState ? 1 : -1;
             } else {
-                var aString = nf.Common.isDefinedAndNotNull(a[sortDetails.columnId]) ? a[sortDetails.columnId] : '';
-                var bString = nf.Common.isDefinedAndNotNull(b[sortDetails.columnId]) ? b[sortDetails.columnId] : '';
-                return aString === bString ? 0 : aString > bString ? 1 : -1;
+                if (!a.permissions.canRead && !b.permissions.canRead){
+                    return 0;
+                }
+                if(a.permissions.canRead){
+                    return 1;
+                } else {
+                    return -1;
+                }
             }
         };
 
@@ -707,7 +718,7 @@ nf.Settings = (function () {
         reportingTasksGrid.setSortColumn('name', true);
         reportingTasksGrid.onSort.subscribe(function (e, args) {
             sort({
-                columnId: args.sortCol.field,
+                columnId: args.sortCol.id,
                 sortAsc: args.sortAsc
             }, reportingTasksData);
         });
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
index 5d3890b8b5..fb36d35543 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
@@ -151,6 +151,14 @@ nf.Shell = (function () {
 
                     // register a new close handler
                     $('#shell-dialog').modal('setCloseHandler', function () {
+                        // close any open combos
+                        var combos = $('.combo');
+                        for (var i = 0, len = combos.length; i < len; i++) {
+                            if ($(combos[i]).is(':visible')){
+                                $(combos[i]).combo('close');
+                            }
+                        }
+
                         deferred.resolve();
 
                         // detach the content and add it back to the parent
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js
index 0b588654c2..e81e332495 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js
@@ -42,14 +42,25 @@ nf.TemplatesTable = (function () {
     var sort = function (sortDetails, data) {
         // defines a function for sorting
         var comparer = function (a, b) {
-            if (sortDetails.columnId === 'timestamp') {
-                var aDate = nf.Common.parseDateTime(a[sortDetails.columnId]);
-                var bDate = nf.Common.parseDateTime(b[sortDetails.columnId]);
-                return aDate.getTime() - bDate.getTime();
+            if(a.permissions.canRead && b.permissions.canRead) {
+                if (sortDetails.columnId === 'timestamp') {
+                    var aDate = nf.Common.parseDateTime(a.template[sortDetails.columnId]);
+                    var bDate = nf.Common.parseDateTime(b.template[sortDetails.columnId]);
+                    return aDate.getTime() - bDate.getTime();
+                } else {
+                    var aString = nf.Common.isDefinedAndNotNull(a.template[sortDetails.columnId]) ? a.template[sortDetails.columnId] : '';
+                    var bString = nf.Common.isDefinedAndNotNull(b.template[sortDetails.columnId]) ? b.template[sortDetails.columnId] : '';
+                    return aString === bString ? 0 : aString > bString ? 1 : -1;
+                }
             } else {
-                var aString = nf.Common.isDefinedAndNotNull(a.template[sortDetails.columnId]) ? a.template[sortDetails.columnId] : '';
-                var bString = nf.Common.isDefinedAndNotNull(b.template[sortDetails.columnId]) ? b.template[sortDetails.columnId] : '';
-                return aString === bString ? 0 : aString > bString ? 1 : -1;
+                if (!a.permissions.canRead && !b.permissions.canRead){
+                    return 0;
+                }
+                if(a.permissions.canRead){
+                    return 1;
+                } else {
+                    return -1;
+                }
             }
         };
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js
index 7f1195de16..0d4a1b08a5 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js
@@ -628,9 +628,20 @@ nf.UsersTable = (function () {
     var sort = function (sortDetails, data) {
         // defines a function for sorting
         var comparer = function (a, b) {
-            var aString = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
-            var bString = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
-            return aString === bString ? 0 : aString > bString ? 1 : -1;
+            if(a.permissions.canRead && b.permissions.canRead) {
+                var aString = nf.Common.isDefinedAndNotNull(a.component[sortDetails.columnId]) ? a.component[sortDetails.columnId] : '';
+                var bString = nf.Common.isDefinedAndNotNull(b.component[sortDetails.columnId]) ? b.component[sortDetails.columnId] : '';
+                return aString === bString ? 0 : aString > bString ? 1 : -1;
+            } else {
+                if (!a.permissions.canRead && !b.permissions.canRead){
+                    return 0;
+                }
+                if(a.permissions.canRead){
+                    return 1;
+                } else {
+                    return -1;
+                }
+            }
         };
 
         // perform the sort