NIFI-1428: - Adding a button to link from a flowfile in a queue listing to a provenance search for that flowfile.

Signed-off-by: Aldrin Piri <aldrin@apache.org>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp

@@ -18,6 +18,7 @@
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <div id="provenance">
     <span id="intial-component-query" class="hidden"><c:out value="${param.componentId}"/></span>
+    <span id="intial-flowfile-query" class="hidden"><c:out value="${param.flowFileUuid}"/></span>
     <span id="nifi-controller-uri" class="hidden"></span>
     <span id="nifi-content-viewer-url" class="hidden"></span>
     <div id="provenance-header-and-filter">

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

@@ -96,6 +96,14 @@
     overflow: hidden;
 }
 
+div.provenance-icon {
+    background-image: url(../images/iconProvenance.png);
+    background-position: top left;
+    background-size: cover;
+    width: 20px;
+    height: 20px;
+}
+
 /* queue listing table */
 
 #queue-listing-message {

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

@@ -459,7 +459,7 @@ nf.QueueListing = (function () {
             // function for formatting durations
             var durationFormatter = function (row, cell, value, columnDef, dataContext) {
                 return nf.Common.formatDuration(value);
-            }
+            };
 
             // function for formatting penalization
             var penalizedFormatter = function (row, cell, value, columnDef, dataContext) {
@@ -470,7 +470,7 @@ nf.QueueListing = (function () {
                 }
 
                 return markup;
-            }
+            };
 
             // initialize the queue listing table
             var queueListingColumns = [
@@ -489,6 +489,16 @@ nf.QueueListing = (function () {
                 queueListingColumns.push({id: 'clusterNodeAddress', name: 'Node', field: 'clusterNodeAddress', sortable: false, resizable: true});
             }
 
+            // add an actions column when the user can access provenance
+            if (nf.Common.canAccessProvenance()) {
+                // function for formatting actions
+                var actionsFormatter = function () {
+                    return '<div title="Provenance" class="pointer provenance-icon view-provenance"></div>';
+                };
+
+                queueListingColumns.push({id: 'actions', name: '&nbsp;', resizable: false, formatter: actionsFormatter, sortable: false, width: 50, maxWidth: 50});
+            }
+
             var queueListingOptions = {
                 forceFitColumns: true,
                 enableTextSelectionOnCells: true,
@@ -520,6 +530,16 @@ nf.QueueListing = (function () {
                     if (target.hasClass('show-flowfile-details')) {
                         showFlowFileDetails(item);
                     }
+                } else if (queueListingGrid.getColumns()[args.cell].id === 'actions') {
+                    if (target.hasClass('view-provenance')) {
+                        // close the settings dialog
+                        $('#shell-close-button').click();
+
+                        // open the provenance page with the specified component
+                        nf.Shell.showPage('provenance?' + $.param({
+                            flowFileUuid: item.uuid
+                        }));
+                    }
                 }
             });
 

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

@@ -431,9 +431,11 @@ nf.ProvenanceTable = (function () {
         $('<div class="searchable-field-value"><input type="text" class="searchable-field-input"/></div>').appendTo(searchableField);
         $('<div class="clear"></div>').appendTo(searchableField);
 
-        // make the component id accessible for populating
+        // make the searchable accessible for populating
         if (field.id === 'ProcessorID') {
             searchableField.find('input').addClass('searchable-component-id');
+        } else if (field.id === 'FlowFileUUID') {
+            searchableField.find('input').addClass('searchable-flowfile-uuid');
         }
 
         // ensure the no searchable fields message is hidden
@@ -997,7 +999,7 @@ nf.ProvenanceTable = (function () {
          * query. If not query is specified or it is empty, the most recent entries will
          * be returned.
          * 
-         * @param {type} query
+         * @param {object} query
          */
         loadProvenanceTable: function (query) {
             var provenanceProgress = $('#provenance-percent-complete');

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

@@ -180,7 +180,7 @@ nf.Provenance = (function () {
             $.when(loadControllerConfig(), loadAuthorities(), detectedCluster()).done(function () {
                 // create the provenance table
                 nf.ProvenanceTable.init(isClustered).done(function () {
-                    var search;
+                    var search = {};
                     
                     // look for a processor id in the query search
                     var initialComponentId = $('#intial-component-query').text();
@@ -189,9 +189,21 @@ nf.Provenance = (function () {
                         $('input.searchable-component-id').val(initialComponentId);
                         
                         // build the search criteria
-                        search = {
+                        search = $.extend(search, {
                             'search[ProcessorID]': initialComponentId
-                        };
+                        });
+                    }
+
+                    // look for a flowfile uuid in the query search
+                    var initialFlowFileUuid = $('#intial-flowfile-query').text();
+                    if ($.trim(initialFlowFileUuid) !== '') {
+                        // populate initial search component
+                        $('input.searchable-flowfile-uuid').val(initialFlowFileUuid);
+
+                        // build the search criteria
+                        search = $.extend(search, {
+                            'search[FlowFileUUID]': initialFlowFileUuid
+                        });
                     }
 
                     // load the provenance table