NIFI-10241 Add comments tooltip for controller services, reporting tasks

Signed-off-by: Matthew Burgess <mattyb149@apache.org>

This closes #6768

nifi-docs/src/main/asciidoc/user-guide.adoc

@@ -1303,7 +1303,7 @@ far-right column. Other buttons in this column include "Enable", "Remove" and "A
 
 image:controller-services-configure-buttons.png["Controller Services Buttons"]
 
-You can obtain information about Controller Services by clicking the "Usage" and "Alerts" buttons in the left-hand column.
+You can obtain information about Controller Services by clicking the "Usage", "Comments" and "Alerts" buttons in the left-hand column.
 
 image:controller-services-info-buttons.png["Controller Services Information Buttons"]
 
@@ -1370,7 +1370,7 @@ Once a Reporting Task has been added, the DFM may configure it by clicking the "
 
 image:reporting-tasks-edit-buttons.png["Reporting Tasks Edit Buttons"]
 
-You can obtain information about Reporting Tasks by clicking the "View Details", "Usage", and "Alerts" buttons in the left-hand column.
+You can obtain information about Reporting Tasks by clicking the "View Details", "Usage", "Comments" and "Alerts" buttons in the left-hand column.
 
 image:reporting-tasks-info-buttons.png["Reporting Tasks Information Buttons"]
 

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

@@ -868,9 +868,14 @@
             // always include a button to view the usage
             var markup = '<div title="Usage" class="pointer controller-service-usage fa fa-book"></div>';
 
+            var hasComments = !nfCommon.isBlank(dataContext.component.comments);
             var hasErrors = !nfCommon.isEmpty(dataContext.component.validationErrors);
             var hasBulletins = !nfCommon.isEmpty(dataContext.bulletins);
 
+            if (hasComments) {
+            	markup += '<div class="pointer has-comments fa fa-comment"></div>';
+            }
+
             if (hasErrors) {
                 markup += '<div class="pointer has-errors fa fa-warning"></div>';
             }
@@ -879,7 +884,7 @@
                 markup += '<div class="has-bulletins fa fa-sticky-note-o"></div>';
             }
 
-            if (hasErrors || hasBulletins) {
+            if (hasComments || hasErrors || hasBulletins) {
                 markup += '<span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.id) + '</span>';
             }
 
@@ -1157,6 +1162,36 @@
 
         // hold onto an instance of the grid
         serviceTable.data('gridInstance', controllerServicesGrid).on('mouseenter', 'div.slick-cell', function (e) {
+            var commentsIcon = $(this).find('div.has-comments');
+            if (commentsIcon.length && !commentsIcon.data('qtip')) {
+                var serviceId = $(this).find('span.row-id').text();
+
+                // get the service item
+                var controllerServiceEntity = controllerServicesData.getItemById(serviceId);
+
+                // format the tooltip
+                var comments = nfCommon.escapeHtml(controllerServiceEntity.component.comments);
+                var tooltip = nfCommon.formatNewLines(comments);
+
+                // show the tooltip
+                if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                    commentsIcon.qtip($.extend({},
+                        nfCommon.config.tooltipConfig,
+                        {
+                            content: tooltip,
+                            position: {
+                                target: 'mouse',
+                                viewport: $('#shell-container'),
+                                adjust: {
+                                    x: 8,
+                                    y: 8,
+                                    method: 'flipinvert flipinvert'
+                                }
+                            }
+                        }));
+                }
+            }
+
             var errorIcon = $(this).find('div.has-errors');
             if (errorIcon.length && !errorIcon.data('qtip')) {
                 var serviceId = $(this).find('span.row-id').text();
@@ -1241,6 +1276,7 @@
                 }, service));
             });
 
+            nfCommon.cleanUpTooltips(serviceTable, 'div.has-comments');
             nfCommon.cleanUpTooltips(serviceTable, 'div.has-errors');
             nfCommon.cleanUpTooltips(serviceTable, 'div.has-bulletins');
 

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

@@ -1594,9 +1594,14 @@
             // always include a button to view the usage
             markup += '<div title="Usage" class="pointer reporting-task-usage fa fa-book"></div>';
 
+            var hasComments = !nfCommon.isBlank(dataContext.component.comments);
             var hasErrors = !nfCommon.isEmpty(dataContext.component.validationErrors);
             var hasBulletins = !nfCommon.isEmpty(dataContext.bulletins);
 
+            if (hasComments) {
+            	markup += '<div class="pointer has-comments fa fa-comment"></div>';
+            }
+
             if (hasErrors) {
                 markup += '<div class="pointer has-errors fa fa-warning" ></div>';
             }
@@ -1605,7 +1610,7 @@
                 markup += '<div class="has-bulletins fa fa-sticky-note-o"></div>';
             }
 
-            if (hasErrors || hasBulletins) {
+            if (hasComments || hasErrors || hasBulletins) {
                 markup += '<span class="hidden row-id">' + nfCommon.escapeHtml(dataContext.component.id) + '</span>';
             }
 
@@ -1698,8 +1703,8 @@
                 resizable: false,
                 formatter: moreReportingTaskDetails,
                 sortable: true,
-                width: 90,
-                maxWidth: 90,
+                width: 100,
+                maxWidth: 100,
                 toolTip: 'Sorts based on presence of bulletins'
             },
             {
@@ -1829,6 +1834,36 @@
 
         // hold onto an instance of the grid
         $('#reporting-tasks-table').data('gridInstance', reportingTasksGrid).on('mouseenter', 'div.slick-cell', function (e) {
+            var commentsIcon = $(this).find('div.has-comments');
+            if (commentsIcon.length && !commentsIcon.data('qtip')) {
+                 var taskId = $(this).find('span.row-id').text();
+
+                // get the task item
+                var reportingTaskEntity = reportingTasksData.getItemById(taskId);
+
+                // format the tooltip
+                var comments = nfCommon.escapeHtml(reportingTaskEntity.component.comments);
+                var tooltip = nfCommon.formatNewLines(comments);
+
+                // show the tooltip
+                if (nfCommon.isDefinedAndNotNull(tooltip)) {
+                    commentsIcon.qtip($.extend({},
+                        nfCommon.config.tooltipConfig,
+                        {
+                            content: tooltip,
+                            position: {
+                                target: 'mouse',
+                                viewport: $('#shell-container'),
+                                adjust: {
+                                    x: 8,
+                                    y: 8,
+                                    method: 'flipinvert flipinvert'
+                                }
+                            }
+                        }));
+                }
+            }
+
             var errorIcon = $(this).find('div.has-errors');
             if (errorIcon.length && !errorIcon.data('qtip')) {
                 var taskId = $(this).find('span.row-id').text();
@@ -2543,6 +2578,7 @@
             });
 
             var reportingTasksElement = $('#reporting-tasks-table');
+            nfCommon.cleanUpTooltips(reportingTasksElement, 'div.has-comments');
             nfCommon.cleanUpTooltips(reportingTasksElement, 'div.has-errors');
             nfCommon.cleanUpTooltips(reportingTasksElement, 'div.has-bulletins');
 

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

@@ -1083,6 +1083,21 @@
             };
         }()),
 
+        /**
+         * Formats the specified value, so new lines are represented as \<br\>
+         * If value is null or not defined an empty string is returned
+         *
+         * @argument {string} value     string value
+         * @returns {string}
+         */
+        formatNewLines: function (value) {
+            if (nfCommon.isDefinedAndNotNull(value)) {
+            	return value.replaceAll(/[\n]/g, "<br>");
+            } else {
+                return '';
+            }
+        },
+
         /**
          * Determines if the specified property is sensitive.
          *