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.

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;

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 @@
         <div class="setting">
             <div class="setting-name">URLs</div>
             <div class="setting-field">
-                <span id="remote-process-group-urls"></span>
+                <input type="text" id="remote-process-group-urls" class="setting-input"/>
             </div>
         </div>
         <div class="setting">

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;
 }

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

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

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

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);