Repository: nifi Updated Branches: refs/heads/master 04c41c065 -> 9db1def6c
http://git-wip-us.apache.org/repos/asf/nifi/blob/9db1def6/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js index 27fa461..9cfa194 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js @@ -22,8 +22,8 @@ nf.RemoteProcessGroup = (function () { var PREVIEW_NAME_LENGTH = 30; var dimensions = { - width: 365, - height: 140 + width: 380, + height: 158 }; // -------------------------------------------- @@ -44,8 +44,8 @@ nf.RemoteProcessGroup = (function () { /** * Gets the process group comments. - * - * @param {object} d + * + * @param {object} d */ var getProcessGroupComments = function (d) { if (nf.Common.isBlank(d.component.comments)) { @@ -59,7 +59,9 @@ nf.RemoteProcessGroup = (function () { * Selects the remote process group elements against the current remote process group map. */ var select = function () { - return remoteProcessGroupContainer.selectAll('g.remote-process-group').data(remoteProcessGroupMap.values()); + return remoteProcessGroupContainer.selectAll('g.remote-process-group').data(remoteProcessGroupMap.values(), function (d) { + return d.id; + }); }; /** @@ -74,14 +76,14 @@ nf.RemoteProcessGroup = (function () { } var remoteProcessGroup = entered.append('g') - .attr({ - 'id': function (d) { - return 'id-' + d.id; - }, - 'class': 'remote-process-group component' - }) - .classed('selected', selected) - .call(nf.CanvasUtils.position); + .attr({ + 'id': function (d) { + return 'id-' + d.id; + }, + 'class': 'remote-process-group component' + }) + .classed('selected', selected) + .call(nf.CanvasUtils.position); // ---- // body @@ -89,63 +91,68 @@ nf.RemoteProcessGroup = (function () { // remote process group border remoteProcessGroup.append('rect') - .attr({ - 'rx': 6, - 'ry': 6, - 'class': 'border', - 'width': function (d) { - return d.dimensions.width; - }, - 'height': function (d) { - return d.dimensions.height; - }, - 'fill': 'transparent', - 'stroke-opacity': 0.8, - 'stroke-width': 2, - 'stroke': '#294c58' - }); + .attr({ + 'class': 'border', + 'width': function (d) { + return d.dimensions.width; + }, + 'height': function (d) { + return d.dimensions.height; + }, + 'fill': 'transparent', + 'stroke': 'transparent' + }) + .classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); // remote process group body remoteProcessGroup.append('rect') - .attr({ - 'rx': 6, - 'ry': 6, - 'class': 'body', - 'width': function (d) { - return d.dimensions.width; - }, - 'height': function (d) { - return d.dimensions.height; - }, - 'fill': '#294c58', - 'fill-opacity': 0.8, - 'stroke-width': 0 - }); + .attr({ + 'class': 'body', + 'width': function (d) { + return d.dimensions.width; + }, + 'height': function (d) { + return d.dimensions.height; + }, + 'filter': 'url(#component-drop-shadow)', + 'stroke-width': 0 + }) + .classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); + + // remote process group name background + remoteProcessGroup.append('rect') + .attr({ + 'width': function (d) { + return d.dimensions.width; + }, + 'height': 32, + 'fill': '#b8c6cd' + }); // remote process group name remoteProcessGroup.append('text') - .attr({ - 'x': 25, - 'y': 17, - 'width': 305, - 'height': 16, - 'font-size': '10pt', - 'font-weight': 'bold', - 'fill': '#ffffff', - 'class': 'remote-process-group-name' - }); + .attr({ + 'x': 30, + 'y': 20, + 'width': 305, + 'height': 16, + 'class': 'remote-process-group-name' + }); - // process group icon + // remote process group icon remoteProcessGroup.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/bgRemoteProcessGroupDetailsArea.png', - 'width': 352, - 'height': 89, - 'x': 6, - 'y': 38, - 'class': 'remote-process-group-preview' - }); + .call(nf.CanvasUtils.disableImageHref) + .attr({ + 'width': 352, + 'height': 89, + 'x': 6, + 'y': 38, + 'class': 'remote-process-group-preview' + }); // always support selection remoteProcessGroup.call(nf.Selectable.activate).call(nf.ContextMenu.activate); @@ -182,48 +189,59 @@ nf.RemoteProcessGroup = (function () { details = remoteProcessGroup.append('g').attr('class', 'remote-process-group-details'); // remote process group transmission status - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'class': 'remote-process-group-transmission-status', - 'width': 16, - 'height': 16, - 'x': 5, - 'y': 5 - }); + details.append('text') + .attr({ + 'class': 'remote-process-group-transmission-status', + 'x': 10, + 'y': 20 + }); + + // ------------------ + // details background + // ------------------ + + details.append('rect') + .attr({ + 'x': 0, + 'y': 32, + 'width': function () { + return remoteProcessGroupData.dimensions.width + }, + 'height': 24, + 'fill': '#e3e8eb' + }); + + // ------- + // details + // ------- // remote process group secure transfer - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'class': 'remote-process-group-transmission-secure', - 'width': 14, - 'height': 12, - 'x': 7, - 'y': 23 - }); + details.append('text') + .attr({ + 'class': 'remote-process-group-transmission-secure', + 'x': 10, + 'y': 48 + }); if (remoteProcessGroupData.accessPolicy.canRead) { // remote process group uri details.append('text') - .attr({ - 'x': 25, - 'y': 32, - 'width': 305, - 'height': 12, - 'font-size': '8pt', - 'fill': '#91b9ce', - 'class': 'remote-process-group-uri' - }) - .each(function (d) { - var remoteProcessGroupUri = d3.select(this); + .attr({ + 'x': 30, + 'y': 48, + 'width': 305, + 'height': 12, + 'class': 'remote-process-group-uri' + }) + .each(function (d) { + var remoteProcessGroupUri = d3.select(this); - // reset the remote process group name to handle any previous state - remoteProcessGroupUri.text(null).selectAll('title').remove(); + // reset the remote process group name to handle any previous state + remoteProcessGroupUri.text(null).selectAll('title').remove(); - // apply ellipsis to the remote process group name as necessary - nf.CanvasUtils.ellipsis(remoteProcessGroupUri, d.component.targetUri); - }).append('title').text(function (d) { + // apply ellipsis to the remote process group name as necessary + nf.CanvasUtils.ellipsis(remoteProcessGroupUri, d.component.targetUri); + }).append('title').text(function (d) { return d.component.name; }); } @@ -232,168 +250,53 @@ nf.RemoteProcessGroup = (function () { // stats background // ---------------- + // sent details.append('rect') - .attr({ - 'x': 6, - 'y': 38, - 'width': 352, - 'height': 89, - 'stroke-width': 1, - 'stroke': '#6f97ac', - 'fill': '#ffffff' - }); + .attr({ + 'width': function () { + return remoteProcessGroupData.dimensions.width; + }, + 'height': 19, + 'x': 0, + 'y': 66, + 'fill': '#f4f6f7' + }); + // border details.append('rect') - .attr({ - 'x': 6, - 'y': 38, - 'width': 176, - 'height': 22, - 'stroke-width': 1, - 'stroke': '#6f97ac', - 'fill': 'url(#process-group-stats-background)', - 'class': 'remote-process-group-input-container' - }); + .attr({ + 'width': function () { + return remoteProcessGroupData.dimensions.width; + }, + 'height': 1, + 'x': 0, + 'y': 84, + 'fill': '#c7d2d7' + }); + // received details.append('rect') - .attr({ - 'x': 182, - 'y': 38, - 'width': 176, - 'height': 22, - 'stroke-width': 1, - 'stroke': '#6f97ac', - 'fill': 'url(#process-group-stats-background)', - 'class': 'remote-process-group-output-container' - }); + .attr({ + 'width': function () { + return remoteProcessGroupData.dimensions.width; + }, + 'height': 19, + 'x': 0, + 'y': 85, + 'fill': '#ffffff' + }); + // border details.append('rect') - .attr({ - 'x': 6, - 'y': 94, - 'width': 352, - 'height': 33, - 'stroke-width': 1, - 'stroke': '#6f97ac', - 'fill': 'url(#process-group-stats-background)' - }); - - // -------- - // contents - // -------- - - if (remoteProcessGroupData.accessPolicy.canRead) { - // input ports icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconInputPortSmall.png', - 'width': 16, - 'height': 16, - 'x': 10, - 'y': 41 - }); - - // input ports count - details.append('text') - .attr({ - 'x': 30, - 'y': 53, - 'class': 'remote-process-group-input-port-count process-group-contents-count' - }); - - // input transmitting icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconTransmissionActive.png', - 'width': 16, - 'height': 16, - 'y': 41, - 'class': 'remote-process-group-input-transmitting' - }); - - // input transmitting count - details.append('text') - .attr({ - 'y': 53, - 'class': 'remote-process-group-input-transmitting-count process-group-contents-count' - }); - - // input not transmitting icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconTransmissionInactive.png', - 'width': 16, - 'height': 16, - 'y': 41, - 'class': 'remote-process-group-input-not-transmitting' - }); - - // input not transmitting count - details.append('text') - .attr({ - 'y': 53, - 'class': 'remote-process-group-input-not-transmitting-count process-group-contents-count' - }); - - // output ports icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconOutputPortSmall.png', - 'width': 16, - 'height': 16, - 'x': 186, - 'y': 41, - 'class': 'remote-process-group-output-port' - }); - - // output ports count - details.append('text') - .attr({ - 'x': 206, - 'y': 53, - 'class': 'remote-process-group-output-port-count process-group-contents-count' - }); - - // output transmitting icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconTransmissionActive.png', - 'width': 16, - 'height': 16, - 'y': 41, - 'class': 'remote-process-group-output-transmitting' - }); - - // output transmitting count - details.append('text') - .attr({ - 'y': 53, - 'class': 'remote-process-group-output-transmitting-count process-group-contents-count' - }); - - // output not transmitting icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconTransmissionInactive.png', - 'width': 16, - 'height': 16, - 'y': 41, - 'class': 'remote-process-group-output-not-transmitting' - }); - - // output not transmitting count - details.append('text') - .attr({ - 'y': 53, - 'class': 'remote-process-group-output-not-transmitting-count process-group-contents-count' - }); - } + .attr({ + 'width': function () { + return remoteProcessGroupData.dimensions.width; + }, + 'height': 1, + 'x': 0, + 'y': 103, + 'fill': '#c7d2d7' + }); // ----- // stats @@ -401,85 +304,85 @@ nf.RemoteProcessGroup = (function () { // stats label container var remoteProcessGroupStatsLabel = details.append('g') - .attr({ - 'transform': 'translate(6, 70)' - }); + .attr({ + 'transform': 'translate(6, 75)' + }); // sent label remoteProcessGroupStatsLabel.append('text') - .attr({ - 'width': 73, - 'height': 10, - 'x': 4, - 'y': 4, - 'class': 'process-group-stats-label' - }) - .text('Sent'); + .attr({ + 'width': 73, + 'height': 10, + 'x': 4, + 'y': 5, + 'class': 'stats-label' + }) + .text('Sent'); // received label remoteProcessGroupStatsLabel.append('text') - .attr({ - 'width': 73, - 'height': 10, - 'x': 4, - 'y': 17, - 'class': 'process-group-stats-label' - }) - .text('Received'); + .attr({ + 'width': 73, + 'height': 10, + 'x': 4, + 'y': 23, + 'class': 'stats-label' + }) + .text('Received'); // stats value container var remoteProcessGroupStatsValue = details.append('g') - .attr({ - 'transform': 'translate(95, 70)' - }); + .attr({ + 'transform': 'translate(95, 75)' + }); // queued value remoteProcessGroupStatsValue.append('text') - .attr({ - 'width': 180, - 'height': 10, - 'x': 4, - 'y': 4, - 'class': 'remote-process-group-sent process-group-stats-value' - }); + .attr({ + 'width': 180, + 'height': 10, + 'x': 4, + 'y': 5, + 'class': 'remote-process-group-sent stats-value' + }); // received value remoteProcessGroupStatsValue.append('text') - .attr({ - 'width': 180, - 'height': 10, - 'x': 4, - 'y': 17, - 'class': 'remote-process-group-received process-group-stats-value' - }); + .attr({ + 'width': 180, + 'height': 10, + 'x': 4, + 'y': 23, + 'class': 'remote-process-group-received stats-value' + }); // stats value container var processGroupStatsInfo = details.append('g') - .attr({ - 'transform': 'translate(315, 70)' - }); + .attr({ + 'transform': 'translate(335, 75)' + }); // sent info processGroupStatsInfo.append('text') - .attr({ - 'width': 25, - 'height': 10, - 'x': 4, - 'y': 4, - 'class': 'process-group-stats-info' - }) - .text('(5 min)'); + .attr({ + 'width': 25, + 'height': 10, + 'x': 4, + 'y': 5, + 'class': 'stats-info' + }) + .text('5 min'); // received info processGroupStatsInfo.append('text') - .attr({ - 'width': 25, - 'height': 10, - 'x': 4, - 'y': 17, - 'class': 'process-group-stats-info' - }) - .text('(5 min)'); + .attr({ + 'width': 25, + 'height': 10, + 'x': 4, + 'y': 23, + 'class': 'stats-info' + }) + .text('5 min'); // -------- // comments @@ -487,101 +390,120 @@ nf.RemoteProcessGroup = (function () { // process group comments details.append('text') - .attr({ - 'x': 10, - 'y': 108, - 'width': 342, - 'height': 22, - 'class': 'remote-process-group-comments' - }); + .attr({ + 'x': 10, + 'y': 121, + 'width': 342, + 'height': 22, + 'class': 'remote-process-group-comments' + }); // ------------------- // last refreshed time // ------------------- + details.append('rect') + .attr({ + 'x': 0, + 'y': function () { + return remoteProcessGroupData.dimensions.height - 24; + }, + 'width': function () { + return remoteProcessGroupData.dimensions.width; + }, + 'height': 24, + 'fill': '#e3e8eb' + }); + details.append('text') - .attr({ - 'x': 358, - 'y': 137, - 'class': 'remote-process-group-last-refresh' - }); + .attr({ + 'x': 370, + 'y': 150, + 'class': 'remote-process-group-last-refresh' + }); // ------------------- // active thread count // ------------------- // active thread count - details.append('rect') - .attr({ - 'class': 'active-thread-count-background', - 'height': 13, - 'y': 0, - 'fill': '#fff', - 'fill-opacity': '0.4', - 'stroke': '#aaa', - 'stroke-width': '1' - }); - - // active thread bacground details.append('text') - .attr({ - 'class': 'active-thread-count', - 'height': 13, - 'y': 10, - 'fill': '#000' - }); + .attr({ + 'class': 'active-thread-count-icon', + 'y': 20 + }) + .text('\ue83f'); + + // active thread icon + details.append('text') + .attr({ + 'class': 'active-thread-count', + 'y': 20 + }); // --------- // bulletins // --------- + // bulletin background + details.append('rect') + .attr({ + 'class': 'bulletin-background', + 'x': function () { + return remoteProcessGroupData.dimensions.width - 24; + }, + 'y': 32, + 'width': 24, + 'height': 24 + }); + // bulletin icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'class': 'bulletin-icon', - 'xlink:href': 'images/iconBulletin.png', - 'width': 12, - 'height': 12, - 'y': 2 - }); + details.append('text') + .attr({ + 'class': 'bulletin-icon', + 'x': function () { + return remoteProcessGroupData.dimensions.width - 17; + }, + 'y': 50 + }) + .text('\uf24a'); } if (remoteProcessGroupData.accessPolicy.canRead) { // update the process groups transmission status - details.select('image.remote-process-group-transmission-secure') - .attr('xlink:href', function (d) { - var img = ''; - if (d.component.targetSecure === true) { - img = 'images/iconSecure.png'; - } else { - img = 'images/iconNotSecure.png'; - } - return img; - }) - .each(function (d) { - // remove the existing tip if necessary - var tip = d3.select('#transmission-secure-' + d.id); - if (!tip.empty()) { - tip.remove(); - } - - tip = d3.select('#remote-process-group-tooltips').append('div') - .attr('id', function () { - return 'transmission-secure-' + d.id; - }) - .attr('class', 'tooltip nifi-tooltip') - .text(function () { - if (d.component.targetSecure === true) { - return 'Site-to-Site is secure.'; - } else { - return 'Site-to-Site is NOT secure.'; - } - }); - - // add the tooltip - nf.CanvasUtils.canvasTooltip(tip, d3.select(this)); - }); + details.select('text.remote-process-group-transmission-secure') + .text(function (d) { + var icon = ''; + if (d.component.targetSecure === true) { + icon = '\uf023'; + } else { + icon = '\uf09c'; + } + return icon; + }) + .each(function (d) { + // remove the existing tip if necessary + var tip = d3.select('#transmission-secure-' + d.id); + if (!tip.empty()) { + tip.remove(); + } + + tip = d3.select('#remote-process-group-tooltips').append('div') + .attr('id', function () { + return 'transmission-secure-' + d.id; + }) + .attr('class', 'tooltip nifi-tooltip') + .text(function () { + if (d.component.targetSecure === true) { + return 'Site-to-Site is secure.'; + } else { + return 'Site-to-Site is NOT secure.'; + } + }); + + // add the tooltip + nf.CanvasUtils.canvasTooltip(tip, d3.select(this)); + }); // ---------------------- // update the input ports @@ -589,45 +511,45 @@ nf.RemoteProcessGroup = (function () { // input port count details.select('text.remote-process-group-input-port-count') - .text(function (d) { - return d.component.inputPortCount; - }); + .text(function (d) { + return d.component.inputPortCount; + }); // get the input port container to help right align var inputContainer = details.select('rect.remote-process-group-input-container'); // update input not transmitting var inputNotTransmittingCount = details.select('text.remote-process-group-input-not-transmitting-count') - .text(function (d) { - return d.component.inactiveRemoteInputPortCount; - }) - .attr('x', function () { - var containerX = parseInt(inputContainer.attr('x'), 10); - var containerWidth = parseInt(inputContainer.attr('width'), 10); - return containerX + containerWidth - this.getComputedTextLength() - CONTENTS_SPACER; - }); + .text(function (d) { + return d.component.inactiveRemoteInputPortCount; + }) + .attr('x', function () { + var containerX = parseInt(inputContainer.attr('x'), 10); + var containerWidth = parseInt(inputContainer.attr('width'), 10); + return containerX + containerWidth - this.getComputedTextLength() - CONTENTS_SPACER; + }); var inputNotTransmitting = details.select('image.remote-process-group-input-not-transmitting') - .attr('x', function () { - var inputNotTransmittingCountX = parseInt(inputNotTransmittingCount.attr('x'), 10); - var width = parseInt(d3.select(this).attr('width'), 10); - return inputNotTransmittingCountX - width - CONTENTS_SPACER; - }); + .attr('x', function () { + var inputNotTransmittingCountX = parseInt(inputNotTransmittingCount.attr('x'), 10); + var width = parseInt(d3.select(this).attr('width'), 10); + return inputNotTransmittingCountX - width - CONTENTS_SPACER; + }); // update input transmitting var inputTransmittingCount = details.select('text.remote-process-group-input-transmitting-count') - .text(function (d) { - return d.component.activeRemoteInputPortCount; - }) - .attr('x', function () { - var inputNotTransmittingX = parseInt(inputNotTransmitting.attr('x'), 10); - return inputNotTransmittingX - this.getComputedTextLength() - CONTENTS_SPACER; - }); + .text(function (d) { + return d.component.activeRemoteInputPortCount; + }) + .attr('x', function () { + var inputNotTransmittingX = parseInt(inputNotTransmitting.attr('x'), 10); + return inputNotTransmittingX - this.getComputedTextLength() - CONTENTS_SPACER; + }); details.select('image.remote-process-group-input-transmitting') - .attr('x', function () { - var inputTransmittingCountX = parseInt(inputTransmittingCount.attr('x'), 10); - var width = parseInt(d3.select(this).attr('width'), 10); - return inputTransmittingCountX - width - CONTENTS_SPACER; - }); + .attr('x', function () { + var inputTransmittingCountX = parseInt(inputTransmittingCount.attr('x'), 10); + var width = parseInt(d3.select(this).attr('width'), 10); + return inputTransmittingCountX - width - CONTENTS_SPACER; + }); // ----------------------- // update the output ports @@ -635,45 +557,45 @@ nf.RemoteProcessGroup = (function () { // output port count details.select('text.remote-process-group-output-port-count') - .text(function (d) { - return d.component.outputPortCount; - }); + .text(function (d) { + return d.component.outputPortCount; + }); // get the output port container to help right align var outputContainer = details.select('rect.remote-process-group-output-container'); // update input not transmitting var outputNotTransmittingCount = details.select('text.remote-process-group-output-not-transmitting-count') - .text(function (d) { - return d.component.inactiveRemoteOutputPortCount; - }) - .attr('x', function () { - var containerX = parseInt(outputContainer.attr('x'), 10); - var containerWidth = parseInt(outputContainer.attr('width'), 10); - return containerX + containerWidth - this.getComputedTextLength() - CONTENTS_SPACER; - }); + .text(function (d) { + return d.component.inactiveRemoteOutputPortCount; + }) + .attr('x', function () { + var containerX = parseInt(outputContainer.attr('x'), 10); + var containerWidth = parseInt(outputContainer.attr('width'), 10); + return containerX + containerWidth - this.getComputedTextLength() - CONTENTS_SPACER; + }); var outputNotTransmitting = details.select('image.remote-process-group-output-not-transmitting') - .attr('x', function () { - var outputNotTransmittingCountX = parseInt(outputNotTransmittingCount.attr('x'), 10); - var width = parseInt(d3.select(this).attr('width'), 10); - return outputNotTransmittingCountX - width - CONTENTS_SPACER; - }); + .attr('x', function () { + var outputNotTransmittingCountX = parseInt(outputNotTransmittingCount.attr('x'), 10); + var width = parseInt(d3.select(this).attr('width'), 10); + return outputNotTransmittingCountX - width - CONTENTS_SPACER; + }); // update output transmitting var outputTransmittingCount = details.select('text.remote-process-group-output-transmitting-count') - .text(function (d) { - return d.component.activeRemoteOutputPortCount; - }) - .attr('x', function () { - var outputNotTransmittingX = parseInt(outputNotTransmitting.attr('x'), 10); - return outputNotTransmittingX - this.getComputedTextLength() - CONTENTS_SPACER; - }); + .text(function (d) { + return d.component.activeRemoteOutputPortCount; + }) + .attr('x', function () { + var outputNotTransmittingX = parseInt(outputNotTransmitting.attr('x'), 10); + return outputNotTransmittingX - this.getComputedTextLength() - CONTENTS_SPACER; + }); details.select('image.remote-process-group-output-transmitting') - .attr('x', function () { - var outputTransmittingCountX = parseInt(outputTransmittingCount.attr('x'), 10); - var width = parseInt(d3.select(this).attr('width'), 10); - return outputTransmittingCountX - width - CONTENTS_SPACER; - }); + .attr('x', function () { + var outputTransmittingCountX = parseInt(outputTransmittingCount.attr('x'), 10); + var width = parseInt(d3.select(this).attr('width'), 10); + return outputTransmittingCountX - width - CONTENTS_SPACER; + }); // --------------- // update comments @@ -681,15 +603,15 @@ nf.RemoteProcessGroup = (function () { // update the process group comments details.select('text.remote-process-group-comments') - .each(function (d) { - var remoteProcessGroupComments = d3.select(this); + .each(function (d) { + var remoteProcessGroupComments = d3.select(this); - // reset the processor name to handle any previous state - remoteProcessGroupComments.text(null).selectAll('tspan, title').remove(); + // reset the processor name to handle any previous state + remoteProcessGroupComments.text(null).selectAll('tspan, title').remove(); - // apply ellipsis to the port name as necessary - nf.CanvasUtils.multilineEllipsis(remoteProcessGroupComments, 2, getProcessGroupComments(d)); - }).classed('unset', function (d) { + // apply ellipsis to the port name as necessary + nf.CanvasUtils.ellipsis(remoteProcessGroupComments, getProcessGroupComments(d)); + }).classed('unset', function (d) { return nf.Common.isBlank(d.component.comments); }).append('title').text(function (d) { return getProcessGroupComments(d); @@ -700,25 +622,25 @@ nf.RemoteProcessGroup = (function () { // -------------- details.select('text.remote-process-group-last-refresh') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.component.flowRefreshed)) { - return d.component.flowRefreshed; - } else { - return 'Remote flow not current'; - } - }); + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.component.flowRefreshed)) { + return d.component.flowRefreshed; + } else { + return 'Remote flow not current'; + } + }); // update the process group name remoteProcessGroup.select('text.remote-process-group-name') - .each(function (d) { - var remoteProcessGroupName = d3.select(this); + .each(function (d) { + var remoteProcessGroupName = d3.select(this); - // reset the remote process group name to handle any previous state - remoteProcessGroupName.text(null).selectAll('title').remove(); + // reset the remote process group name to handle any previous state + remoteProcessGroupName.text(null).selectAll('title').remove(); - // apply ellipsis to the remote process group name as necessary - nf.CanvasUtils.ellipsis(remoteProcessGroupName, d.component.name); - }).append('title').text(function (d) { + // apply ellipsis to the remote process group name as necessary + nf.CanvasUtils.ellipsis(remoteProcessGroupName, d.component.name); + }).append('title').text(function (d) { return d.component.name; }); } @@ -732,14 +654,14 @@ nf.RemoteProcessGroup = (function () { if (remoteProcessGroupData.accessPolicy.canRead) { // update the process group name remoteProcessGroup.select('text.remote-process-group-name') - .text(function (d) { - var name = d.component.name; - if (name.length > PREVIEW_NAME_LENGTH) { - return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); - } else { - return name; - } - }); + .text(function (d) { + var name = d.component.name; + if (name.length > PREVIEW_NAME_LENGTH) { + return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); + } else { + return name; + } + }); } // show the preview @@ -758,7 +680,7 @@ nf.RemoteProcessGroup = (function () { /** * Updates the process group status. - * + * * @param {selection} updated The process groups to be updated */ var updateProcessGroupStatus = function (updated) { @@ -768,23 +690,23 @@ nf.RemoteProcessGroup = (function () { // sent value updated.select('text.remote-process-group-sent') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status)) { - return d.status.sent; - } else { - return '- / -'; - } - }); + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return d.status.sent; + } else { + return '- / -'; + } + }); // received value updated.select('text.remote-process-group-received') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status)) { - return d.status.received; - } else { - return '- / -'; - } - }); + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return d.status.received; + } else { + return '- / -'; + } + }); // -------------------- // authorization issues @@ -792,19 +714,31 @@ nf.RemoteProcessGroup = (function () { // TODO - only consider state from the status // update the process groups transmission status - updated.select('image.remote-process-group-transmission-status') - .attr('xlink:href', function (d) { - var img = ''; + updated.select('text.remote-process-group-transmission-status') + .text(function (d) { + var icon = ''; if (nf.Common.isDefinedAndNotNull(d.status) && !nf.Common.isEmpty(d.status.authorizationIssues)) { - img = 'images/iconAlert.png'; + icon = '\uf071'; } else if (d.accessPolicy.canRead) { if (d.component.transmitting === true) { - img = 'images/iconTransmissionActive.png'; + icon = '\uf140'; } else { - img = 'images/iconTransmissionInactive.png'; + icon = '\ue80a'; } } - return img; + return icon; + }) + .attr('font-family', function (d) { + var family = ''; + if (nf.Common.isDefinedAndNotNull(d.status) && !nf.Common.isEmpty(d.status.authorizationIssues) || (d.accessPolicy.canRead && d.component.transmitting)) { + family = 'FontAwesome'; + } else { + family = 'flowfont'; + } + return family; + }) + .classed('has-authorization-errors', function (d) { + return nf.Common.isDefinedAndNotNull(d.status) && !nf.Common.isEmpty(d.status.authorizationIssues); }) .each(function (d) { // remove the existing tip if necessary @@ -850,6 +784,10 @@ nf.RemoteProcessGroup = (function () { // bulletins // --------- + remoteProcessGroup.select('rect.bulletin-background').classed('has-bulletins', function () { + return nf.Common.isDefinedAndNotNull(d.status) && !nf.Common.isEmpty(d.status.bulletins); + }); + nf.CanvasUtils.bulletins(remoteProcessGroup, d, function () { return d3.select('#remote-process-group-tooltips'); }, offset); @@ -871,7 +809,7 @@ nf.RemoteProcessGroup = (function () { /** * Removes the tooltips for the remote process groups in the specified selection. - * + * * @param {type} removed */ var removeTooltips = function (removed) { @@ -892,12 +830,12 @@ nf.RemoteProcessGroup = (function () { // create the process group container remoteProcessGroupContainer = d3.select('#canvas').append('g') - .attr({ - 'pointer-events': 'all', - 'class': 'remote-process-groups' - }); + .attr({ + 'pointer-events': 'all', + 'class': 'remote-process-groups' + }); }, - + /** * Populates the graph with the specified remote process groups. * @@ -927,9 +865,9 @@ nf.RemoteProcessGroup = (function () { // apply the selection and handle all new remote process groups select().enter().call(renderRemoteProcessGroups, selectAll); }, - + /** - * If the remote process group id is specified it is returned. If no remote process + * If the remote process group id is specified it is returned. If no remote process * group id specified, all remote process groups are returned. * * @param {string} id @@ -941,7 +879,7 @@ nf.RemoteProcessGroup = (function () { return remoteProcessGroupMap.get(id); } }, - + /** * If the remote process group id is specified it is refresh according to the current * state. If no remote process group id is specified, all remote process groups are refreshed. @@ -955,14 +893,14 @@ nf.RemoteProcessGroup = (function () { d3.selectAll('g.remote-process-group').call(updateRemoteProcessGroups); } }, - + /** * Refreshes the components necessary after a pan event. */ pan: function () { d3.selectAll('g.remote-process-group.entering, g.remote-process-group.leaving').call(updateRemoteProcessGroups); }, - + /** * Reloads the remote process group state from the server and refreshes the UI. * If the remote process group is currently unknown, this function just returns. @@ -986,16 +924,16 @@ nf.RemoteProcessGroup = (function () { }); } }, - + /** * Positions the component. - * + * * @param {string} id The id */ position: function (id) { d3.select('#id-' + id).call(nf.CanvasUtils.position); }, - + /** * Sets the specified remote process group(s). If the is an array, it * will set each remote process group. If it is not an array, it will @@ -1009,7 +947,7 @@ nf.RemoteProcessGroup = (function () { // update the current entry var remoteProcessGroupEntry = remoteProcessGroupMap.get(remoteProcessGroupEntity.id); $.extend(remoteProcessGroupEntry, remoteProcessGroupEntity); - + // update the remote process group in the UI d3.select('#id-' + remoteProcessGroupEntry.id).call(updateRemoteProcessGroups); } @@ -1024,10 +962,10 @@ nf.RemoteProcessGroup = (function () { set(remoteProcessGroupEntities); } }, - + /** * Sets the remote process group status using the specified status. - * + * * @param {array | object} remoteProcessGroupStatus Remote process group status */ setStatus: function (remoteProcessGroupStatus) { @@ -1064,7 +1002,7 @@ nf.RemoteProcessGroup = (function () { // apply the selection and handle all removed remote process groups select().exit().call(removeRemoteProcessGroups); }, - + /** * Removes all remote process groups. */ http://git-wip-us.apache.org/repos/asf/nifi/blob/9db1def6/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js index 879fb56..8826671 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js @@ -723,6 +723,43 @@ nf.Common = (function () { }, /** + * Extracts the contents of the specified str after the strToFind. If the + * strToFind is not found or the last part of the str, an empty string is + * returned. + * + * @argument {string} str The full string + * @argument {string} strToFind The substring to find + */ + substringAfterFirst: function (str, strToFind) { + var result = ''; + var indexOfStrToFind = str.indexOf(strToFind); + if (indexOfStrToFind >= 0) { + var indexAfterStrToFind = indexOfStrToFind + strToFind.length; + if (indexAfterStrToFind < str.length) { + result = str.substr(indexAfterStrToFind); + } + } + return result; + }, + + /** + * Extracts the contents of the specified str before the strToFind. If the + * strToFind is not found or the first part of the str, an empty string is + * returned. + * + * @argument {string} str The full string + * @argument {string} strToFind The substring to find + */ + substringBeforeFirst: function(str, strToFind) { + var result = ''; + var indexOfStrToFind = str.indexOf(strToFind); + if (indexOfStrToFind >= 0) { + result = str.substr(0, indexOfStrToFind); + } + return result + }, + + /** * Updates the mouse pointer. * * @argument {string} domId The id of the element for the new cursor style
