[NIFI-2603] applying color to highlight status changes

- Updating the colors of the target port status and ensuring that when one no longer exists it reports that it is not running.
- This closes #1171

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-framework-core/src/main/java/org/apache/nifi/remote/StandardRemoteProcessGroup.java

@@ -439,6 +439,7 @@ public class StandardRemoteProcessGroup implements RemoteProcessGroup {
                 if (!newPortIds.contains(entry.getKey())) {
                     final StandardRemoteGroupPort port = entry.getValue();
                     port.setTargetExists(false);
+                    port.setTargetRunning(false);
 
                     // If port has incoming connection, it will be cleaned up when the connection is removed
                     if (!port.hasIncomingConnection()) {
@@ -509,6 +510,7 @@ public class StandardRemoteProcessGroup implements RemoteProcessGroup {
                 if (!newPortIds.contains(entry.getKey())) {
                     final StandardRemoteGroupPort port = entry.getValue();
                     port.setTargetExists(false);
+                    port.setTargetRunning(false);
 
                     // If port has connections, it will be cleaned up when connections are removed
                     if (port.getConnections().isEmpty()) {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css

@@ -523,26 +523,6 @@ div.context-menu-item.hover {
     left: 2px;
 }
 
-div.context-menu-item.hover > div.context-menu-item-img.fa.fa-play {
-    color:#5cb85c;
-}
-
-.running {
-    color:#5cb85c;
-}
-
-div.context-menu-item.hover > div.context-menu-item-img.fa.fa-stop {
-    color:#d9534f;
-}
-
-.stopped {
-    color:#d9534f !important;
-}
-
-.invalid {
-    color:#f0ad4e !important;
-}
-
 .context-menu-item-img.icon {
     position: relative;
     top: 1px;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/flow-status.css

@@ -38,22 +38,11 @@
     color: #728E9B; /*base-color*/
 }
 
-#flow-status .fa.fa-play {
-    color: #5cb85c;
-}
-
-#flow-status .fa.fa-stop {
-    color: #d9534f;
-}
-
-#flow-status .fa.fa-warning {
-    color: #f0ad4e;
-}
-
 #flow-status .icon span {
     font-size: 15px;
     font-weight: 500;
     color: #775351; /*value-color*/
+    text-shadow: none;
 }
 
 #flow-status .fa span {
@@ -61,6 +50,7 @@
     font-weight: 500;
     color: #775351; /*value-color*/
     font-family: Roboto, sans-serif;
+    text-shadow: none;
 }
 
 #flow-status button {
@@ -98,6 +88,7 @@
 
 #search-button .fa {
     color: #004849;
+    text-shadow: none;
 }
 
 #bulletin-button {
@@ -106,12 +97,13 @@
 }
 
 #bulletin-button.has-bulletins {
-    background-color: #f0ad4e; /*warm-color*/
+    background-color: #ba554a; /*warm-color*/
 }
 
 #bulletin-button i.fa {
     color: #fff;
     font-size: 15px;
+    text-shadow: none;
 }
 
 #canvas-loading-container {
@@ -124,7 +116,7 @@
 }
 
 #connected-nodes-count.connection-warning {
-    color: #f0ad4e;
+    color: #BA554A;
 }
 
 /* search field */

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css

