Repository: nifi Updated Branches: refs/heads/master 8c011d91e -> 5d63ba6a1
NIFI-2303 This closes #749. Update lineage styles Project: http://git-wip-us.apache.org/repos/asf/nifi/repo Commit: http://git-wip-us.apache.org/repos/asf/nifi/commit/5d63ba6a Tree: http://git-wip-us.apache.org/repos/asf/nifi/tree/5d63ba6a Diff: http://git-wip-us.apache.org/repos/asf/nifi/diff/5d63ba6a Branch: refs/heads/master Commit: 5d63ba6a19289889f81559b7929bee0b62dae68c Parents: 8c011d9 Author: Scott Aslan <jas...@hortonworks.com> Authored: Mon Aug 1 13:11:54 2016 -0400 Committer: joewitt <joew...@apache.org> Committed: Mon Aug 1 13:30:58 2016 -0400 ---------------------------------------------------------------------- .../src/main/webapp/WEB-INF/pages/canvas.jsp | 2 +- .../partials/provenance/provenance-content.jsp | 4 +- .../provenance/provenance-search-dialog.jsp | 2 +- .../src/main/webapp/css/common-ui.css | 54 +++++ .../nifi-web-ui/src/main/webapp/css/main.css | 52 ----- .../src/main/webapp/css/provenance.css | 132 +++++------ .../js/nf/provenance/nf-provenance-lineage.js | 230 ++++++++----------- .../js/nf/provenance/nf-provenance-table.js | 59 +++-- .../webapp/js/nf/provenance/nf-provenance.js | 63 ++--- 9 files changed, 284 insertions(+), 314 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/nifi/blob/5d63ba6a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/canvas.jsp ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/canvas.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/canvas.jsp index c6662ca..752e82a 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/canvas.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/canvas.jsp @@ -142,7 +142,7 @@ <jsp:include page="/WEB-INF/partials/canvas/queue-listing.jsp"/> <jsp:include page="/WEB-INF/partials/canvas/component-state-dialog.jsp"/> <jsp:include page="/WEB-INF/partials/connection-details.jsp"/> - <div id="context-menu" class="unselectable"></div> + <div id="context-menu" class="context-menu unselectable"></div> <span id="nifi-content-viewer-url" class="hidden"></span> </body> </html> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi/blob/5d63ba6a/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 ba86185..10bf887 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 @@ -57,9 +57,9 @@ </div> <div id="provenance-lineage-close-container"> <div id="provenance-lineage-downloader" class="hidden" title="Download"></div> - <div id="provenance-lineage-closer" title="Close"></div> + <div id="provenance-lineage-closer" class="fa fa-long-arrow-left" title="Go back to event list"></div> </div> - <div id="provenance-lineage-context-menu"></div> + <div id="provenance-lineage-context-menu" class="context-menu"></div> <div id="provenance-lineage-slider-container"> <div id="provenance-lineage-slider"></div> <div id="event-timeline"> http://git-wip-us.apache.org/repos/asf/nifi/blob/5d63ba6a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-search-dialog.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-search-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-search-dialog.jsp index 0430518..565d016 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-search-dialog.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-search-dialog.jsp @@ -18,7 +18,7 @@ <div id="provenance-search-dialog" class="hidden medium-dialog"> <div class="dialog-content"> <div class="setting"> - <div class="setting-name" style="padding-top:10px;">Fields</div> + <div class="setting-name">Fields</div> <div class="setting-field"> <div id="searchable-fields-container"> <div id="no-searchable-fields" class="unset">No searchable fields have been configured.</div> http://git-wip-us.apache.org/repos/asf/nifi/blob/5d63ba6a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css index a0a3cab..3a5c793 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css @@ -462,6 +462,60 @@ div.nifi-tooltip { border-bottom: 1px solid #d0dbe0; } +/*context menu */ + +.context-menu { + display: none; + position: absolute; + z-index: 10006; + font-size: 13px; + padding:3px 0; + background-color:rgba(249,250,251,0.97); /*tint base-color 96%*/ + border:1px solid #004849; /*link-color*/ + box-shadow: 0 3px 6px rgba(0,0,0,0.3); + width: 215px; + max-height: inherit; + color:#004849 +} + +div.context-menu-item { + cursor: pointer; + height: 20px; + padding-top: 4px; + padding-left: 4px; +} + +div.context-menu-item.hover { + background-color:#C7D2D7; /*tint base-color 60%*/ + box-shadow:0 1px 1px rgba(0,0,0,0.15); +} + +.context-menu-item-img { + float: left; + width: 16px; + height: 16px; + background-size: cover; +} + +.context-menu-item-img.fa{ + position: relative; + top: 2px; + left: 2px; +} + +.context-menu-item-img.icon { + position: relative; + top: 1px; + left: 3px; +} + +div.context-menu-item-text { + margin-left: 4px; + line-height: 16px; + float: left; + color: #262626; +} + /* progress bars */ md-progress-linear > div { http://git-wip-us.apache.org/repos/asf/nifi/blob/5d63ba6a/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 aa8de53..782862b 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 @@ -38,58 +38,6 @@ body { background: transparent url(../images/nifi-drop-splash.svg) no-repeat center center; } -#context-menu { - display: none; - position: absolute; - z-index: 10006; - font-size: 13px; - padding:3px 0; - background-color:rgba(249,250,251,0.97); /*tint base-color 96%*/ - border:1px solid #004849; /*link-color*/ - box-shadow: 0 3px 6px rgba(0,0,0,0.3); - width: 215px; - max-height: inherit; - color:#004849 -} - -div.context-menu-item { - cursor: pointer; - height: 20px; - padding-top: 4px; - padding-left: 4px; -} - -div.context-menu-item.hover { - background-color:#C7D2D7; /*tint base-color 60%*/ - box-shadow:0 1px 1px rgba(0,0,0,0.15); -} - -.context-menu-item-img { - float: left; - width: 16px; - height: 16px; - background-size: cover; -} - -.context-menu-item-img.fa{ - position: relative; - top: 2px; - left: 2px; -} - -.context-menu-item-img.icon { - position: relative; - top: 1px; - left: 3px; -} - -div.context-menu-item-text { - margin-left: 4px; - line-height: 16px; - float: left; - color: #262626; -} - div.context-menu-provenance { background-position: top left; } http://git-wip-us.apache.org/repos/asf/nifi/blob/5d63ba6a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css index a0d5ef6..3229c4c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css @@ -25,7 +25,6 @@ left: 20px; right: 20px; overflow: auto; - height: 100%; } #provenance-header-and-filter{ @@ -111,7 +110,8 @@ input.provenance-filter-list { #provenance-search-container { float: right; position: relative; - top: 42px; + top: 38px; + height: 0px; } #provenance-search-button { @@ -340,7 +340,7 @@ div.content-detail-value { position: absolute; top: 88px; left: 0px; - bottom: 48px; + bottom: 47px; right: 0px; overflow: hidden; background-color: #fff; @@ -350,7 +350,8 @@ div.content-detail-value { /* provenance lineage */ #provenance-lineage { - border: 1px solid #aaa; + border: 1px solid #e5ebed; + background-color: #f9fafb; } #provenance-lineage-loading-container { @@ -365,6 +366,11 @@ div.content-detail-value { width: 16px; } +#provenance-lineage-container { + height: 100%; + width: 100%; +} + #provenance-lineage-close-container { position: absolute; right: 1px; @@ -384,8 +390,10 @@ div.content-detail-value { float: left; height: 16px; width: 16px; - background: url("../images/iconClose.png") no-repeat scroll left center transparent; + font-size: 16px; + color: #004849; cursor: pointer; + margin-right: 5px; } #provenance-lineage-slider-container { @@ -411,12 +419,13 @@ div.content-detail-value { } #event-timeline { - margin-top: 8px; - color: #9F6000; - font-weight: 500; + margin-top: 4px; + color: #775351; + line-height: normal; font-family: 'Roboto'; font-style: normal; - line-height: normal; + font-weight: 500; + font-size: 13px; } #event-time { @@ -427,69 +436,55 @@ div.content-detail-value { float: left; } -#provenance-lineage-context-menu { - display: none; - border: 1px solid #000; - width: 140px; - position: absolute; - background-color: #fff; - padding: 3px 0; -} - -div.lineage-view-event { - background: url("../images/iconDetails.png") no-repeat scroll center center transparent; +div.lineage-view-event:before { + font-family: FontAwesome; + content: "\f05a"; + font-size: 16px; + color: #004849; } -div.lineage-view-parents { - background: url("../images/iconExpandParents.png") no-repeat scroll center center transparent; +div.lineage-view-parents:before { + font-family: FontAwesome; + content: "\f1e5"; + font-size: 16px; + color: #004849; } -div.lineage-collapse-parents { - background: url("../images/iconCollapseParents.png") no-repeat scroll center center transparent; +div.lineage-collapse-parents:before { + font-family: FontAwesome; + content: "\f147"; + font-size: 16px; + color: #004849; } -div.lineage-view-children { - background: url("../images/iconExpandChildren.png") no-repeat scroll center center transparent; -} - -div.lineage-collapse-children { - background: url("../images/iconCollapseChildren.png") no-repeat scroll center center transparent; -} - -div.provenance-lineage-menu-item { - padding: 3px 6px; - cursor: pointer; +div.lineage-view-children:before { + font-family: FontAwesome; + content: "\f0fe"; + font-size: 16px; + color: #004849; } -div.provenance-lineage-menu-item.hover { - color: #027fd2; -} - -div.provenance-lineage-menu-item-img { - float: left; - width: 16px; - height: 16px; -} - -div.provenance-lineage-menu-item-text { - width: 106px; - margin-left: 6px; - line-height: 16px; - float: left; - font-family: Verdana; - font-size: 8pt; +div.lineage-collapse-children:before { + font-family: FontAwesome; + content: "\f146"; + font-size: 16px; + color: #004849; } path.link.selected { - stroke: #FFCC00; + stroke: #ba554a; } g.event circle.selected { - fill: #FFCC00; + fill: #ba554a; } text.event-type { cursor: pointer; + font-family: Roboto; + font-size: 11px; + font-style: normal; + font-weight: normal; } text.event-type.expand-parents, text.event-type.expand-children { @@ -500,32 +495,15 @@ text.event-type.expand-parents, text.event-type.expand-children { } g.flowfile circle.context, g.event circle.context { - stroke: #b70303; + stroke: #004849; stroke-width: 1.5px; } -path.flowfile-icon-base { - pointer-events: none; -} - -path.flowfile-icon-base-outline { - pointer-events: none; -} - -path.flowfile-icon-mid { - pointer-events: none; -} - -path.flowfile-icon-mid-outline { - pointer-events: none; -} - -path.flowfile-icon-arc { - pointer-events: none; -} - -path.flowfile-icon-top { - pointer-events: none; +.flowfile-icon { + font-family: flowfont; + content: "\e808"; + font-size: 16px; + color: #ad9897; } #child-flowfile-count { http://git-wip-us.apache.org/repos/asf/nifi/blob/5d63ba6a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.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-lineage.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js index a263ea0..8287bff 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js @@ -17,7 +17,8 @@ /* global nf, d3 */ -nf.ProvenanceLineage = (function () { +nf.ng.ProvenanceLineage = function () { + 'use strict'; /** * Configuration object used to hold a number of configuration items. @@ -53,15 +54,15 @@ nf.ProvenanceLineage = (function () { $.each(items, function (_, item) { if (typeof item.click === 'function') { - var menuItem = $('<div class="provenance-lineage-menu-item"></div>').on('click', item.click).on('mouseenter', function () { + var menuItem = $('<div class="context-menu-item"></div>').on('click', item.click).on('mouseenter', function () { $(this).addClass('hover'); }).on('mouseleave', function () { $(this).removeClass('hover'); }).appendTo(contextMenu); // add the img and the text - $('<div class="provenance-lineage-menu-item-img"></div>').addClass(item['class']).appendTo(menuItem); - $('<div class="provenance-lineage-menu-item-text"></div>').text(item['text']).appendTo(menuItem); + $('<div class="context-menu-item-img"></div>').addClass(item['class']).appendTo(menuItem); + $('<div class="context-menu-item-text"></div>').text(item['text']).appendTo(menuItem); $('<div class="clear"></div>').appendTo(menuItem); } }); @@ -73,9 +74,9 @@ nf.ProvenanceLineage = (function () { * @param {string} eventId * @param {string} clusterNodeId The id of the node in the cluster where this event/flowfile originated */ - var showEventDetails = function (eventId, clusterNodeId) { + var showEventDetails = function (eventId, clusterNodeId, provenanceTableCtrl) { getEventDetails(eventId, clusterNodeId).done(function (response) { - nf.ProvenanceTable.showEventDetails(response.provenanceEvent); + provenanceTableCtrl.showEventDetails(response.provenanceEvent); }); }; @@ -176,7 +177,7 @@ nf.ProvenanceLineage = (function () { * @param {integer} eventId * @param {string} clusterNodeId The id of the node in the cluster where this event/flowfile originated */ - var renderLineage = function (lineageResults, eventId, clusterNodeId) { + var renderLineage = function (lineageResults, eventId, clusterNodeId, provenanceTableCtrl) { // get the container var lineageContainer = $('#provenance-lineage'); var width = lineageContainer.width(); @@ -227,7 +228,7 @@ nf.ProvenanceLineage = (function () { immediateSet.remove(d); }); - // convert the children to an array to ensure consistent + // convert the children to an array to ensure consistent // order when performing index of checks below var children = childSet.values().sort(d3.descending); @@ -375,7 +376,7 @@ nf.ProvenanceLineage = (function () { }); // adjust the x positioning if necessary to avoid positioning on top - // of one another, only need to consider the x coordinate since the + // of one another, only need to consider the x coordinate since the // y coordinate will be the same for each node on this row for (var i = 0; i < sortedImmediate.length - 1; i++) { var first = nodeLookup.get(sortedImmediate[i]); @@ -422,7 +423,7 @@ nf.ProvenanceLineage = (function () { } }; - var addLineage = function (nodes, links) { + var addLineage = function (nodes, links, provenanceTableCtrl) { // add the new nodes $.each(nodes, function (_, node) { if (nodeLookup.has(node.id)) { @@ -455,10 +456,10 @@ nf.ProvenanceLineage = (function () { linkLookup.set(linkObj.id, linkObj); }); - refresh(); + refresh(provenanceTableCtrl); }; - var refresh = function () { + var refresh = function (provenanceTableCtrl) { // consider all nodes as starting points var startNodes = d3.set(nodeLookup.keys()); @@ -495,14 +496,14 @@ nf.ProvenanceLineage = (function () { slider.slider('option', 'min', minMillis).slider('option', 'max', maxMillis).slider('option', 'step', step).slider('value', maxMillis); // populate the event timeline - $('#event-time').text(formatEventTime(maxMillis)); + $('#event-time').text(formatEventTime(maxMillis, provenanceTableCtrl)); // update the layout - update(); + update(provenanceTableCtrl); }; // formats the specified millis - var formatEventTime = function (millis) { + var formatEventTime = function (millis, provenanceTableCtrl) { // get the current user time to properly convert the server time var now = new Date(); @@ -510,7 +511,7 @@ nf.ProvenanceLineage = (function () { var userTimeOffset = now.getTimezoneOffset() * 60 * 1000; // create the proper date by adjusting by the offsets - var date = new Date(millis + userTimeOffset + nf.ProvenanceTable.serverTimeOffset); + var date = new Date(millis + userTimeOffset + provenanceTableCtrl.serverTimeOffset); return nf.Common.formatDateTime(date); }; @@ -530,12 +531,8 @@ nf.ProvenanceLineage = (function () { // build the svg img var svg = d3.select('#provenance-lineage-container').append('svg:svg') - .attr('width', width) - .attr('height', height) - .style({ - 'font-family': 'Verdana, Arial, sans-serif', - 'font-size': '10px' - }) + .attr('width', '100%') + .attr('height', '100%') .call(lineageZoom) .on('dblclick.zoom', null) .on('mousedown', function (d) { @@ -565,7 +562,7 @@ nf.ProvenanceLineage = (function () { .attr({ 'width': '100%', 'height': '100%', - 'fill': '#fff' + 'fill': '#f9fafb' }); svg.append('defs').selectAll('marker') @@ -589,7 +586,7 @@ nf.ProvenanceLineage = (function () { 'orient': 'auto', 'fill': function (d) { if (d.indexOf('SELECTED') >= 0) { - return '#FFCC00'; + return '#ba554a'; } else { return '#000000'; } @@ -643,7 +640,7 @@ nf.ProvenanceLineage = (function () { } // update the event time - $('#event-time').text(formatEventTime(ui.value)); + $('#event-time').text(formatEventTime(ui.value, provenanceTableCtrl)); // update the previous value previousMillis = ui.value; @@ -667,7 +664,7 @@ nf.ProvenanceLineage = (function () { flowfiles.append('circle') .attr({ 'r': 16, - 'fill': '#D4E0E5', + 'fill': '#fff', 'stroke': '#000', 'stroke-width': 1.0 }) @@ -705,87 +702,47 @@ nf.ProvenanceLineage = (function () { 'transform': function (d) { return 'translate(-9,-9)'; } - }); - - // flowfile icon - icon.append('path') - .attr({ - 'd': function (d) { - return 'M0, 2 l8, 0 l0, 8 l8, 0 l0, 8 l-16, 0 z'; - }, - 'class': 'flowfile-icon-base', - 'stroke-width': 0, - 'fill': '#93b2b1' - }); - - icon.append('path') - .attr({ - 'd': function (d) { - return 'M2, 18 a15, 15 0 0 0 13, -8 l1, 0 l0, 8 z'; - }, - 'class': 'flowfile-icon-arc', - 'stroke': '#69878a', - 'stroke-width': .5, - 'fill': '#69878a' - }); - - icon.append('path') - .attr({ - 'd': function (d) { - return 'M0, 2 l8, 0 l0, 8 l8, 0 l0, 8 l-16, 0 z'; - }, - 'class': 'flowfile-icon-base-outline', - 'stroke': '#4f6769', - 'stroke-width': .5, - 'fill': 'none' - }); - - icon.append('path') + }).append('text') .attr({ - 'd': function (d) { - return 'M9, 1 l4, 0 l0, 4 l4, 0 l0, 4 l-8, 0 z'; - }, - 'class': 'flowfile-icon-mid', - 'stroke-width': 0, - 'fill': '#d2e0e5' - }); - - icon.append('path') - .attr({ - 'd': function (d) { - return 'M15, 9 a15, 15 0 0 0 1, -4 l1, 0 l0, 4 z'; - }, - 'class': 'flowfile-icon-arc', - 'stroke': '#69878a', - 'stroke-width': .5, - 'fill': '#69878a' - }); - - icon.append('path') - .attr({ - 'd': function (d) { - return 'M9, 1 l4, 0 l0, 4 l4, 0 l0, 4 l-8, 0 z'; - }, - 'class': 'flowfile-icon-mid-outline', - 'stroke': '#4f6769', - 'stroke-width': .5, - 'fill': 'none' - }); + 'font-family': 'flowfont', + 'font-size': '18px', + 'fill': '#ad9897', + 'transform': function (d) { + return 'translate(0,15)'; + } + }) + .on('mousedown', function (d) { + // empty context menu if necessary + $('#provenance-lineage-context-menu').hide().empty(); - icon.append('path') - .attr({ - 'd': function (d) { - return 'M14, 0 l4, 0 l0, 4 l-4, 0 z'; - }, - 'class': 'flowfile-icon-top', - 'stroke': '#4f6769', - 'stroke-width': .5, - 'fill': '#fff' - }); + // prevents the drag event when something other than the + // left button is clicked + if (d3.event.button !== 0) { + d3.event.stopPropagation(); + } + }, true) + .on('mouseover', function (d) { + links.filter(function (linkDatum) { + return d.id === linkDatum.flowFileUuid; + }) + .classed('selected', true) + .attr('marker-end', function (d) { + return 'url(#' + d.target.type + '-SELECTED)'; + }); + }) + .on('mouseout', function (d) { + links.filter(function (linkDatum) { + return d.id === linkDatum.flowFileUuid; + }).classed('selected', false) + .attr('marker-end', function (d) { + return 'url(#' + d.target.type + ')'; + }); + }) + .text(function(d) { return '\ue808' }); }; // renders event nodes - var renderEvent = function (events) { + var renderEvent = function (events, provenanceTableCtrl) { events .classed('event', true) .append('circle') @@ -794,7 +751,7 @@ nf.ProvenanceLineage = (function () { }) .attr({ 'r': 8, - 'fill': '#527991', + 'fill': '#aabbc3', 'stroke': '#000', 'stroke-width': 1.0, 'id': function (d) { @@ -813,7 +770,7 @@ nf.ProvenanceLineage = (function () { 'class': 'lineage-view-event', 'text': 'View details', 'click': function () { - showEventDetails(d.id, clusterNodeId); + showEventDetails(d.id, clusterNodeId, provenanceTableCtrl); } }]; @@ -823,9 +780,9 @@ nf.ProvenanceLineage = (function () { var expandLineage = function (lineageRequest) { var lineageProgress = $('#lineage-percent-complete'); - // add support to cancel outstanding requests - when the button is pressed we + // add support to cancel outstanding requests - when the button is pressed we // could be in one of two stages, 1) waiting to GET the status or 2) - // in the process of GETting the status. Handle both cases by cancelling + // in the process of GETting the status. Handle both cases by cancelling // the setTimeout (1) and by setting a flag to indicate that a request has // been request so we can ignore the results (2). @@ -834,7 +791,7 @@ nf.ProvenanceLineage = (function () { var lineageTimer = null; // update the progress bar value - nf.ProvenanceTable.updateProgress(lineageProgress, 0); + provenanceTableCtrl.updateProgress(lineageProgress, 0); // show the 'searching...' dialog $('#lineage-query-dialog').modal('setButtonModel', [{ @@ -903,7 +860,7 @@ nf.ProvenanceLineage = (function () { } // update the precent complete - nf.ProvenanceTable.updateProgress(lineageProgress, lineage.percentCompleted); + provenanceTableCtrl.updateProgress(lineageProgress, lineage.percentCompleted); // process the results if they are finished if (lineage.finished === true) { @@ -930,7 +887,7 @@ nf.ProvenanceLineage = (function () { // calculate the next delay (back off) var backoff = delay * 2; - var nextDelay = backoff > nf.ProvenanceTable.MAX_DELAY ? nf.ProvenanceTable.MAX_DELAY : backoff; + var nextDelay = backoff > provenanceTableCtrl.MAX_DELAY ? provenanceTableCtrl.MAX_DELAY : backoff; // for the lineage pollLineage(nextDelay); @@ -949,11 +906,11 @@ nf.ProvenanceLineage = (function () { // handles updating the lineage graph var renderEventLineage = function (lineageResults) { - addLineage(lineageResults.nodes, lineageResults.links); + addLineage(lineageResults.nodes, lineageResults.links, provenanceTableCtrl); }; // collapses the lineage for the specified event in the specified direction - var collapseLineage = function (eventId) { + var collapseLineage = function (eventId, provenanceTableCtrl) { // get the event in question and collapse in the appropriate direction getEventDetails(eventId, clusterNodeId).done(function (response) { var provenanceEvent = response.provenanceEvent; @@ -1028,7 +985,7 @@ nf.ProvenanceLineage = (function () { collapse(eventUuids); // update the layout - refresh(); + refresh(provenanceTableCtrl); }); }; @@ -1058,7 +1015,7 @@ nf.ProvenanceLineage = (function () { 'text': 'Collapse', 'click': function () { // collapse the children lineage - collapseLineage(d.id); + collapseLineage(d.id, provenanceTableCtrl); } }); } @@ -1112,7 +1069,7 @@ nf.ProvenanceLineage = (function () { }; // updates the ui - var update = function () { + var update = function (provenanceTableCtrl) { // update the node data nodes = nodes.data(nodeLookup.values(), function (d) { return d.id; @@ -1140,7 +1097,7 @@ nf.ProvenanceLineage = (function () { }).call(renderFlowFile); nodesEntered.filter(function (d) { return d.type === 'EVENT'; - }).call(renderEvent); + }).call(renderEvent, provenanceTableCtrl); // update the nodes nodes @@ -1218,10 +1175,15 @@ nf.ProvenanceLineage = (function () { $('#provenance-event-search').hide(); // add the initial lineage - addLineage(lineageResults.nodes, lineageResults.links); + addLineage(lineageResults.nodes, lineageResults.links, provenanceTableCtrl); }; - return { + function ProvenanceLineageCtrl() { + } + + ProvenanceLineageCtrl.prototype = { + constructor: ProvenanceLineageCtrl, + /** * Initializes the lineage graph. */ @@ -1236,6 +1198,9 @@ nf.ProvenanceLineage = (function () { // view the appropriate panel $('#provenance-event-search').show(); $('#provenance-lineage').hide(); + + //reset table size + $('#provenance-table').data('gridInstance').resizeCanvas(); }); // TODO - restore this as necessary when able to download lineage svg entirely client side @@ -1311,12 +1276,12 @@ nf.ProvenanceLineage = (function () { * @param {integer} eventId The id of the event * @param {string} clusterNodeId The id of the node in the cluster where this event/flowfile originated */ - showLineage: function (flowFileUuid, eventId, clusterNodeId) { + showLineage: function (flowFileUuid, eventId, clusterNodeId, provenanceTableCtrl) { var lineageProgress = $('#lineage-percent-complete'); - // add support to cancel outstanding requests - when the button is pressed we + // add support to cancel outstanding requests - when the button is pressed we // could be in one of two stages, 1) waiting to GET the status or 2) - // in the process of GETting the status. Handle both cases by cancelling + // in the process of GETting the status. Handle both cases by cancelling // the setTimeout (1) and by setting a flag to indicate that a request has // been request so we can ignore the results (2). @@ -1332,7 +1297,7 @@ nf.ProvenanceLineage = (function () { }; // update the progress bar value - nf.ProvenanceTable.updateProgress(lineageProgress, 0); + provenanceTableCtrl.updateProgress(lineageProgress, 0); // show the 'searching...' dialog $('#lineage-query-dialog').modal('setButtonModel', [{ @@ -1371,16 +1336,16 @@ nf.ProvenanceLineage = (function () { // polls the server for the status of the lineage, if the lineage is not // done wait nextDelay seconds before trying again - var pollLineage = function (nextDelay) { + var pollLineage = function (nextDelay, provenanceTableCtrl) { getLineage(lineage).done(function (response) { lineage = response.lineage; // process the lineage, if its not done computing wait delay seconds before checking again - processLineage(nextDelay); + processLineage(nextDelay, provenanceTableCtrl); }).fail(closeDialog); }; - var processLineage = function (delay) { + var processLineage = function (delay, provenanceTableCtrl) { // if the request was cancelled just ignore the current response if (cancelled === true) { closeDialog(); @@ -1400,12 +1365,12 @@ nf.ProvenanceLineage = (function () { } // update the precent complete - nf.ProvenanceTable.updateProgress(lineageProgress, lineage.percentCompleted); + provenanceTableCtrl.updateProgress(lineageProgress, lineage.percentCompleted); // process the results if they are finished if (lineage.finished === true) { // render the graph - renderLineage(lineage.results, eventId, clusterNodeId); + renderLineage(lineage.results, eventId, clusterNodeId, provenanceTableCtrl); // close the searching.. dialog closeDialog(); @@ -1417,10 +1382,10 @@ nf.ProvenanceLineage = (function () { // calculate the next delay (back off) var backoff = delay * 2; - var nextDelay = backoff > nf.ProvenanceTable.MAX_DELAY ? nf.ProvenanceTable.MAX_DELAY : backoff; + var nextDelay = backoff > provenanceTableCtrl.MAX_DELAY ? provenanceTableCtrl.MAX_DELAY : backoff; // poll lineage - pollLineage(nextDelay); + pollLineage(nextDelay, provenanceTableCtrl); }, delay * 1000); } }; @@ -1430,8 +1395,11 @@ nf.ProvenanceLineage = (function () { lineage = response.lineage; // process the results, if they are not done wait 1 second before trying again - processLineage(1); + processLineage(1, provenanceTableCtrl); }).fail(closeDialog); } - }; -}()); \ No newline at end of file + } + + var provenanceLineageCtrl = new ProvenanceLineageCtrl(); + return provenanceLineageCtrl; +}; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi/blob/5d63ba6a/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 f914669..c0bdb96 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 @@ -17,7 +17,8 @@ /* global nf, top, Slick */ -nf.ProvenanceTable = (function () { +nf.ng.ProvenanceTable = function (provenanceLineageCtrl) { + 'use strict'; /** * Configuration object used to hold a number of configuration items. @@ -300,7 +301,7 @@ nf.ProvenanceTable = (function () { * * @param {boolean} isClustered Whether or not this NiFi clustered */ - var initSearchDialog = function (isClustered) { + var initSearchDialog = function (isClustered, provenanceTableCtrl) { // configure the start and end date picker $('#provenance-search-start-date, #provenance-search-end-date').datepicker({ showAnim: '', @@ -424,7 +425,7 @@ nf.ProvenanceTable = (function () { search['searchTerms'] = getSearchCriteria(); // reload the table - nf.ProvenanceTable.loadProvenanceTable(search); + provenanceTableCtrl.loadProvenanceTable(search); } } }, @@ -514,7 +515,7 @@ nf.ProvenanceTable = (function () { * * @param {boolean} isClustered Whether or not this instance is clustered */ - var initProvenanceTable = function (isClustered) { + var initProvenanceTable = function (isClustered, provenanceTableCtrl) { // define the function for filtering the list $('#provenance-filter').keyup(function () { applyFilter(); @@ -584,7 +585,7 @@ nf.ProvenanceTable = (function () { cachedQuery = {}; // reload the table - nf.ProvenanceTable.loadProvenanceTable(); + provenanceTableCtrl.loadProvenanceTable(); }); // add hover effect and click handler for opening the dialog @@ -738,13 +739,13 @@ nf.ProvenanceTable = (function () { // determine the desired action if (provenanceGrid.getColumns()[args.cell].id === 'actions') { if (target.hasClass('show-lineage')) { - nf.ProvenanceLineage.showLineage(item.flowFileUuid, item.eventId.toString(), item.clusterNodeId); + provenanceLineageCtrl.showLineage(item.flowFileUuid, item.eventId.toString(), item.clusterNodeId, provenanceTableCtrl); } else if (target.hasClass('go-to')) { goTo(item); } } else if (provenanceGrid.getColumns()[args.cell].id === 'moreDetails') { if (target.hasClass('show-event-details')) { - nf.ProvenanceTable.showEventDetails(item); + provenanceTableCtrl.showEventDetails(item); } } }); @@ -939,7 +940,7 @@ nf.ProvenanceTable = (function () { * * @param {object} provenance */ - var loadProvenanceResults = function (provenance) { + var loadProvenanceResults = function (provenance, provenanceTableCtrl) { var provenanceRequest = provenance.request; var provenanceResults = provenance.results; @@ -963,7 +964,7 @@ nf.ProvenanceTable = (function () { $('.timezone').text(nf.Common.substringAfterLast(provenanceResults.generated, ' ')); // record the server offset - nf.ProvenanceTable.serverTimeOffset = provenanceResults.timeOffset; + provenanceTableCtrl.serverTimeOffset = provenanceResults.timeOffset; // determines if the specified query is blank (no search terms, start or end date) var isBlankQuery = function (query) { @@ -1017,16 +1018,21 @@ nf.ProvenanceTable = (function () { } }; - return { + function ProvenanceTableCtrl() { + /** * The max delay between requests. */ - MAX_DELAY: 4, + this.MAX_DELAY = 4; /** * The server time offset */ - serverTimeOffset: null, + this.serverTimeOffset = null; + } + + ProvenanceTableCtrl.prototype = { + constructor: ProvenanceTableCtrl, /** * Initializes the provenance table. Returns a deferred that will indicate when/if the table has initialized successfully. @@ -1034,6 +1040,7 @@ nf.ProvenanceTable = (function () { * @param {boolean} isClustered Whether or not this instance is clustered */ init: function (isClustered) { + var self = this; return $.Deferred(function (deferred) { // handles init failure var failure = function (xhr, status, error) { @@ -1042,13 +1049,13 @@ nf.ProvenanceTable = (function () { }; // initialize the lineage view - nf.ProvenanceLineage.init(); + provenanceLineageCtrl.init(); // initialize the table view initDetailsDialog(); initProvenanceQueryDialog(); - initProvenanceTable(isClustered); - initSearchDialog(isClustered).done(function () { + initProvenanceTable(isClustered, self); + initSearchDialog(isClustered, self).done(function () { deferred.resolve(); }).fail(failure); }).promise(); @@ -1090,11 +1097,12 @@ nf.ProvenanceTable = (function () { * @param {object} query */ loadProvenanceTable: function (query) { + var self = this; var provenanceProgress = $('#provenance-percent-complete'); - // add support to cancel outstanding requests - when the button is pressed we + // add support to cancel outstanding requests - when the button is pressed we // could be in one of two stages, 1) waiting to GET the status or 2) - // in the process of GETting the status. Handle both cases by cancelling + // in the process of GETting the status. Handle both cases by cancelling // the setTimeout (1) and by setting a flag to indicate that a request has // been request so we can ignore the results (2). @@ -1103,7 +1111,7 @@ nf.ProvenanceTable = (function () { var provenanceTimer = null; // update the progress bar value - nf.ProvenanceTable.updateProgress(provenanceProgress, 0); + self.updateProgress(provenanceProgress, 0); // show the 'searching...' dialog $('#provenance-query-dialog').modal('setButtonModel', [{ @@ -1168,7 +1176,7 @@ nf.ProvenanceTable = (function () { }).fail(closeDialog); }; - // processes the provenance, if the provenance is not done wait delay + // processes the provenance, if the provenance is not done wait delay // before polling again var processProvenanceResponse = function (delay) { // if the request was cancelled just ignore the current response @@ -1178,7 +1186,7 @@ nf.ProvenanceTable = (function () { } // update the percent complete - nf.ProvenanceTable.updateProgress(provenanceProgress, provenance.percentCompleted); + self.updateProgress(provenanceProgress, provenance.percentCompleted); // process the results if they are finished if (provenance.finished === true) { @@ -1192,7 +1200,7 @@ nf.ProvenanceTable = (function () { } // process the results - loadProvenanceResults(provenance); + loadProvenanceResults(provenance, self); // hide the dialog closeDialog(); @@ -1204,7 +1212,7 @@ nf.ProvenanceTable = (function () { // calculate the next delay (back off) var backoff = delay * 2; - var nextDelay = backoff > nf.ProvenanceTable.MAX_DELAY ? nf.ProvenanceTable.MAX_DELAY : backoff; + var nextDelay = backoff > self.MAX_DELAY ? self.MAX_DELAY : backoff; // poll provenance pollProvenance(nextDelay); @@ -1436,5 +1444,8 @@ nf.ProvenanceTable = (function () { // show the dialog $('#event-details-dialog').modal('show'); } - }; -}()); \ No newline at end of file + } + + var provenanceTableCtrl = new ProvenanceTableCtrl(); + return provenanceTableCtrl; +}; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi/blob/5d63ba6a/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 320278f..0c69173 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 @@ -23,8 +23,10 @@ $(document).ready(function () { //Define Dependency Injection Annotations nf.ng.AppConfig.$inject = ['$mdThemingProvider', '$compileProvider']; - nf.ng.AppCtrl.$inject = ['$scope', 'serviceProvider']; - nf.ng.ServiceProvider.$inject = []; + nf.ng.AppCtrl.$inject = ['$scope']; + nf.ng.Provenance.$inject = ['provenanceTableCtrl']; + nf.ng.ProvenanceLineage.$inject = []; + nf.ng.ProvenanceTable.$inject = ['provenanceLineageCtrl']; //Configure Angular App app.config(nf.ng.AppConfig); @@ -33,16 +35,19 @@ $(document).ready(function () { app.controller('ngProvenanceAppCtrl', nf.ng.AppCtrl); //Define Angular App Services - app.service('serviceProvider', nf.ng.ServiceProvider); + app.service('provenanceCtrl', nf.ng.Provenance); + app.service('provenanceLineageCtrl', nf.ng.ProvenanceLineage); + app.service('provenanceTableCtrl', nf.ng.ProvenanceTable); //Manually Boostrap Angular App nf.ng.Bridge.injector = angular.bootstrap($('body'), ['ngProvenanceApp'], { strictDi: true }); // initialize the status page - nf.Provenance.init(); + nf.ng.Bridge.injector.get('provenanceCtrl').init(); }); -nf.Provenance = (function () { +nf.ng.Provenance = function (provenanceTableCtrl) { + 'use strict'; /** * Configuration object used to hold a number of configuration items. @@ -66,11 +71,11 @@ nf.Provenance = (function () { */ var detectedCluster = function () { return $.ajax({ - type: 'GET', - url: config.urls.clusterSummary - }).done(function (response) { - isClustered = response.clusterSummary.connectedToCluster; - }).fail(nf.Common.handleAjaxError); + type: 'GET', + url: config.urls.clusterSummary + }).done(function (response) { + isClustered = response.clusterSummary.connectedToCluster; + }).fail(nf.Common.handleAjaxError); }; /** @@ -119,7 +124,7 @@ nf.Provenance = (function () { var initializeProvenancePage = function () { // define mouse over event for the refresh button $('#refresh-button').click(function () { - nf.ProvenanceTable.loadProvenanceTable(); + provenanceTableCtrl.loadProvenanceTable(); }); // return a deferred for page initialization @@ -172,25 +177,30 @@ nf.Provenance = (function () { }).promise(); }; - return { + function ProvenanceCtrl() { + } + + ProvenanceCtrl.prototype = { + constructor: ProvenanceCtrl, + /** * Initializes the status page. */ init: function () { nf.Storage.init(); - + // load the user and detect if the NiFi is clustered $.when(loadAbout(), loadCurrentUser(), detectedCluster()).done(function () { // create the provenance table - nf.ProvenanceTable.init(isClustered).done(function () { + provenanceTableCtrl.init(isClustered).done(function () { var searchTerms = {}; - + // 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 searchTerms['ProcessorID'] = initialComponentId; } @@ -204,14 +214,14 @@ nf.Provenance = (function () { // build the search criteria searchTerms['FlowFileUUID'] = initialFlowFileUuid; } - + // load the provenance table if ($.isEmptyObject(searchTerms)) { // load the provenance table - nf.ProvenanceTable.loadProvenanceTable(); + provenanceTableCtrl.loadProvenanceTable(); } else { // load the provenance table - nf.ProvenanceTable.loadProvenanceTable({ + provenanceTableCtrl.loadProvenanceTable({ 'searchTerms': searchTerms }); } @@ -223,19 +233,17 @@ nf.Provenance = (function () { 'height': $(window).height() + 'px', 'width': $(window).width() + 'px' }); - + $('#provenance').css('margin', 40); - $('#provenance-table').css('bottom', 127); $('#provenance-refresh-container').css({ - 'margin': '0px 0px 40px 0px', - 'bottom': '40px', + 'bottom': '0px', 'left': '0px', 'right': '0px' }); } // configure the initial grid height - nf.ProvenanceTable.resetTableSize(); + provenanceTableCtrl.resetTableSize(); }; // once the table is initialized, finish initializing the page @@ -281,5 +289,8 @@ nf.Provenance = (function () { }); }); } - }; -}()); \ No newline at end of file + } + + var provenanceCtrl = new ProvenanceCtrl(); + return provenanceCtrl; +}; \ No newline at end of file
