Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Matt Gilman 2017-11-27 16:10:39 -05:00 committed by Bryan Bende
parent adacb204a8
commit c92022dd60
No known key found for this signature in database
GPG Key ID: A0DDA9ED50711C39
7 changed files with 31 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-framework-core/src/main/java/org/apache/nifi/remote/StandardRemoteProcessGroup.java
View File

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

2
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
View File

@ -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">

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css
View File

@ -109,6 +109,10 @@ body {
color: #262626;
}
button {
border-radius: 0;
}
.value-color {
color: #775351;
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
View File

@ -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

105
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
View File

@ -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

17
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-flow-version.js
View File

@ -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

5
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
View File

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