@@ -114,19 +114,7 @@ text.bulletin-icon {
 }
 
 rect.bulletin-background {
-    fill: #f0ad4e;
+    fill: #ba554a;
-}
-
-text.process-group-invalid.has-validation-errors {
-    fill: #f0ad4e;
-}
-
-text.process-group-stopped.process-group-contents-icon {
-    fill: #d9534f;
-}
-
-text.process-group-running.process-group-contents-icon{
-    fill: #5cb85c;
 }
 
 text.active-thread-count-icon {
@@ -209,7 +197,7 @@ g.connection rect.body.unauthorized {
 
 g.connection rect.border.unauthorized {
     stroke-width: 1.5;
-    stroke: #f0ad4e;
+    stroke: #ba554a;
     stroke-dasharray: 3,3;
 }
 
@@ -251,7 +239,7 @@ g.connection path.connection-path.full {
 }
 
 g.connection path.connection-path.unauthorized {
-    stroke: #f0ad4e;
+    stroke: #ba554a;
     stroke-dasharray: 3,3;
 }
 
@@ -259,10 +247,11 @@ text.connection-from-run-status, text.connection-to-run-status, text.expiration-
     fill: #728e9b;
     font-family: FontAwesome;
     font-size: 10px;
+    text-shadow: 0 0 4px rgba(255,255,255,1);
 }
 
 text.connection-from-run-status.is-missing-port, text.connection-to-run-status.is-missing-port {
-    fill: #f0ad4e;
+    fill: #cf9f5d;
 }
 
 g.connection rect.backpressure-tick {
@@ -387,7 +376,7 @@ text.port-icon {
 }
 
 text.port-transmission-icon {
-    font-size: 11px;
+    font-size: 15px;
     fill: #728e9b
 }
 
@@ -405,9 +394,10 @@ text.process-group-name {
 }
 
 text.process-group-contents-count {
-    font-weight: bold;
+    fill: #775351;
-    font-size: 13px;
+    font-size: 15px;
-    fill: #294c58;
+    font-weight: 500;
+    font-family: Roboto, sans-serif;
 }
 
 g.process-group.drop rect.border {
@@ -416,7 +406,7 @@ g.process-group.drop rect.border {
 }
 
 text.process-group-contents-icon {
-    font-size: 13px;
+    font-size: 15px;
     fill: #728e9b;
 }
 
@@ -433,14 +423,10 @@ text.remote-process-group-uri {
 }
 
 text.remote-process-group-transmission-status {
-    font-size: 13px;
+    font-size: 15px;
     fill: #728e9b
 }
 
-text.remote-process-group-transmission-status.has-authorization-errors {
-    fill: #f0ad4e;
-}
-
 text.remote-process-group-transmission-secure {
     font-family: FontAwesome;
     font-size: 13px;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/header.css

@@ -110,7 +110,7 @@ md-toolbar.md-small .md-toolbar-tools {
 }
 
 #global-menu-content a.disabled {
-    color: #a8a8a8;
+    color: #a8a8a8 !important;
     cursor: not-allowed;
 }
 

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css

@@ -84,42 +84,73 @@ div.context-menu-provenance {
 
 /* processor status styles */
 
-div.disabled {
+.disabled {
     float: left;
+    color: #728e9b !important;
+    fill: #728e9b !important;
+    text-shadow: 0 0 4px rgba(255,255,255,1);
 }
 
-div.enabled {
+.enabled {
     float: left;
+    color: #44a3cf !important;
+    fill: #44a3cf !important;
     margin-left: 3px;
     margin-right: -3px;
+    text-shadow: 0 0 4px rgba(255,255,255,1);
 }
 
-div.stopped {
+.stopped {
     float: left;
+    color: #d18686 !important;
+    fill: #d18686 !important;
+    text-shadow: 0 0 4px rgba(255,255,255,1);
 }
 
-div.running {
+.stopped:before {
+    content: "\f04d";
+    font-family: FontAwesome;
+}
+
+.running {
     float: left;
+    color: #7dc7a0 !important;
+    fill: #7dc7a0 !important;
+    text-shadow: 0 0 4px rgba(255,255,255,1);
 }
 
-div.has-errors, div.invalid {
+.running:before {
+    content: "\f04b";
+    font-family: FontAwesome;
+}
+
+.has-errors, .invalid {
     float: left;
-    color: #f0ad4e !important;
+    color: #cf9f5d !important;
+    fill: #cf9f5d !important;
+    text-shadow: 0 0 4px rgba(255,255,255,1);
 }
 
-div.has-errors:before, div.invalid:before {
+.has-errors:before, .invalid:before {
     font-family: FontAwesome;
     content: "\f071";
-    color: #f0ad4e;
+    color: #cf9f5d;
+    text-shadow: 0 0 4px rgba(255,255,255,1);
 }
 
-div.transmitting {
+.transmitting {
     float: left;
+    color: #44a3cf !important;
+    fill: #44a3cf !important;
+    text-shadow: 0 0 4px rgba(255,255,255,1);
 }
 
-div.not-transmitting {
+.not-transmitting {
     float: left;
+    color: #728e9b !important;
+    fill: #728e9b !important;
     margin-top: 0px !important;
+    text-shadow: 0 0 4px rgba(255,255,255,1);
 }
 
 div.valid {
@@ -128,7 +159,13 @@ div.valid {
 }
 
 div.has-bulletins {
-    color: #f0ad4e !important;
+    color: #ba554a !important;
+}
+
+.zero {
+    color: #aabec7 !important;
+    fill: #aabec7 !important;
+    text-shadow: none !important;
 }
 
 /*
@@ -233,7 +270,7 @@ span.details-title {
     font-weight: bold;
     font-family: Roboto;
     font-size: 13px;
-    color: #f0ad4e;
+    color: #ba554a;
 }
 
 #upload-template-container button {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css

@@ -213,14 +213,6 @@ div.action-button {
     text-transform:uppercase;
  }
 
-#operate-start button:hover {
-    color:#5cb85c;
-}
-
-#operate-stop button:hover {
-    color:#d9534f;
-}
-
 div.graph-control div.icon-disabled {
     color: #ddd;
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css

@@ -75,7 +75,6 @@ div.processor-configuration-warning-icon:before {
     font-family: FontAwesome;
     content: "\f071";
     font-size: 16px;
-    color: #f0ad4e;
 }
 
 #auto-terminate-relationship-names {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css

@@ -466,11 +466,11 @@ div.lineage-collapse-children:before {
 }
 
 path.link.selected {
-    stroke: #f0ad4e;
+    stroke: #ba554a;
 }
 
 g.event circle.selected {
-    fill: #f0ad4e;
+    fill: #ba554a;
 }
 
 text.event-type {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/queue-listing.css

@@ -75,7 +75,7 @@
 #queue-listing-message {
     position: absolute;
     top: 36px;
-    color: #f0ad4e;
+    color: #ba554a;
     font-family: Roboto;
     font-size: 13px;
     font-weight: 500;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/remote-process-group-configuration.css

@@ -100,7 +100,7 @@ div.remote-port-removed:before {
     font-family: FontAwesome;
     content: "\f071";
     font-size: 16px;
-    color: #f0ad4e;
+    color: #ba554a;
 }
 
 div.remote-port-edit-container {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/slickgrid/css/slick-default-theme.css

@@ -77,7 +77,7 @@ classes should alter those!
 }
 
 .slick-cell.invalid {
-    border-color: #f0ad4e;
+    border-color: #ba554a;
     -moz-animation-duration: 0.2s;
     -webkit-animation-duration: 0.2s;
     -moz-animation-name: slickgrid-invalid-hilite;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-flow-status-controller.js

@@ -360,14 +360,14 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
                     var connectedNodes = clusterSummary.connectedNodes.split(' / ');
                     if (connectedNodes.length === 2 && connectedNodes[0] !== connectedNodes[1]) {
                         this.clusterConnectionWarning = true;
-                        color = '#f0ad4e';
+                        color = '#BA554A';
                     }
                 }
                 this.connectedNodesCount =
                     nf.Common.isDefinedAndNotNull(clusterSummary.connectedNodes) ? clusterSummary.connectedNodes : '-';
             } else {
                 this.connectedNodesCount = 'Disconnected';
-                color = '#f0ad4e';
+                color = '#BA554A';
             }
 
             // update the color
@@ -380,36 +380,88 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
          * @param status  The controller status returned from the `../nifi-api/flow/status` endpoint.
          */
         update: function (status) {
-            var controllerInvalidCountColor =
+            var controllerInvalidCount = (nf.Common.isDefinedAndNotNull(status.invalidCount)) ? status.invalidCount : 0;
-                (nf.Common.isDefinedAndNotNull(status.invalidCount) && (status.invalidCount > 0)) ?
+
-                    '#f0ad4e' : '#728E9B';
+            if (this.controllerInvalidCount > 0) {
-            $('#controller-invalid-count').parent().css('color', controllerInvalidCountColor);
+                $('#controller-invalid-count').parent().removeClass('zero').addClass('invalid');
+            } else {
+                $('#controller-invalid-count').parent().removeClass('invalid').addClass('zero');
+            }
 
             // update the report values
             this.activeThreadCount = status.activeThreadCount;
+
+            if (this.activeThreadCount > 0) {
+                $('#flow-status-container').find('.icon-threads').removeClass('zero');
+            } else {
+                $('#flow-status-container').find('.icon-threads').addClass('zero');
+            }
+
             this.totalQueued = status.queued;
 
+            if (this.totalQueued.indexOf('0 / 0') >= 0) {
+                $('#flow-status-container').find('.fa-list').addClass('zero');
+            } else {
+                $('#flow-status-container').find('.fa-list').removeClass('zero');
+            }
+
             // update the component counts
             this.controllerTransmittingCount =
                 nf.Common.isDefinedAndNotNull(status.activeRemotePortCount) ?
                     status.activeRemotePortCount : '-';
 
+            if (this.controllerTransmittingCount > 0) {
+                $('#flow-status-container').find('.fa-bullseye').removeClass('zero').addClass('transmitting');
+            } else {
+                $('#flow-status-container').find('.fa-bullseye').removeClass('transmitting').addClass('zero');
+            }
+
             this.controllerNotTransmittingCount =
                 nf.Common.isDefinedAndNotNull(status.inactiveRemotePortCount) ?
                     status.inactiveRemotePortCount : '-';
 
+            if (this.controllerNotTransmittingCount > 0) {
+                $('#flow-status-container').find('.icon-transmit-false').removeClass('zero').addClass('not-transmitting');
+            } else {
+                $('#flow-status-container').find('.icon-transmit-false').removeClass('not-transmitting').addClass('zero');
+            }
+
             this.controllerRunningCount =
                 nf.Common.isDefinedAndNotNull(status.runningCount) ? status.runningCount : '-';
 
+            if (this.controllerRunningCount > 0) {
+                $('#flow-status-container').find('.fa-play').removeClass('zero').addClass('running');
+            } else {
+                $('#flow-status-container').find('.fa-play').removeClass('running').addClass('zero');
+            }
+
             this.controllerStoppedCount =
                 nf.Common.isDefinedAndNotNull(status.stoppedCount) ? status.stoppedCount : '-';
 
+            if (this.controllerStoppedCount > 0) {
+                $('#flow-status-container').find('.fa-stop').removeClass('zero').addClass('stopped');
+            } else {
+                $('#flow-status-container').find('.fa-stop').removeClass('stopped').addClass('zero');
+            }
+
             this.controllerInvalidCount =
                 nf.Common.isDefinedAndNotNull(status.invalidCount) ? status.invalidCount : '-';
 
+            if (this.controllerInvalidCount > 0) {
+                $('#flow-status-container').find('.fa-warning').removeClass('zero').addClass('invalid');
+            } else {
+                $('#flow-status-container').find('.fa-warning').removeClass('invalid').addClass('zero');
+            }
+
             this.controllerDisabledCount =
                 nf.Common.isDefinedAndNotNull(status.disabledCount) ? status.disabledCount : '-';
 
+            if (this.controllerDisabledCount > 0) {
+                $('#flow-status-container').find('.icon-enable-false').removeClass('zero').addClass('disabled');
+            } else {
+                $('#flow-status-container').find('.icon-enable-false').removeClass('disabled').addClass('zero');
+            }
+
         },
 
         /**

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js

@@ -862,6 +862,20 @@ nf.Connection = (function () {
                                         return '\uf04d';
                                     }
                                 })
+                                .classed('running', function () {
+                                    if (d.component.source.exists === true) {
+                                        return d.component.source.running;
+                                    } else {
+                                        return false;
+                                    }
+                                })
+                                .classed('stopped', function () {
+                                    if (d.component.source.exists === true) {
+                                        return !d.component.source.running;
+                                    } else {
+                                        return false;
+                                    }
+                                })
                                 .classed('is-missing-port', function () {
                                     return d.component.source.exists === false;
                                 });
@@ -957,6 +971,20 @@ nf.Connection = (function () {
                                         return '\uf04d';
                                     }
                                 })
+                                .classed('running', function () {
+                                    if (d.component.destination.running === true) {
+                                        return d.component.destination.running;
+                                    } else {
+                                        return false;
+                                    }
+                                })
+                                .classed('stopped', function () {
+                                    if (d.component.destination.running !== true) {
+                                        return !d.component.destination.running;
+                                    } else {
+                                        return false;
+                                    }
+                                })
                                 .classed('is-missing-port', function () {
                                     return d.component.destination.exists === false;
                                 });

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js

@@ -213,7 +213,7 @@ nf.Port = (function () {
                             .attr({
                                 'class': 'port-transmission-icon',
                                 'x': 10,
-                                'y': 15
+                                'y': 18
                             });
 
                         // bulletin background
@@ -342,11 +342,11 @@ nf.Port = (function () {
                     var fill = '#728e9b';
 
                     if  (d.status.aggregateSnapshot.runStatus === 'Invalid') {
-                        fill = '#f0ad4e';
+                        fill = '#cf9f5d';
                     } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
-                        fill = '#5cb85c';
+                        fill = '#7dc7a0';
                     } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
-                        fill = '#d9534f';
+                        fill = '#d18686';
                     }
 
                     return fill;
@@ -423,6 +423,20 @@ nf.Port = (function () {
                 } else {
                     return '\ue80a';
                 }
+            })
+            .classed('transmitting', function (d) {
+                if (d.status.aggregateSnapshot.transmitting === true) {
+                    return true;
+                } else {
+                    return false;
+                }
+            })
+            .classed('not-transmitting', function (d) {
+                if (d.status.aggregateSnapshot.transmitting !== true) {
+                    return true;
+                } else {
+                    return false;
+                }
             });
 
         updated.each(function (d) {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js

@@ -192,6 +192,7 @@ nf.ProcessGroup = (function () {
 
     // attempt of space between component count and icon for process group contents
     var CONTENTS_SPACER = 10;
+    var CONTENTS_VALUE_SPACER = 5;
 
     /**
      * Updates the process groups in the specified selection.
@@ -259,7 +260,6 @@ nf.ProcessGroup = (function () {
                     // transmitting count
                     details.append('text')
                         .attr({
-                            'x': 28,
                             'y': 49,
                             'class': 'process-group-transmitting-count process-group-contents-count'
                         });
@@ -561,7 +561,7 @@ nf.ProcessGroup = (function () {
                             'y': 60,
                             'class': 'process-group-out stats-value'
                         });
-                    
+
                     // out ports
                     outText.append('tspan')
                         .attr({
@@ -681,21 +681,38 @@ nf.ProcessGroup = (function () {
                 }
 
                 // update transmitting
+                var transmitting = details.select('text.process-group-transmitting')
+                    .classed('transmitting', function (d) {
+                        return d.permissions.canRead && d.activeRemotePortCount > 0;
+                    })
+                    .classed('zero', function (d) {
+                        return d.permissions.canRead && d.activeRemotePortCount === 0;
+                    });
                 var transmittingCount = details.select('text.process-group-transmitting-count')
+                    .attr('x', function () {
+                        var transmittingCountX = parseInt(transmitting.attr('x'), 10);
+                        return transmittingCountX + Math.round(transmitting.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
+                    })
                     .text(function (d) {
                         return d.activeRemotePortCount;
                     });
 
                 // update not transmitting
                 var notTransmitting = details.select('text.process-group-not-transmitting')
+                    .classed('not-transmitting', function (d) {
+                        return d.permissions.canRead && d.inactiveRemotePortCount > 0;
+                    })
+                    .classed('zero', function (d) {
+                        return d.permissions.canRead && d.inactiveRemotePortCount === 0;
+                    })
                     .attr('x', function () {
                         var transmittingX = parseInt(transmittingCount.attr('x'), 10);
-                        return transmittingX + transmittingCount.node().getComputedTextLength() + CONTENTS_SPACER;
+                        return transmittingX + Math.round(transmittingCount.node().getComputedTextLength()) + CONTENTS_SPACER;
                     });
                 var notTransmittingCount = details.select('text.process-group-not-transmitting-count')
                     .attr('x', function () {
                         var notTransmittingCountX = parseInt(notTransmitting.attr('x'), 10);
-                        return notTransmittingCountX + notTransmitting.node().getComputedTextLength() + CONTENTS_SPACER;
+                        return notTransmittingCountX + Math.round(notTransmitting.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
                     })
                     .text(function (d) {
                         return d.inactiveRemotePortCount;
@@ -703,14 +720,20 @@ nf.ProcessGroup = (function () {
 
                 // update running
                 var running = details.select('text.process-group-running')
+                    .classed('running', function (d) {
+                        return d.permissions.canRead && d.component.runningCount > 0;
+                    })
+                    .classed('zero', function (d) {
+                        return d.permissions.canRead && d.component.runningCount === 0;
+                    })
                     .attr('x', function () {
                         var notTransmittingX = parseInt(notTransmittingCount.attr('x'), 10);
-                        return notTransmittingX + notTransmittingCount.node().getComputedTextLength() + CONTENTS_SPACER;
+                        return notTransmittingX + Math.round(notTransmittingCount.node().getComputedTextLength()) + CONTENTS_SPACER;
                     });
                 var runningCount = details.select('text.process-group-running-count')
                     .attr('x', function () {
                         var runningCountX = parseInt(running.attr('x'), 10);
-                        return runningCountX + running.node().getComputedTextLength() + CONTENTS_SPACER;
+                        return runningCountX + Math.round(running.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
                     })
                     .text(function (d) {
                         return d.runningCount;
@@ -718,14 +741,20 @@ nf.ProcessGroup = (function () {
 
                 // update stopped
                 var stopped = details.select('text.process-group-stopped')
+                    .classed('stopped', function (d) {
+                        return d.permissions.canRead && d.component.stoppedCount > 0;
+                    })
+                    .classed('zero', function (d) {
+                        return d.permissions.canRead && d.component.stoppedCount === 0;
+                    })
                     .attr('x', function () {
                         var runningX = parseInt(runningCount.attr('x'), 10);
-                        return runningX + runningCount.node().getComputedTextLength() + CONTENTS_SPACER;
+                        return runningX + Math.round(runningCount.node().getComputedTextLength()) + CONTENTS_SPACER;
                     });
                 var stoppedCount = details.select('text.process-group-stopped-count')
                     .attr('x', function () {
                         var stoppedCountX = parseInt(stopped.attr('x'), 10);
-                        return stoppedCountX + stopped.node().getComputedTextLength() + CONTENTS_SPACER;
+                        return stoppedCountX + Math.round(stopped.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
                     })
                     .text(function (d) {
                         return d.stoppedCount;
@@ -733,17 +762,20 @@ nf.ProcessGroup = (function () {
 
                 // update invalid
                 var invalid = details.select('text.process-group-invalid')
+                    .classed('invalid', function (d) {
+                        return d.permissions.canRead && d.component.invalidCount > 0;
+                    })
+                    .classed('zero', function (d) {
+                        return d.permissions.canRead && d.component.invalidCount === 0;
+                    })
                     .attr('x', function () {
                         var stoppedX = parseInt(stoppedCount.attr('x'), 10);
-                        return stoppedX + stoppedCount.node().getComputedTextLength() + CONTENTS_SPACER;
+                        return stoppedX + Math.round(stoppedCount.node().getComputedTextLength()) + CONTENTS_SPACER;
-                    })
-                    .classed('has-validation-errors', function (d) {
-                        return d.permissions.canRead && d.component.invalidCount > 0;
                     });
                 var invalidCount = details.select('text.process-group-invalid-count')
                     .attr('x', function () {
                         var invalidCountX = parseInt(invalid.attr('x'), 10);
-                        return invalidCountX + invalid.node().getComputedTextLength() + CONTENTS_SPACER;
+                        return invalidCountX + Math.round(invalid.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
                     })
                     .text(function (d) {
                         return d.invalidCount;
@@ -751,14 +783,20 @@ nf.ProcessGroup = (function () {
 
                 // update disabled
                 var disabled = details.select('text.process-group-disabled')
+                    .classed('disabled', function (d) {
+                        return d.permissions.canRead && d.component.disabledCount > 0;
+                    })
+                    .classed('zero', function (d) {
+                        return d.permissions.canRead && d.component.disabledCount === 0;
+                    })
                     .attr('x', function () {
                         var invalidX = parseInt(invalidCount.attr('x'), 10);
-                        return invalidX + invalidCount.node().getComputedTextLength() + CONTENTS_SPACER;
+                        return invalidX + Math.round(invalidCount.node().getComputedTextLength()) + CONTENTS_SPACER;
                     });
                 details.select('text.process-group-disabled-count')
                     .attr('x', function () {
                         var disabledCountX = parseInt(disabled.attr('x'), 10);
-                        return disabledCountX + disabled.node().getComputedTextLength() + CONTENTS_SPACER;
+                        return disabledCountX + Math.round(disabled.node().getComputedTextLength()) + CONTENTS_VALUE_SPACER;
                     })
                     .text(function (d) {
                         return d.disabledCount;
@@ -797,7 +835,7 @@ nf.ProcessGroup = (function () {
                 } else {
                     // clear the process group comments
                     details.select('text.process-group-comments').text(null);
-                    
+
                     // clear the process group name
                     processGroup.select('text.process-group-name').text(null);
                 }
@@ -883,7 +921,7 @@ nf.ProcessGroup = (function () {
             .text(function (d) {
                 return d.outputPortCount + ' ' + String.fromCharCode(8594) + ' ';
             });
-        
+
         // out count value
         updated.select('text.process-group-out tspan.count')
             .text(function (d) {
@@ -1003,7 +1041,7 @@ nf.ProcessGroup = (function () {
             selection.enter().call(renderProcessGroups, selectAll);
             selection.call(updateProcessGroups);
         },
-        
+
         /**
          * Populates the graph with the specified process groups.
          *

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js

@@ -623,11 +623,11 @@ nf.Processor = (function () {
                     var fill = '#728e9b';
 
                     if  (d.status.aggregateSnapshot.runStatus === 'Invalid') {
-                        fill = '#f0ad4e';
+                        fill = '#cf9f5d';
                     } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
-                        fill = '#5cb85c';
+                        fill = '#7dc7a0';
                     } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
-                        fill = '#d9534f';
+                        fill = '#d18686';
                     }
 
                     return fill;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js

@@ -711,9 +711,23 @@ nf.RemoteProcessGroup = (function () {
                 }
                 return family;
             })
-            .classed('has-authorization-errors', function (d) {
+            .classed('invalid', function (d) {
                 return d.permissions.canRead && !nf.Common.isEmpty(d.component.authorizationIssues);
             })
+            .classed('transmitting', function (d) {
+                if (d.component.transmitting === true) {
+                    return true;
+                } else {
+                    return false;
+                }
+            })
+            .classed('not-transmitting', function (d) {
+                if (d.component.transmitting !== true) {
+                    return true;
+                } else {
+                    return false;
+                }
+            })
             .each(function (d) {
                 // get the tip
                 var tip = d3.select('#authorization-issues-' + d.id);

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js

@@ -622,13 +622,13 @@ nf.Settings = (function () {
             } else {
                 if (dataContext.component.state === 'STOPPED') {
                     label = 'Stopped';
-                    icon = 'fa fa-stop';
+                    icon = 'fa fa-stop stopped';
                 } else if (dataContext.component.state === 'RUNNING') {
                     label = 'Running';
-                    icon = 'fa fa-play';
+                    icon = 'fa fa-play running';
                 } else {
                     label = 'Disabled';
-                    icon = 'icon icon-enable-false';
+                    icon = 'icon icon-enable-false disabled';
                 }
             }
 

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-app-config.js

@@ -61,20 +61,20 @@ nf.ng.AppConfig = function ($mdThemingProvider, $compileProvider) {
         'contrastLightColors': undefined
     });
     $mdThemingProvider.definePalette('warnPalette', {
-        '50': 'f0ad4e',
+        '50': 'BA554A',
-        '100': 'f0ad4e',
+        '100': 'BA554A',
-        '200': 'f0ad4e',
+        '200': 'BA554A',
-        '300': 'f0ad4e',
+        '300': 'BA554A',
-        '400': 'f0ad4e',
+        '400': 'BA554A',
-        '500': '2B5C76', /* warn-color */
+        '500': 'BA554A', /* warn-color */
-        '600': 'f0ad4e',
+        '600': 'BA554A',
-        '700': 'f0ad4e',
+        '700': 'BA554A',
-        '800': 'f0ad4e',
+        '800': 'BA554A',
-        '900': 'f0ad4e',
+        '900': 'BA554A',
-        'A100': 'f0ad4e',
+        'A100': 'BA554A',
-        'A200': 'f0ad4e',
+        'A200': 'BA554A',
-        'A400': 'f0ad4e',
+        'A400': 'BA554A',
-        'A700': 'f0ad4e',
+        'A700': 'BA554A',
         'contrastDefaultColor': 'light',
         'contrastDarkColors': ['A100'],
         'contrastLightColors': undefined

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js

@@ -608,7 +608,7 @@ nf.ng.ProvenanceLineage = function () {
                 'orient': 'auto',
                 'fill': function (d) {
                     if (d.indexOf('SELECTED') >= 0) {
-                        return '#f0ad4e';
+                        return '#ba554a';
                     } else {
                         return '#000000';
                     }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js

@@ -266,19 +266,19 @@ nf.SummaryTable = (function () {
             var classes = nf.Common.escapeHtml(value.toLowerCase());
             switch(nf.Common.escapeHtml(value.toLowerCase())) {
                 case 'running':
-                    classes = ' fa fa-play running';
+                    classes += ' fa fa-play running';
                     break;
                 case 'stopped':
-                    classes = ' fa fa-stop stopped';
+                    classes += ' fa fa-stop stopped';
                     break;
                 case 'enabled':
-                    classes += ' fa fa-flash';
+                    classes += ' fa fa-flash enabled';
                     break;
                 case 'disabled':
-                    classes += ' icon icon-enable-false';
+                    classes += ' icon icon-enable-false disabled';
                     break;
                 case 'invalid':
-                    classes = ' fa fa-warning invalid';
+                    classes += ' fa fa-warning invalid';
                     break;
                 default:
                     classes += '';