http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
----------------------------------------------------------------------
diff --git 
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-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 6e37221..990504b 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
@@ -197,8 +197,8 @@ nf.CanvasUtils = (function () {
                             deferred.resolve();
                         }).fail(function () {
                             nf.Dialog.showOkDialog({
-                                dialogContent: 'Unable to load the group for 
the specified component.',
-                                overlayBackground: false
+                                headerText: 'Process Group',
+                                dialogContent: 'Unable to load the group for 
the specified component.'
                             });
                             deferred.reject();
                         });
@@ -215,8 +215,8 @@ nf.CanvasUtils = (function () {
                         nf.Actions.show(component);
                     } else {
                         nf.Dialog.showOkDialog({
-                            dialogContent: 'Unable to find the specified 
component.',
-                            overlayBackground: false
+                            headerText: 'Process Group',
+                            dialogContent: 'Unable to find the specified 
component.'
                         });
                     }
                 });
@@ -1221,8 +1221,8 @@ nf.CanvasUtils = (function () {
                 }
             }).fail(function () {
                 nf.Dialog.showOkDialog({
-                    dialogContent: 'Unable to enter the selected group.',
-                    overlayBackground: false
+                    headerText: 'Process Group',
+                    dialogContent: 'Unable to enter the selected group.'
                 });
             });
         },
