From c92022dd60e599ef6ed176d31489ba265acedd48 Mon Sep 17 00:00:00 2001 From: Matt Gilman Date: Mon, 27 Nov 2017 16:10:39 -0500 Subject: [PATCH] NIFI-4436: - Fixing default border radius. - Code clean up. - Ensuring component visibility is updated after updating/reverting. - Fixing sort on component name in local changes dialog NIFI-4526: - Added front end controls for updating RPG target URL. --- .../remote/StandardRemoteProcessGroup.java | 6 + .../remote-process-group-configuration.jsp | 2 +- .../src/main/webapp/css/common-ui.css | 4 + .../webapp/js/nf/canvas/nf-canvas-utils.js | 2 +- .../src/main/webapp/js/nf/canvas/nf-canvas.js | 105 +----------------- .../webapp/js/nf/canvas/nf-flow-version.js | 17 ++- .../nf-remote-process-group-configuration.js | 5 +- 7 files changed, 31 insertions(+), 110 deletions(-) diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-framework-core/src/main/java/org/apache/nifi/remote/StandardRemoteProcessGroup.java b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-framework-core/src/main/java/org/apache/nifi/remote/StandardRemoteProcessGroup.java index 6b55735add..726daa07c8 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-framework-core/src/main/java/org/apache/nifi/remote/StandardRemoteProcessGroup.java +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-framework-core/src/main/java/org/apache/nifi/remote/StandardRemoteProcessGroup.java @@ -192,6 +192,12 @@ public class StandardRemoteProcessGroup implements RemoteProcessGroup { @Override public void setTargetUris(final String targetUris) { requireNonNull(targetUris); + + // only attempt to update the target uris if they have changed + if (targetUris.equals(this.targetUris)) { + return; + } + verifyCanUpdate(); this.targetUris = targetUris; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-configuration.jsp index 36ecd48b1f..dac62223e0 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-configuration.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-process-group-configuration.jsp @@ -32,7 +32,7 @@
URLs
- +
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 e271ff4a6a..ac4cb62bad 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 @@ -109,6 +109,10 @@ body { color: #262626; } +button { + border-radius: 0; +} + .value-color { color: #775351; } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js index 213b5724a5..1aefa449d9 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js @@ -543,7 +543,7 @@ params.set('processGroupId', 'root'); } - if ((url.origin + url.pathname + '?' + params.toString()).length <= nfCanvasUtils.MAX_URL_LENGTH) { + if ((url.origin + url.pathname + '?' + params.toString()).length <= MAX_URL_LENGTH) { newUrl = url.origin + url.pathname + '?' + params.toString(); } else if (nfCommon.isDefinedAndNotNull(nfCanvasUtils.getParentGroupId())) { // silently remove all component ids diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js index 49ded8cd69..692dd581ae 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js @@ -182,7 +182,7 @@ }, options)); // update component visibility - nfCanvas.View.updateVisibility(); + nfGraph.updateVisibility(); // update the birdseye nfBirdseye.refresh(); @@ -979,97 +979,6 @@ View: (function () { - /** - * Updates component visibility based on their proximity to the screen's viewport. - */ - var updateComponentVisibility = function () { - var canvasContainer = $('#canvas-container'); - var translate = nfCanvas.View.translate(); - var scale = nfCanvas.View.scale(); - - // scale the translation - translate = [translate[0] / scale, translate[1] / scale]; - - // get the normalized screen width and height - var screenWidth = canvasContainer.width() / scale; - var screenHeight = canvasContainer.height() / scale; - - // calculate the screen bounds one screens worth in each direction - var screenLeft = -translate[0] - screenWidth; - var screenTop = -translate[1] - screenHeight; - var screenRight = screenLeft + (screenWidth * 3); - var screenBottom = screenTop + (screenHeight * 3); - - // detects whether a component is visible and should be rendered - var isComponentVisible = function (d) { - if (!nfCanvas.View.shouldRenderPerScale()) { - return false; - } - - var left = d.position.x; - var top = d.position.y; - var right = left + d.dimensions.width; - var bottom = top + d.dimensions.height; - - // determine if the component is now visible - return screenLeft < right && screenRight > left && screenTop < bottom && screenBottom > top; - }; - - // detects whether a connection is visible and should be rendered - var isConnectionVisible = function (d) { - if (!nfCanvas.View.shouldRenderPerScale()) { - return false; - } - - var x, y; - if (d.bends.length > 0) { - var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1); - x = d.bends[i].x; - y = d.bends[i].y; - } else { - x = (d.start.x + d.end.x) / 2; - y = (d.start.y + d.end.y) / 2; - } - - return screenLeft < x && screenRight > x && screenTop < y && screenBottom > y; - }; - - // marks the specific component as visible and determines if its entering or leaving visibility - var updateVisibility = function (d, isVisible) { - var selection = d3.select('#id-' + d.id); - var visible = isVisible(d); - var wasVisible = selection.classed('visible'); - - // mark the selection as appropriate - selection.classed('visible', visible) - .classed('entering', function () { - return visible && !wasVisible; - }).classed('leaving', function () { - return !visible && wasVisible; - }); - }; - - // get the all components - var graph = nfGraph.get(); - - // update the visibility for each component - $.each(graph.processors, function (_, d) { - updateVisibility(d, isComponentVisible); - }); - $.each(graph.ports, function (_, d) { - updateVisibility(d, isComponentVisible); - }); - $.each(graph.processGroups, function (_, d) { - updateVisibility(d, isComponentVisible); - }); - $.each(graph.remoteProcessGroups, function (_, d) { - updateVisibility(d, isComponentVisible); - }); - $.each(graph.connections, function (_, d) { - updateVisibility(d, isConnectionVisible); - }); - }; - // initialize the zoom behavior var behavior; @@ -1112,7 +1021,7 @@ .on('zoomend', function () { // ensure the canvas was actually refreshed if (nfCommon.isDefinedAndNotNull(refreshed)) { - nfCanvas.View.updateVisibility(); + nfGraph.updateVisibility(); // refresh the birdseye refreshed.done(function () { @@ -1143,14 +1052,6 @@ return nfCanvas.View.scale() >= MIN_SCALE_TO_RENDER; }, - /** - * Updates component visibility based on the current translation/scale. - */ - updateVisibility: function () { - updateComponentVisibility(); - nfGraph.pan(); - }, - /** * Sets/gets the current translation. * @@ -1346,7 +1247,7 @@ // update component visibility if (refreshComponents) { - nfCanvas.View.updateVisibility(); + nfGraph.updateVisibility(); } // persist if appropriate diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-flow-version.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-flow-version.js index 28e430346b..cb42c30988 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-flow-version.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-flow-version.js @@ -541,11 +541,16 @@ // determine if the item matches the filter var matchesId = item['componentId'].search(filterExp) >= 0; - var matchesComponent = item['componentName'].search(filterExp) >= 0; var matchesDifferenceType = item['differenceType'].search(filterExp) >= 0; var matchesDifference = item['difference'].search(filterExp) >= 0; - return matchesId || matchesComponent || matchesDifferenceType || matchesDifference; + // conditionally consider the component name + var matchesComponentName = false; + if (nfCommon.isDefinedAndNotNull(item['componentName'])) { + matchesComponentName = item['componentName'].search(filterExp) >= 0; + } + + return matchesId || matchesComponentName || matchesDifferenceType || matchesDifference; }; // initialize the component state filter @@ -570,7 +575,7 @@ // define the column model for local changes var localChangesColumns = [ { - id: 'component', + id: 'componentName', name: 'Component Name', field: 'componentName', formatter: valueFormatter, @@ -610,7 +615,7 @@ }); localChangesData.setFilterArgs({ searchString: '', - property: 'component' + property: 'componentName' }); localChangesData.setFilter(filter); @@ -1202,7 +1207,11 @@ url: '../nifi-api/flow/process-groups/' + encodeURIComponent(processGroupId), dataType: 'json' }).done(function (response) { + // update the graph components nfGraph.set(response.processGroupFlow.flow); + + // update the component visibility + nfGraph.updateVisibility(); }).fail(nfErrorHandler.handleAjaxError); } else { // if reverting selected PG... reload selected PG to update counts, etc 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-configuration.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-configuration.js index 2712713197..279350eac1 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-configuration.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-configuration.js @@ -78,6 +78,7 @@ 'revision': nfClient.getRevision(remoteProcessGroupData), 'component': { id: remoteProcessGroupId, + targetUris: $('#remote-process-group-urls').val(), communicationsTimeout: $('#remote-process-group-timeout').val(), yieldDuration: $('#remote-process-group-yield-duration').val(), transportProtocol: $('#remote-process-group-transport-protocol-combo').combo('getSelectedOption').value, @@ -145,7 +146,7 @@ // clear the remote process group details $('#remote-process-group-id').text(''); $('#remote-process-group-name').text(''); - $('#remote-process-group-urls').text(''); + $('#remote-process-group-urls').val(''); $('#remote-process-group-timeout').val(''); $('#remote-process-group-yield-duration').val(''); $('#remote-process-group-transport-protocol-combo').combo('setSelectedOption', { @@ -184,7 +185,7 @@ // populate the port settings $('#remote-process-group-id').text(selectionData.id); $('#remote-process-group-name').text(selectionData.component.name); - $('#remote-process-group-urls').text(selectionData.component.targetUris); + $('#remote-process-group-urls').val(selectionData.component.targetUris); // populate the text fields $('#remote-process-group-timeout').val(selectionData.component.communicationsTimeout);