[NIFI-9690] Display icon on Connection Label to show when head of the queue is penalized (#5812)

This closes #5812

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

@@ -320,7 +320,7 @@ g.connection path.connection-path.unauthorized {
     stroke-dasharray: 3,3;
 }
 
-text.connection-from-run-status, text.connection-to-run-status, text.expiration-icon, text.load-balance-icon {
+text.connection-from-run-status, text.connection-to-run-status, text.expiration-icon, text.load-balance-icon, text.penalized-icon {
     fill: #728e9b;
     font-family: FontAwesome;
     font-size: 12px;

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

@@ -1637,6 +1637,41 @@
             return;
         }
 
+        // penalized icon
+        var connectionLabelContainer = updated.select('g.connection-label-container');
+        if (connectionLabelContainer.select('text.penalized-icon').empty()) {
+            connectionLabelContainer.select('g.queued-container')
+                .append('text')
+                .attrs({
+                    'class': 'penalized-icon',
+                    'y': 14
+                })
+                .text(function () {
+                    return '\uf252';
+                })
+                .append('title');
+        }
+
+        // determine whether or not to show the penalized icon
+        connectionLabelContainer.select('text.penalized-icon')
+            .classed('hidden', function (d) {
+                var flowFileAvailability = _.get(d, 'status.aggregateSnapshot.flowFileAvailability', null)
+                return flowFileAvailability !== 'HEAD_OF_QUEUE_PENALIZED';
+            })
+            .attr('x', function () {
+                var offset = 0;
+                if (!connectionLabelContainer.select('text.expiration-icon').classed('hidden')) {
+                    offset += 16;
+                }
+                if (!connectionLabelContainer.select('text.load-balance-icon').classed('hidden')) {
+                    offset += 16;
+                }
+                return 208 - offset;
+            })
+            .select('title').text(function () {
+                return 'A FlowFile is currently penalized and data cannot be processed at this time.';
+            });
+
         // update data size
         var dataSizeDeferred = $.Deferred(function (deferred) {
             // queued count value