@@ -1402,8 +1402,8 @@ nf.CanvasUtils = (function () {
                             // ports in the root group cannot be moved
                             if (nf.Canvas.getParentGroupId() === null) {
                                 nf.Dialog.showOkDialog({
-                                    dialogContent: 'Cannot move Ports out of 
the root group',
-                                    overlayBackground: false
+                                    headerText: 'Port',
+                                    dialogContent: 'Cannot move Ports out of 
the root group'
                                 });
                                 portConnectionDeferred.reject();
                             } else {
@@ -1438,8 +1438,8 @@ nf.CanvasUtils = (function () {
                                     // inform the user of the conflicting ports
                                     if (conflictingPorts.length > 0) {
                                         nf.Dialog.showOkDialog({
-                                            dialogContent: 'The following 
ports are currently connected outside of this group: <b>' + 
conflictingPorts.join('</b>, <b>') + '</b>',
-                                            overlayBackground: false
+                                            headerText: 'Port',
+                                            dialogContent: 'The following 
ports are currently connected outside of this group: <b>' + 
conflictingPorts.join('</b>, <b>') + '</b>'
                                         });
                                         portConnectionDeferred.reject();
                                     } else {
@@ -1489,8 +1489,8 @@ nf.CanvasUtils = (function () {
                                 // inform the user of the conflicting ports
                                 if (conflictingPorts.length > 0) {
                                     nf.Dialog.showOkDialog({
-                                        dialogContent: 'The following ports 
already exist in the target process group: <b>' + conflictingPorts.join('</b>, 
<b>') + '</b>',
-                                        overlayBackground: false
+                                        headerText: 'Port',
+                                        dialogContent: 'The following ports 
already exist in the target process group: <b>' + conflictingPorts.join('</b>, 
<b>') + '</b>'
                                     });
                                     portNameDeferred.reject();
                                 } else {

http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
----------------------------------------------------------------------
diff --git 
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
 
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
index eef9b44..d5f4add 100644
--- 
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
+++ 
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
@@ -24,8 +24,8 @@ $(document).ready(function () {
         var app = angular.module('ngCanvasApp', ['ngResource', 'ngRoute', 
'ngMaterial', 'ngSanitize', 'ngMessages']);
 
         //Define Dependency Injection Annotations
-        nf.ng.Canvas.AppConfig.$inject = ['$mdThemingProvider', 
'$compileProvider'];
-        nf.ng.Canvas.AppCtrl.$inject = ['$scope', 'serviceProvider', 
'headerCtrl', 'graphControlsCtrl'];
+        nf.ng.AppConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
+        nf.ng.AppCtrl.$inject = ['$scope', 'serviceProvider', '$compile', 
'headerCtrl', 'graphControlsCtrl'];
         nf.ng.ServiceProvider.$inject = [];
         nf.ng.BreadcrumbsCtrl.$inject = ['serviceProvider', '$sanitize'];
         nf.ng.Canvas.HeaderCtrl.$inject = ['serviceProvider', 'toolboxCtrl', 
'globalMenuCtrl', 'flowStatusCtrl'];
@@ -54,10 +54,10 @@ $(document).ready(function () {
         nf.ng.DraggableDirective.$inject = [];
 
         //Configure Angular App
-        app.config(nf.ng.Canvas.AppConfig);
+        app.config(nf.ng.AppConfig);
 
         //Define Angular App Controllers
-        app.controller('ngCanvasAppCtrl', nf.ng.Canvas.AppCtrl);
+        app.controller('ngCanvasAppCtrl', nf.ng.AppCtrl);
 
         //Define Angular App Services
         app.service('serviceProvider', nf.ng.ServiceProvider);
@@ -83,10 +83,13 @@ $(document).ready(function () {
         app.directive('nfDraggable', nf.ng.DraggableDirective);
 
         //Manually Boostrap Angular App
-        angular.bootstrap($('body'), ['ngCanvasApp'], { strictDi: true });
+        nf.ng.Bridge.injector = angular.bootstrap($('body'), ['ngCanvasApp'], 
{ strictDi: true });
 
         // initialize the NiFi
         nf.Canvas.init();
+
+        //initialize toolbox components tooltips
+        $('.component-button').qtip($.extend({}, 
nf.Common.config.tooltipConfig));
     } else {
         $('#message-title').text('Unsupported Browser');
         $('#message-content').text('Flow graphs are shown using SVG. Please 
use a browser that supports rendering SVG.');
@@ -501,7 +504,7 @@ nf.Canvas = (function () {
             });
 
             //breadcrumbs
-            
nf.ng.Bridge.get('appCtrl.serviceProvider.breadcrumbsCtrl').updateBreadcrumbsCss({'bottom':
 bottom + 'px'});
+            
nf.ng.Bridge.injector.get('breadcrumbsCtrl').updateBreadcrumbsCss({'bottom': 
bottom + 'px'});
 
             // body
             $('#canvas-body').css({
@@ -647,9 +650,9 @@ nf.Canvas = (function () {
             accessPolicy = flowResponse.accessPolicy;
             
             // update the breadcrumbs
-            
nf.ng.Bridge.get('appCtrl.serviceProvider.breadcrumbsCtrl').resetBreadcrumbs();
-            
nf.ng.Bridge.get('appCtrl.serviceProvider.breadcrumbsCtrl').generateBreadcrumbs(processGroupFlow.breadcrumb);
-            
nf.ng.Bridge.get('appCtrl.serviceProvider.breadcrumbsCtrl').resetScrollPosition();
+            nf.ng.Bridge.injector.get('breadcrumbsCtrl').resetBreadcrumbs();
+            
nf.ng.Bridge.injector.get('breadcrumbsCtrl').generateBreadcrumbs(processGroupFlow.breadcrumb);
+            nf.ng.Bridge.injector.get('breadcrumbsCtrl').resetScrollPosition();
 
             // update the timestamp
             $('#stats-last-refreshed').text(processGroupFlow.lastRefreshed);
@@ -711,7 +714,7 @@ nf.Canvas = (function () {
 
                 // get the process group to refresh everything
                 var processGroupXhr = 
reloadProcessGroup(nf.Canvas.getGroupId(), options);
-                var statusXhr = 
nf.ng.Bridge.get('appCtrl.serviceProvider.headerCtrl.flowStatusCtrl').reloadFlowStatus();
+                var statusXhr = 
nf.ng.Bridge.injector.get('flowStatusCtrl').reloadFlowStatus();
                 $.when(processGroupXhr, statusXhr).done(function 
(processGroupResult) {
                     deferred.resolve(processGroupResult);
                 }).fail(function () {
@@ -847,7 +850,7 @@ nf.Canvas = (function () {
                         initCanvas();
                         nf.Canvas.View.init();
                         nf.ContextMenu.init();
-                        
nf.ng.Bridge.get('appCtrl.serviceProvider.headerCtrl').init();
+                        nf.ng.Bridge.injector.get('headerCtrl').init();
                         nf.Settings.init();
                         nf.Actions.init();
                         nf.QueueListing.init();
@@ -881,7 +884,7 @@ nf.Canvas = (function () {
                         nf.RemoteProcessGroupDetails.init();
                         nf.GoTo.init();
                         nf.Graph.init().done(function () {
-                            
nf.ng.Bridge.get('appCtrl.serviceProvider.graphControlsCtrl').init();
+                            
nf.ng.Bridge.injector.get('graphControlsCtrl').init();
 
                             // determine the split between the polling
                             var pollingSplit = autoRefreshIntervalSeconds / 2;

http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
----------------------------------------------------------------------
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 dbe6b85..b18a2fa 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
@@ -225,9 +225,13 @@ nf.ComponentState = (function () {
             // initialize the processor configuration dialog
             $('#component-state-dialog').modal({
                 headerText: 'Component State',
-                overlayBackground: false,
                 buttons: [{
                     buttonText: 'Close',
+                    color: {
+                        base: '#728E9B',
+                        hover: '#004849',
+                        text: '#ffffff'
+                    },
                     handler: {
                         click: function () {
                             $(this).modal('hide');
@@ -265,8 +269,7 @@ nf.ComponentState = (function () {
                         }).fail(nf.Common.handleAjaxError);
                     } else {
                         nf.Dialog.showOkDialog({
-                            dialogContent: 'This component has no state to 
clear.',
-                            overlayBackground: false
+                            dialogContent: 'This component has no state to 
clear.'
                         });
                     }
                 }
@@ -280,7 +283,13 @@ nf.ComponentState = (function () {
 
             // conditionally show the cluster node identifier
             if (nf.Canvas.isClustered()) {
-                componentStateColumns.push({id: 'scope', field: 'scope', name: 
'Scope', sortable: true, resizable: true});
+                componentStateColumns.push({
+                    id: 'scope',
+                    field: 'scope',
+                    name: 'Scope',
+                    sortable: true,
+                    resizable: true
+                });
             }
 
             var componentStateOptions = {
@@ -288,7 +297,8 @@ nf.ComponentState = (function () {
                 enableTextSelectionOnCells: true,
                 enableCellNavigation: false,
                 enableColumnReorder: false,
-                autoEdit: false
+                autoEdit: false,
+                rowHeight: 24
             };
 
             // initialize the dataview

http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-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-connection-configuration.js
 
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
index 221f3ad..485896b 100644
--- 
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
+++ 
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
@@ -38,7 +38,7 @@ nf.ConnectionConfiguration = (function () {
 
     /**
      * Initializes the source in the new connection dialog.
-     * 
+     *
      * @argument {selection} source        The source
      */
     var initializeSourceNewConnectionDialog = function (source) {
@@ -61,29 +61,39 @@ nf.ConnectionConfiguration = (function () {
 
                         // configure the button model
                         $('#connection-configuration').modal('setButtonModel', 
[{
-                                buttonText: 'Add',
-                                handler: {
-                                    click: function () {
-                                        // get the selected relationships
-                                        var selectedRelationships = 
getSelectedRelationships();
-
-                                        // ensure some relationships were 
selected
-                                        if (selectedRelationships.length > 0) {
-                                            
addConnection(selectedRelationships);
-                                        } else {
-                                            // inform users that no 
relationships were selected
-                                            nf.Dialog.showOkDialog({
-                                                dialogContent: 'The connection 
must have at least one relationship selected.',
-                                                overlayBackground: false
-                                            });
-                                        }
-
-                                        // close the dialog
-                                        
$('#connection-configuration').modal('hide');
+                            buttonText: 'Add',
+                            color: {
+                                base: '#728E9B',
+                                hover: '#004849',
+                                text: '#ffffff'
+                            },
+                            handler: {
+                                click: function () {
+                                    // get the selected relationships
+                                    var selectedRelationships = 
getSelectedRelationships();
+
+                                    // ensure some relationships were selected
+                                    if (selectedRelationships.length > 0) {
+                                        addConnection(selectedRelationships);
+                                    } else {
+                                        // inform users that no relationships 
were selected
+                                        nf.Dialog.showOkDialog({
+                                            dialogContent: 'The connection 
must have at least one relationship selected.'
+                                        });
                                     }
+
+                                    // close the dialog
+                                    
$('#connection-configuration').modal('hide');
                                 }
-                            }, {
+                            }
+                        },
+                            {
                                 buttonText: 'Cancel',
+                                color: {
+                                    base: '#E3E8EB',
+                                    hover: '#C7D2D7',
+                                    text: '#004849'
+                                },
                                 handler: {
                                     click: function () {
                                         
$('#connection-configuration').modal('hide');
@@ -126,18 +136,29 @@ nf.ConnectionConfiguration = (function () {
                 connectionSourceDeferred.done(function () {
                     // configure the button model
                     $('#connection-configuration').modal('setButtonModel', [{
-                            buttonText: 'Add',
-                            handler: {
-                                click: function () {
-                                    // add the connection
-                                    addConnection();
-
-                                    // close the dialog
-                                    
$('#connection-configuration').modal('hide');
-                                }
+                        buttonText: 'Add',
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                // add the connection
+                                addConnection();
+
+                                // close the dialog
+                                $('#connection-configuration').modal('hide');
                             }
-                        }, {
+                        }
+                    },
+                        {
                             buttonText: 'Cancel',
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
                             handler: {
                                 click: function () {
                                     
$('#connection-configuration').modal('hide');
@@ -155,7 +176,7 @@ nf.ConnectionConfiguration = (function () {
 
     /**
      * Initializes the source when the source is an input port.
-     * 
+     *
      * @argument {selection} source        The source
      */
     var initializeSourceInputPort = function (source) {
@@ -182,7 +203,7 @@ nf.ConnectionConfiguration = (function () {
 
     /**
      * Initializes the source when the source is an input port.
-     * 
+     *
      * @argument {selection} source        The source
      */
     var initializeSourceFunnel = function (source) {
@@ -208,7 +229,7 @@ nf.ConnectionConfiguration = (function () {
 
     /**
      * Initializes the source when the source is a processor.
-     * 
+     *
      * @argument {selection} source        The source
      */
     var initializeSourceProcessor = function (source) {
@@ -238,7 +259,7 @@ nf.ConnectionConfiguration = (function () {
 
     /**
      * Initializes the source when the source is a process group.
-     * 
+     *
      * @argument {selection} source        The source
      */
     var initializeSourceProcessGroup = function (source) {
@@ -318,7 +339,7 @@ nf.ConnectionConfiguration = (function () {
 
     /**
      * Initializes the source when the source is a remote process group.
-     * 
+     *
      * @argument {selection} source        The source
      */
     var initializeSourceRemoteProcessGroup = function (source) {
@@ -467,7 +488,7 @@ nf.ConnectionConfiguration = (function () {
 
     /**
      * Initializes the destination when the destination is a process group.
-     * 
+     *
      * @argument {selection} destination        The destination
      */
     var initializeDestinationProcessGroup = function (destination) {
@@ -543,7 +564,7 @@ nf.ConnectionConfiguration = (function () {
 
     /**
      * Initializes the source when the source is a remote process group.
-     * 
+     *
      * @argument {selection} destination        The destination
      */
     var initializeDestinationRemoteProcessGroup = function (destination) {
@@ -620,7 +641,7 @@ nf.ConnectionConfiguration = (function () {
 
     /**
      * Initializes the source panel for groups.
-     * 
+     *
      * @argument {selection} source    The source of the connection
      */
     var initializeSourceReadOnlyGroup = function (source) {
@@ -644,7 +665,7 @@ nf.ConnectionConfiguration = (function () {
 
     /**
      * Initializes the source in the existing connection dialog.
-     * 
+     *
      * @argument {selection} source        The source
      */
     var initializeSourceEditConnectionDialog = function (source) {
@@ -661,7 +682,7 @@ nf.ConnectionConfiguration = (function () {
 
     /**
      * Initializes the destination in the existing connection dialog.
-     * 
+     *
      * @argument {selection} destination        The destination
      */
     var initializeDestinationEditConnectionDialog = function (destination) {
@@ -680,19 +701,19 @@ nf.ConnectionConfiguration = (function () {
 
     /**
      * Creates an option for the specified relationship name.
-     * 
+     *
      * @argument {string} name      The relationship name
      */
     var createRelationshipOption = function (name) {
         var relationshipLabel = $('<div class="relationship-name 
ellipsis"></div>').text(name);
         var relationshipValue = $('<span class="relationship-name-value 
hidden"></span>').text(name);
         return $('<div class="available-relationship-container"><div 
class="available-relationship nf-checkbox checkbox-unchecked"></div>' +
-                
'</div>').append(relationshipLabel).append(relationshipValue).appendTo('#relationship-names');
+            
'</div>').append(relationshipLabel).append(relationshipValue).appendTo('#relationship-names');
     };
 
     /**
      * Adds a new connection.
-     * 
+     *
      * @argument {array} selectedRelationships      The selected relationships
      */
     var addConnection = function (selectedRelationships) {
@@ -740,7 +761,7 @@ nf.ConnectionConfiguration = (function () {
 
                 // if the connection is between these same components, 
consider it for collisions
                 if ((connectionSourceComponentId === sourceComponentId && 
connectionDestinationComponentId === destinationComponentId) ||
-                        (connectionDestinationComponentId === 
sourceComponentId && connectionSourceComponentId === destinationComponentId)) {
+                    (connectionDestinationComponentId === sourceComponentId && 
connectionSourceComponentId === destinationComponentId)) {
 
                     // record all connections between these two components in 
question
                     existingConnections.push(connectionForSourceComponent);
@@ -896,7 +917,7 @@ nf.ConnectionConfiguration = (function () {
 
     /**
      * Updates an existing connection.
-     * 
+     *
      * @argument {array} selectedRelationships          The selected 
relationships
      */
     var updateConnection = function (selectedRelationships) {
@@ -962,7 +983,6 @@ nf.ConnectionConfiguration = (function () {
                 if (xhr.status === 400 || xhr.status === 404 || xhr.status === 
409) {
                     nf.Dialog.showOkDialog({
                         dialogContent: nf.Common.escapeHtml(xhr.responseText),
-                        overlayBackground: true
                     });
                 } else {
                     nf.Common.handleAjaxError(xhr, status, error);
@@ -1019,7 +1039,6 @@ nf.ConnectionConfiguration = (function () {
         if (errors.length > 0) {
             nf.Dialog.showOkDialog({
                 dialogContent: nf.Common.formatUnorderedList(errors),
-                overlayBackground: false,
                 headerText: 'Configuration Error'
             });
             return false;
@@ -1100,7 +1119,6 @@ nf.ConnectionConfiguration = (function () {
             // initialize the configure connection dialog
             $('#connection-configuration').modal({
                 headerText: 'Configure Connection',
-                overlayBackground: true,
                 handler: {
                     close: function () {
                         // reset the dialog on close
@@ -1114,12 +1132,12 @@ nf.ConnectionConfiguration = (function () {
                 tabStyle: 'tab',
                 selectedTabStyle: 'selected-tab',
                 tabs: [{
-                        name: 'Details',
-                        tabContentId: 'connection-details-tab-content'
-                    }, {
-                        name: 'Settings',
-                        tabContentId: 'connection-settings-tab-content'
-                    }]
+                    name: 'Details',
+                    tabContentId: 'connection-details-tab-content'
+                }, {
+                    name: 'Settings',
+                    tabContentId: 'connection-settings-tab-content'
+                }]
             });
 
             // load the processor prioritizers
@@ -1143,10 +1161,10 @@ nf.ConnectionConfiguration = (function () {
                 $('#prioritizer-available, 
#prioritizer-selected').disableSelection();
             }).fail(nf.Common.handleAjaxError);
         },
-        
+
         /**
          * Adds the specified prioritizer to the specified container.
-         * 
+         *
          * @argument {string} prioritizerContainer      The dom Id of the 
prioritizer container
          * @argument {object} prioritizerType           The type of prioritizer
          */
@@ -1160,15 +1178,15 @@ nf.ConnectionConfiguration = (function () {
 
             // add the description if applicable
             if (nf.Common.isDefinedAndNotNull(prioritizerType.description)) {
-                $('<img class="icon-info" style="float: right; margin-right: 
5px;" src="images/iconInfo.png"></img>').appendTo(prioritizer).qtip($.extend({
+                $('<div class="fa fa-question-circle" style="float: right; 
margin-right: 5px;""></div>').appendTo(prioritizer).qtip($.extend({
                     content: nf.Common.escapeHtml(prioritizerType.description)
                 }, nf.Common.config.tooltipConfig));
             }
         },
-        
+
         /**
          * Shows the dialog for creating a new connection.
-         * 
+         *
          * @argument {string} sourceId      The source id
          * @argument {string} destinationId The destination id
          */
@@ -1210,11 +1228,11 @@ nf.ConnectionConfiguration = (function () {
                 removeTempEdge();
             });
         },
-        
+
         /**
          * Shows the configuration for the specified connection. If a 
destination is
          * specified it will be considered a new destination.
-         * 
+         *
          * @argument {selection} selection         The connection entry
          * @argument {selection} destination          Optional new destination
          */
@@ -1303,46 +1321,56 @@ nf.ConnectionConfiguration = (function () {
 
                     // configure the button model
                     $('#connection-configuration').modal('setButtonModel', [{
-                            buttonText: 'Apply',
-                            handler: {
-                                click: function () {
-                                    // get the selected relationships
-                                    var selectedRelationships = 
getSelectedRelationships();
-
-                                    // see if we're working with a processor 
as the source
-                                    if (nf.CanvasUtils.isProcessor(source)) {
-                                        if (selectedRelationships.length > 0) {
-                                            // if there are relationships 
selected update
-                                            
updateConnection(selectedRelationships).done(function () {
-                                                deferred.resolve();
-                                            }).fail(function () {
-                                                deferred.reject();
-                                            });
-                                        } else {
-                                            // inform users that no 
relationships were selected and the source is a processor
-                                            nf.Dialog.showOkDialog({
-                                                dialogContent: 'The connection 
must have at least one relationship selected.',
-                                                overlayBackground: false
-                                            });
-
-                                            // reject the deferred
-                                            deferred.reject();
-                                        }
-                                    } else {
-                                        // there are no relationships, but the 
source wasn't a processor, so update anyway
-                                        
updateConnection(undefined).done(function () {
+                        buttonText: 'Apply',
+                        color: {
+                            base: '#728E9B',
+                            hover: '#004849',
+                            text: '#ffffff'
+                        },
+                        handler: {
+                            click: function () {
+                                // get the selected relationships
+                                var selectedRelationships = 
getSelectedRelationships();
+
+                                // see if we're working with a processor as 
the source
+                                if (nf.CanvasUtils.isProcessor(source)) {
+                                    if (selectedRelationships.length > 0) {
+                                        // if there are relationships selected 
update
+                                        
updateConnection(selectedRelationships).done(function () {
                                             deferred.resolve();
                                         }).fail(function () {
                                             deferred.reject();
                                         });
-                                    }
+                                    } else {
+                                        // inform users that no relationships 
were selected and the source is a processor
+                                        nf.Dialog.showOkDialog({
+                                            dialogContent: 'The connection 
must have at least one relationship selected.'
+                                        });
 
-                                    // close the dialog
-                                    
$('#connection-configuration').modal('hide');
+                                        // reject the deferred
+                                        deferred.reject();
+                                    }
+                                } else {
+                                    // there are no relationships, but the 
source wasn't a processor, so update anyway
+                                    updateConnection(undefined).done(function 
() {
+                                        deferred.resolve();
+                                    }).fail(function () {
+                                        deferred.reject();
+                                    });
                                 }
+
+                                // close the dialog
+                                $('#connection-configuration').modal('hide');
                             }
-                        }, {
+                        }
+                    },
+                        {
                             buttonText: 'Cancel',
+                            color: {
+                                base: '#E3E8EB',
+                                hover: '#C7D2D7',
+                                text: '#004849'
+                            },
                             handler: {
                                 click: function () {
                                     // hide the dialog

http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
----------------------------------------------------------------------
diff --git 
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
 
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
index b781fe9..41f08ea 100644
--- 
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
+++ 
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
@@ -589,8 +589,8 @@ nf.Connection = (function () {
                             var destinationComponentId = 
nf.CanvasUtils.getConnectionDestinationComponentId(connectionData);
                             if (sourceComponentId === destinationComponentId 
&& d.component.bends.length <= 2) {
                                 nf.Dialog.showOkDialog({
-                                    dialogContent: 'Looping connections must 
have at least two bend points.',
-                                    overlayBackground: false
+                                    headerText: 'Connection',
+                                    dialogContent: 'Looping connections must 
have at least two bend points.'
                                 });
                                 return;
                             }
@@ -1198,8 +1198,7 @@ nf.Connection = (function () {
         }).fail(function (xhr, status, error) {
             if (xhr.status === 400 || xhr.status === 404 || xhr.status === 
409) {
                 nf.Dialog.showOkDialog({
-                    dialogContent: nf.Common.escapeHtml(xhr.responseText),
-                    overlayBackground: true
+                    dialogContent: nf.Common.escapeHtml(xhr.responseText)
                 });
             } else {
                 nf.Common.handleAjaxError(xhr, status, error);
@@ -1413,8 +1412,8 @@ nf.Connection = (function () {
                             }).fail(function (xhr, status, error) {
                                 if (xhr.status === 400 || xhr.status === 404 
|| xhr.status === 409) {
                                     nf.Dialog.showOkDialog({
-                                        dialogContent: 
nf.Common.escapeHtml(xhr.responseText),
-                                        overlayBackground: true
+                                        headerText: 'Connection',
+                                        dialogContent: 
nf.Common.escapeHtml(xhr.responseText)
                                     });
 
                                     // reset the connection

Reply via email to