NIFI-2603

- Gui Icons
- Gui Icons - Fixing Orange Color
- Gui Icons - Fixing misc. colors
- Gui Icons - Summary page + spinner
- Gui Icons - Summary page again

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

@@ -523,6 +523,26 @@ 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,6 +38,18 @@
     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;
@@ -94,7 +106,7 @@
 }
 
 #bulletin-button.has-bulletins {
-    background-color: #ba554a; /*warm-color*/
+    background-color: #f0ad4e; /*warm-color*/
 }
 
 #bulletin-button i.fa {
@@ -112,7 +124,7 @@
 }
 
 #connected-nodes-count.connection-warning {
-    color: #BA554A;
+    color: #f0ad4e;
 }
 
 /* search field */

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

@@ -114,11 +114,19 @@ text.bulletin-icon {
 }
 
 rect.bulletin-background {
-    fill: #ba554a;
+    fill: #f0ad4e;
 }
 
 text.process-group-invalid.has-validation-errors {
-    fill: #ba554a;
+    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 {
@@ -201,7 +209,7 @@ g.connection rect.body.unauthorized {
 
 g.connection rect.border.unauthorized {
     stroke-width: 1.5;
-    stroke: #ba554a;
+    stroke: #f0ad4e;
     stroke-dasharray: 3,3;
 }
 
@@ -243,7 +251,7 @@ g.connection path.connection-path.full {
 }
 
 g.connection path.connection-path.unauthorized {
-    stroke: #ba554a;
+    stroke: #f0ad4e;
     stroke-dasharray: 3,3;
 }
 
@@ -254,7 +262,7 @@ text.connection-from-run-status, text.connection-to-run-status, text.expiration-
 }
 
 text.connection-from-run-status.is-missing-port, text.connection-to-run-status.is-missing-port {
-    fill: #ba554a;
+    fill: #f0ad4e;
 }
 
 g.connection rect.backpressure-tick {
@@ -430,7 +438,7 @@ text.remote-process-group-transmission-status {
 }
 
 text.remote-process-group-transmission-status.has-authorization-errors {
-    fill: #ba554a;
+    fill: #f0ad4e;
 }
 
 text.remote-process-group-transmission-secure {

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

@@ -104,13 +104,13 @@ div.running {
 
 div.has-errors, div.invalid {
     float: left;
-    color: #ba554a !important;
+    color: #f0ad4e !important;
 }
 
 div.has-errors:before, div.invalid:before {
     font-family: FontAwesome;
     content: "\f071";
-    color: #ba554a;
+    color: #f0ad4e;
 }
 
 div.transmitting {
@@ -128,7 +128,7 @@ div.valid {
 }
 
 div.has-bulletins {
-    color: #ba554a !important;
+    color: #f0ad4e !important;
 }
 
 /*
@@ -233,7 +233,7 @@ span.details-title {
     font-weight: bold;
     font-family: Roboto;
     font-size: 13px;
-    color: #ba554a;
+    color: #f0ad4e;
 }
 
 #upload-template-container button {

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

@@ -213,6 +213,14 @@ 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,7 @@ div.processor-configuration-warning-icon:before {
     font-family: FontAwesome;
     content: "\f071";
     font-size: 16px;
-    color: #ba554a;
+    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: #ba554a;
+    stroke: #f0ad4e;
 }
 
 g.event circle.selected {
-    fill: #ba554a;
+    fill: #f0ad4e;
 }
 
 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: #ba554a;
+    color: #f0ad4e;
     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: #ba554a;
+    color: #f0ad4e;
 }
 
 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: #ba554a;
+    border-color: #f0ad4e;
     -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 = '#BA554A';
+                        color = '#f0ad4e';
                     }
                 }
                 this.connectedNodesCount =
                     nf.Common.isDefinedAndNotNull(clusterSummary.connectedNodes) ? clusterSummary.connectedNodes : '-';
             } else {
                 this.connectedNodesCount = 'Disconnected';
-                color = '#BA554A';
+                color = '#f0ad4e';
             }
 
             // update the color
@@ -382,7 +382,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
         update: function (status) {
             var controllerInvalidCountColor =
                 (nf.Common.isDefinedAndNotNull(status.invalidCount) && (status.invalidCount > 0)) ?
-                    '#BA554A' : '#728E9B';
+                    '#f0ad4e' : '#728E9B';
             $('#controller-invalid-count').parent().css('color', controllerInvalidCountColor);
 
             // update the report values

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

@@ -340,9 +340,15 @@ nf.Port = (function () {
             .attr({
                 'fill': function (d) {
                     var fill = '#728e9b';
-                    if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
+
-                        fill = '#ba554a';
+                    if  (d.status.aggregateSnapshot.runStatus === 'Invalid') {
+                        fill = '#f0ad4e';
+                    } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
+                        fill = '#5cb85c';
+                    } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
+                        fill = '#d9534f';
                     }
+
                     return fill;
                 },
                 'font-family': function (d) {

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

@@ -621,9 +621,15 @@ nf.Processor = (function () {
             .attr({
                 'fill': function (d) {
                     var fill = '#728e9b';
-                    if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
+
-                        fill = '#ba554a';
+                    if  (d.status.aggregateSnapshot.runStatus === 'Invalid') {
+                        fill = '#f0ad4e';
+                    } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
+                        fill = '#5cb85c';
+                    } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
+                        fill = '#d9534f';
                     }
+
                     return fill;
                 },
                 'font-family': function (d) {

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': 'BA554A',
+        '50': 'f0ad4e',
-        '100': 'BA554A',
+        '100': 'f0ad4e',
-        '200': 'BA554A',
+        '200': 'f0ad4e',
-        '300': 'BA554A',
+        '300': 'f0ad4e',
-        '400': 'BA554A',
+        '400': 'f0ad4e',
-        '500': 'BA554A', /* warn-color */
+        '500': '2B5C76', /* warn-color */
-        '600': 'BA554A',
+        '600': 'f0ad4e',
-        '700': 'BA554A',
+        '700': 'f0ad4e',
-        '800': 'BA554A',
+        '800': 'f0ad4e',
-        '900': 'BA554A',
+        '900': 'f0ad4e',
-        'A100': 'BA554A',
+        'A100': 'f0ad4e',
-        'A200': 'BA554A',
+        'A200': 'f0ad4e',
-        'A400': 'BA554A',
+        'A400': 'f0ad4e',
-        'A700': 'BA554A',
+        'A700': 'f0ad4e',
         '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 '#ba554a';
+                        return '#f0ad4e';
                     } 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,10 +266,10 @@ nf.SummaryTable = (function () {
             var classes = nf.Common.escapeHtml(value.toLowerCase());
             switch(nf.Common.escapeHtml(value.toLowerCase())) {
                 case 'running':
-                    classes += ' fa fa-play';
+                    classes = ' fa fa-play running';
                     break;
                 case 'stopped':
-                    classes += ' fa fa-stop';
+                    classes = ' fa fa-stop stopped';
                     break;
                 case 'enabled':
                     classes += ' fa fa-flash';
@@ -278,7 +278,7 @@ nf.SummaryTable = (function () {
                     classes += ' icon icon-enable-false';
                     break;
                 case 'invalid':
-                    classes += ' fa fa-warning';
+                    classes = ' fa fa-warning invalid';
                     break;
                 default:
                     classes += '';

nifi-nar-bundles/nifi-update-attribute-bundle/nifi-update-attribute-ui/src/main/webapp/css/main.css

@@ -250,7 +250,7 @@ div.large-label-container {
 }
 
 #message {
-    color: #ba554a;
+    color: #f0ad4e;
     margin-left: 20px;
     margin-right: 20px;
     line-height: 32px;