NIFI-820: - Creating a context menu item for accessing provenance directly for a selected component.
Project: http://git-wip-us.apache.org/repos/asf/nifi/repo Commit: http://git-wip-us.apache.org/repos/asf/nifi/commit/f8c3377c Tree: http://git-wip-us.apache.org/repos/asf/nifi/tree/f8c3377c Diff: http://git-wip-us.apache.org/repos/asf/nifi/diff/f8c3377c Branch: refs/heads/NIFI-655 Commit: f8c3377c84189c4688abc7186a99fea44be501f0 Parents: 26edab3 Author: Matt Gilman <matt.c.gil...@gmail.com> Authored: Mon Oct 26 10:16:01 2015 -0400 Committer: Matt Gilman <matt.c.gil...@gmail.com> Committed: Mon Oct 26 10:16:01 2015 -0400 ---------------------------------------------------------------------- .../partials/provenance/provenance-content.jsp | 2 + .../nifi-web-ui/src/main/webapp/css/main.css | 7 ++- .../src/main/webapp/js/nf/canvas/nf-actions.js | 16 ++++++ .../main/webapp/js/nf/canvas/nf-context-menu.js | 23 ++++++++- .../js/nf/provenance/nf-provenance-table.js | 54 +++++++++++++------- .../webapp/js/nf/provenance/nf-provenance.js | 16 +++++- 6 files changed, 96 insertions(+), 22 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/nifi/blob/f8c3377c/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp index 035e8d3..8e6a3db 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp @@ -15,7 +15,9 @@ limitations under the License. --%> <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %> +<%@ 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="nifi-controller-uri" class="hidden"></span> <span id="nifi-content-viewer-url" class="hidden"></span> <div id="provenance-header-and-filter"> http://git-wip-us.apache.org/repos/asf/nifi/blob/f8c3377c/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css index aa12602..95ee641 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css @@ -57,10 +57,11 @@ div.context-menu-item.hover { color: #027fd2; } -img.context-menu-item-img { +.context-menu-item-img { float: left; width: 16px; height: 16px; + background-size: cover; } div.context-menu-item-text { @@ -72,6 +73,10 @@ div.context-menu-item-text { font-size: 11px; } +div.context-menu-provenance { + background-position: top left; +} + /* General Styles */ http://git-wip-us.apache.org/repos/asf/nifi/blob/f8c3377c/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js index c6ef75f..fbe5cec 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js @@ -427,6 +427,22 @@ nf.Actions = (function () { }, /** + * Opens provenance with the component in the specified selection. + * + * @argument {selection} selection The selection + */ + openProvenance: function (selection) { + if (selection.size() === 1) { + var selectionData = selection.datum(); + + // open the provenance page with the specified component + nf.Shell.showPage('provenance?' + $.param({ + componentId: selectionData.component.id + })); + } + }, + + /** * Starts the components in the specified selection. * * @argument {selection} selection The selection http://git-wip-us.apache.org/repos/asf/nifi/blob/f8c3377c/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js index e652dd4..98f7a57 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js @@ -246,6 +246,20 @@ nf.ContextMenu = (function () { }; /** + * Determines whether the current selection could have provenance. + * + * @param {selection} selection + */ + var canAccessProvenance = function (selection) { + // ensure the correct number of components are selected + if (selection.size() !== 1) { + return false; + } + + return !nf.CanvasUtils.isConnection(selection) && !nf.CanvasUtils.isProcessGroup(selection) && !nf.CanvasUtils.isRemoteProcessGroup(selection) && nf.Common.canAccessProvenance(); + }; + + /** * Determines whether the current selection is a remote process group. * * @param {selection} selection @@ -313,7 +327,12 @@ nf.ContextMenu = (function () { $(this).removeClass('hover'); }).appendTo(contextMenu); - $('<img class="context-menu-item-img"></img>').attr('src', item['img']).appendTo(menuItem); + // create the img and conditionally add the style + var img = $('<div class="context-menu-item-img"></div>').css('background-image', 'url(' + item['img'] + ')').appendTo(menuItem); + if (nf.Common.isDefinedAndNotNull(item['imgStyle'])) { + img.addClass(item['imgStyle']); + } + $('<div class="context-menu-item-text"></div>').text(item['text']).appendTo(menuItem); $('<div class="clear"></div>').appendTo(menuItem); } @@ -360,6 +379,7 @@ nf.ContextMenu = (function () { {condition: canStartTransmission, menuItem: {img: 'images/iconTransmissionActive.png', text: 'Enable transmission', action: 'enableTransmission'}}, {condition: canStopTransmission, menuItem: {img: 'images/iconTransmissionInactive.png', text: 'Disable transmission', action: 'disableTransmission'}}, {condition: supportsStats, menuItem: {img: 'images/iconChart.png', text: 'Stats', action: 'showStats'}}, + {condition: canAccessProvenance, menuItem: {img: 'images/iconProvenance.png', imgStyle: 'context-menu-provenance', text: 'Data provenance', action: 'openProvenance'}}, {condition: canMoveToFront, menuItem: {img: 'images/iconToFront.png', text: 'Bring to front', action: 'toFront'}}, {condition: isConnection, menuItem: {img: 'images/iconGoTo.png', text: 'Go to source', action: 'showSource'}}, {condition: isConnection, menuItem: {img: 'images/iconGoTo.png', text: 'Go to destination', action: 'showDestination'}}, @@ -416,6 +436,7 @@ nf.ContextMenu = (function () { addMenuItem(contextMenu, { img: menuItem.img, + imgStyle: menuItem.imgStyle, text: menuItem.text, click: function (evt) { executeAction(menuItem.action, selection, evt); http://git-wip-us.apache.org/repos/asf/nifi/blob/f8c3377c/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js index 499925d..1e5550c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js @@ -258,19 +258,6 @@ nf.ProvenanceTable = (function () { * @param {boolean} isClustered Whether or not this NiFi clustered */ var initSearchDialog = function (isClustered) { - $.ajax({ - type: 'GET', - url: config.urls.searchOptions, - dataType: 'json' - }).done(function (response) { - var provenanceOptions = response.provenanceOptions; - - // load all searchable fields - $.each(provenanceOptions.searchableFields, function (_, field) { - appendSearchableField(field); - }); - }); - // configure the start and end date picker $('#provenance-search-start-date, #provenance-search-end-date').datepicker({ showAnim: '', @@ -402,6 +389,19 @@ nf.ProvenanceTable = (function () { } }] }); + + return $.ajax({ + type: 'GET', + url: config.urls.searchOptions, + dataType: 'json' + }).done(function (response) { + var provenanceOptions = response.provenanceOptions; + + // load all searchable fields + $.each(provenanceOptions.searchableFields, function (_, field) { + appendSearchableField(field); + }); + }); }; /** @@ -441,6 +441,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 + if (field.id === 'ProcessorID') { + searchableField.find('input').addClass('searchable-component-id'); + } + // ensure the no searchable fields message is hidden $('#no-searchable-fields').hide(); }; @@ -949,12 +954,23 @@ nf.ProvenanceTable = (function () { * @param {boolean} isClustered Whether or not this instance is clustered */ init: function (isClustered) { - return loadLineageCapabilities().done(function () { - initDetailsDialog(); - initProvenanceQueryDialog(); - initSearchDialog(isClustered); - initProvenanceTable(isClustered); - }).fail(nf.Common.handleAjaxError); + return $.Deferred(function (deferred) { + // handles init failure + var failure = function (xhr, status, error) { + deferred.reject(); + nf.Common.handleAjaxError(xhr, status, error); + }; + + // load the lineage capabilities + loadLineageCapabilities().done(function () { + initDetailsDialog(); + initProvenanceQueryDialog(); + initProvenanceTable(isClustered); + initSearchDialog(isClustered).done(function () { + deferred.resolve(); + }).fail(failure); + }).fail(failure); + }).promise(); }, /** http://git-wip-us.apache.org/repos/asf/nifi/blob/f8c3377c/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js index df1a682..0edbe08 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js @@ -178,8 +178,22 @@ nf.Provenance = (function () { $.when(loadControllerConfig(), loadAuthorities(), detectedCluster()).done(function () { // create the provenance table nf.ProvenanceTable.init(isClustered).done(function () { + var search; + + // look for a processor id in the query search + var initialComponentId = $('#intial-component-query').text(); + if ($.trim(initialComponentId) !== '') { + // populate initial search component + $('input.searchable-component-id').val(initialComponentId); + + // build the search criteria + search = { + 'search[ProcessorID]': initialComponentId + }; + } + // load the provenance table - nf.ProvenanceTable.loadProvenanceTable(); + nf.ProvenanceTable.loadProvenanceTable(search); // once the table is initialized, finish initializing the page initializeProvenancePage().done(function () {
