NIFI-1870: - Restoring the upstream/downstream connections dialog. - Correcting input port label when showing downstream components.

This closes #1028.

Signed-off-by: Bryan Bende <bbende@apache.org>
This commit is contained in:
Matt Gilman 2016-09-19 12:08:23 -04:00 committed by Bryan Bende
parent f11682202b
commit 0218bc61ef
No known key found for this signature in database
GPG Key ID: A0DDA9ED50711C39
4 changed files with 584 additions and 463 deletions

View File

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--%> --%>
<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %> <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<div id="connections-dialog" layout="column" class="hidden large-dialog"> <div id="connections-dialog" class="hidden">
<div class="dialog-content"> <div class="dialog-content">
<div class="setting"> <div class="setting">
<div class="setting-name">Selected component</div> <div class="setting-name">Selected component</div>

View File

@ -24,12 +24,12 @@
#fill-color-dialog { #fill-color-dialog {
display: none; display: none;
width: 215px; width: 240px;
height: 470px; height: 470px;
} }
#fill-color-value { #fill-color-value {
width: 100%; width: 175px;
} }
#fill-color-processor-preview { #fill-color-processor-preview {
@ -58,19 +58,26 @@ div.connections-component-name {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
#connections-dialog {
height: 400px;
width: 680px;
}
#connections-context {
padding: 5px;
}
#connections-source { #connections-source {
float: left; float: left;
} }
#connections-destination { #connections-destination {
float: left; float: left;
margin-left: 370px; margin-left: 360px;
} }
#connections-container { #connections-container {
width: 612px; width: 612px;
height: 190px;
border: 1px solid #aaa;
padding: 5px; padding: 5px;
overflow-y: auto; overflow-y: auto;
} }

View File

@ -186,16 +186,14 @@ nf.ContextMenu = (function () {
* @param {selection} selection The selection * @param {selection} selection The selection
*/ */
var hasDownstream = function (selection) { var hasDownstream = function (selection) {
// TODO // ensure the correct number of components are selected
// // ensure the correct number of components are selected if (selection.size() !== 1) {
// if (selection.size() !== 1) {
// return false;
// }
//
// return nf.CanvasUtils.isFunnel(selection) || nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isProcessGroup(selection) ||
// nf.CanvasUtils.isRemoteProcessGroup(selection) || nf.CanvasUtils.isInputPort(selection) ||
// (nf.CanvasUtils.isOutputPort(selection) && nf.Canvas.getParentGroupId() !== null);
return false; return false;
}
return nf.CanvasUtils.isFunnel(selection) || nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isProcessGroup(selection) ||
nf.CanvasUtils.isRemoteProcessGroup(selection) || nf.CanvasUtils.isInputPort(selection) ||
(nf.CanvasUtils.isOutputPort(selection) && nf.Canvas.getParentGroupId() !== null);
}; };
/** /**
@ -204,16 +202,14 @@ nf.ContextMenu = (function () {
* @param {selection} selection The selection * @param {selection} selection The selection
*/ */
var hasUpstream = function (selection) { var hasUpstream = function (selection) {
// TODO // ensure the correct number of components are selected
// // ensure the correct number of components are selected if (selection.size() !== 1) {
// if (selection.size() !== 1) {
// return false;
// }
//
// return nf.CanvasUtils.isFunnel(selection) || nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isProcessGroup(selection) ||
// nf.CanvasUtils.isRemoteProcessGroup(selection) || nf.CanvasUtils.isOutputPort(selection) ||
// (nf.CanvasUtils.isInputPort(selection) && nf.Canvas.getParentGroupId() !== null);
return false; return false;
}
return nf.CanvasUtils.isFunnel(selection) || nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isProcessGroup(selection) ||
nf.CanvasUtils.isRemoteProcessGroup(selection) || nf.CanvasUtils.isOutputPort(selection) ||
(nf.CanvasUtils.isInputPort(selection) && nf.Canvas.getParentGroupId() !== null);
}; };
/** /**

View File

@ -25,70 +25,50 @@ nf.GoTo = (function () {
var config = { var config = {
urls: { urls: {
api: '../nifi-api', api: '../nifi-api',
processGroups: '../nifi-api/process-groups/' processGroups: '../nifi-api/flow/process-groups/'
} }
}; };
/** var currentComponentId;
* Returns a deferred for the process group. var currentComponentLabel;
*
* @param {string} processGroupId
*/
var getProcessGroup = function (processGroupId) {
return $.ajax({
type: 'GET',
url: config.urls.processGroups + encodeURIComponent(processGroupId),
dataType: 'json'
});
};
/**
* Returns a deferred for the remote process group.
*
* @param {string} parentGroupId
* @param {string} remoteProcessGroupId
*/
var getRemoteProcessGroup = function (parentGroupId, remoteProcessGroupId) {
return $.ajax({
type: 'GET',
url: config.urls.processGroups + encodeURIComponent(parentGroupId) + '/remote-process-groups/' + encodeURIComponent(remoteProcessGroupId),
dataType: 'json'
});
};
/** /**
* Adds a connection to the connections dialog. * Adds a connection to the connections dialog.
* *
* @param {object} connection * @param {string} parentProcessGroupId
* @param {object} connectionEntity
* @param {array} processGroupEntities
* @param {array} remoteProcessGroupEntities
*/ */
var addConnection = function (connection) { var addConnection = function (parentProcessGroupId, connectionEntity, processGroupEntities, remoteProcessGroupEntities) {
var container = $('<div class="source-destination-connection"></div>').appendTo('#connections-container'); var container = $('<div class="source-destination-connection"></div>').appendTo('#connections-container');
var source; if (connectionEntity.sourceType === 'OUTPUT_PORT') {
if (connection.source.type === 'OUTPUT_PORT') { addSourceOutputPort(parentProcessGroupId, container, connectionEntity, processGroupEntities);
source = addSourceOutputPort(container, connection); } else if (connectionEntity.sourceType === 'REMOTE_OUTPUT_PORT') {
} else if (connection.source.type === 'REMOTE_OUTPUT_PORT') { addSourceRemoteOutputPort(parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities);
source = addSourceRemoteOutputPort(container, connection);
} else { } else {
source = addSourceComponent(container, connection); addSourceComponent(container, connectionEntity);
} }
source.done(function () {
var connectionEntry = $('<div class="connection-entry"></div>').appendTo(container); var connectionEntry = $('<div class="connection-entry"></div>').appendTo(container);
// format the connection name.. fall back to id // format the connection name.. fall back to id
var connectionStyle = ''; var connectionStyle = 'unset';
var connectionName = nf.CanvasUtils.formatConnectionName(connection); var connectionName = 'Connection';
if (connectionName === '') { if (connectionEntity.permissions.canRead === true) {
connectionStyle = 'unset'; var formattedConnectionName = nf.CanvasUtils.formatConnectionName(connectionEntity.component);
connectionName = 'Connection'; if (formattedConnectionName !== '') {
connectionStyle = '';
connectionName = formattedConnectionName;
}
} }
// connection // connection
$('<div class="search-result-icon connection-small-icon"></div>').appendTo(connectionEntry); $('<div class="search-result-icon icon-connect"></div>').appendTo(connectionEntry);
$('<div class="connection-entry-name go-to-link"></div>').attr('title', connectionName).addClass(connectionStyle).text(connectionName).on('click', function () { $('<div class="connection-entry-name go-to-link"></div>').attr('title', connectionName).addClass(connectionStyle).text(connectionName).on('click', function () {
// go to the connection // go to the connection
nf.CanvasUtils.showComponent(connection.parentGroupId, connection.id); nf.CanvasUtils.showComponent(parentProcessGroupId, connectionEntity.id);
// close the dialog // close the dialog
$('#connections-dialog').modal('hide'); $('#connections-dialog').modal('hide');
@ -97,44 +77,47 @@ nf.GoTo = (function () {
// clear // clear
$('<div class="clear"></div>').appendTo(connectionEntry); $('<div class="clear"></div>').appendTo(connectionEntry);
var destination; if (connectionEntity.destinationType === 'INPUT_PORT') {
if (connection.destination.type === 'INPUT_PORT') { addDestinationInputPort(parentProcessGroupId, container, connectionEntity, processGroupEntities);
destination = addDestinationInputPort(container, connection); } else if (connectionEntity.destinationType === 'REMOTE_INPUT_PORT') {
} else if (connection.destination.type === 'REMOTE_INPUT_PORT') { addDestinationRemoteInputPort(parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities);
destination = addDestinationRemoteInputPort(container, connection);
} else { } else {
destination = addDestinationComponent(container, connection); addDestinationComponent(container, connectionEntity);
} }
destination.done(function () {
// clear // clear
$('<div class="clear"></div>').appendTo(container); $('<div class="clear"></div>').appendTo(container);
});
});
}; };
/** /**
* Adds a destination component to the dialog. * Adds a destination component to the dialog.
* *
* @param {jQuery} container The container to add to * @param {jQuery} container The container to add to
* @param {object} connection The connection to the downstream component * @param {object} connectionEntity The connection to the downstream component
*/ */
var addDestinationComponent = function (container, connection) { var addDestinationComponent = function (container, connectionEntity) {
return $.Deferred(function (deferred) {
// get the appropriate component icon // get the appropriate component icon
var smallIconClass = ''; var smallIconClass = 'icon-funnel';
if (connection.destination.type === 'PROCESSOR') { if (connectionEntity.destinationType === 'PROCESSOR') {
smallIconClass = 'processor-small-icon'; smallIconClass = 'icon-processor';
} else if (connection.destination.type === 'OUTPUT_PORT') { } else if (connectionEntity.destinationType === 'OUTPUT_PORT') {
smallIconClass = 'output-port-small-icon'; smallIconClass = 'icon-port-out';
}
// get the source name
var destinationName = connectionEntity.destinationId;
if (connectionEntity.permissions.canRead === true) {
destinationName = connectionEntity.component.destination.name;
} else if (currentComponentId === connectionEntity.destinationId) {
destinationName = currentComponentLabel;
} }
// component // component
var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container); var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
$('<div class="search-result-icon"></div>').addClass(smallIconClass).appendTo(downstreamComponent); $('<div class="search-result-icon"></div>').addClass(smallIconClass).appendTo(downstreamComponent);
$('<div class="destination-component-name go-to-link"></div>').attr('title', connection.destination.name).text(connection.destination.name).on('click', function () { $('<div class="destination-component-name go-to-link"></div>').attr('title', destinationName).text(destinationName).on('click', function () {
// go to the component // go to the component
nf.CanvasUtils.showComponent(connection.destination.groupId, connection.destination.id); nf.CanvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId);
// close the dialog // close the dialog
$('#connections-dialog').modal('hide'); $('#connections-dialog').modal('hide');
@ -142,28 +125,34 @@ nf.GoTo = (function () {
// clear // clear
$('<div class="clear"></div>').appendTo(downstreamComponent); $('<div class="clear"></div>').appendTo(downstreamComponent);
deferred.resolve();
}).promise();
}; };
/** /**
* Adds a destination input port to the dialog. * Adds a destination input port to the dialog.
* *
* @param {string} parentProcessGroupId The process group id
* @param {jQuery} container The container to add to * @param {jQuery} container The container to add to
* @param {object} connection The connection to the downstream input port * @param {object} connectionEntity The connection to the downstream input port
* @param {array} processGroupEntities The process groups
*/ */
var addDestinationInputPort = function (container, connection) { var addDestinationInputPort = function (parentProcessGroupId, container, connectionEntity, processGroupEntities) {
// get the remote process group var processGroupEntity;
return getProcessGroup(connection.destination.groupId).done(function (response) { $.each(processGroupEntities, function (_, pge) {
var processGroup = response.component; if (connectionEntity.destinationGroupId === pge.id) {
processGroupEntity = pge;
return false;
}
});
// get the group label
var groupLabel = getDisplayName(processGroupEntity);
// process group // process group
var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container); var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
$('<div class="search-result-icon process-group-small-icon"></div>').appendTo(downstreamComponent); $('<div class="search-result-icon icon-group"></div>').appendTo(downstreamComponent);
$('<div class="destination-component-name go-to-link"></div>').attr('title', processGroup.name).text(processGroup.name).on('click', function () { $('<div class="destination-component-name go-to-link"></div>').attr('title', groupLabel).text(groupLabel).on('click', function () {
// go to the remote process group // go to the remote process group
nf.CanvasUtils.showComponent(processGroup.parentGroupId, processGroup.id); nf.CanvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id);
// close the dialog // close the dialog
$('#connections-dialog').modal('hide'); $('#connections-dialog').modal('hide');
@ -172,12 +161,20 @@ nf.GoTo = (function () {
// clear // clear
$('<div class="clear"></div>').appendTo(downstreamComponent); $('<div class="clear"></div>').appendTo(downstreamComponent);
// get the port label
var portLabel = connectionEntity.destinationId;
if (connectionEntity.permissions.canRead === true) {
portLabel = connectionEntity.component.destination.name;
} else if (currentComponentId === connectionEntity.destinationId) {
portLabel = currentComponentLabel;
}
// input port // input port
var downstreamInputPort = $('<div class="destination-input-port"></div>').appendTo(downstreamComponent); var downstreamInputPort = $('<div class="destination-input-port"></div>').appendTo(downstreamComponent);
$('<div class="search-result-icon input-port-small-icon"></div>').appendTo(downstreamInputPort); $('<div class="search-result-icon icon-port-in"></div>').appendTo(downstreamInputPort);
$('<div class="destination-input-port-name go-to-link"></div>').attr('title', connection.destination.name).text(connection.destination.name).on('click', function () { $('<div class="destination-input-port-name go-to-link"></div>').attr('title', portLabel).text(portLabel).on('click', function () {
// go to the remote process group // go to the remote process group
nf.CanvasUtils.showComponent(connection.destination.groupId, connection.destination.id); nf.CanvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId);
// close the dialog // close the dialog
$('#connections-dialog').modal('hide'); $('#connections-dialog').modal('hide');
@ -185,26 +182,34 @@ nf.GoTo = (function () {
// clear // clear
$('<div class="clear"></div>').appendTo(downstreamComponent); $('<div class="clear"></div>').appendTo(downstreamComponent);
});
}; };
/** /**
* Adds a destination remote input port to the dialog. * Adds a destination remote input port to the dialog.
* *
* @param {string} parentProcessGroupId The process group id
* @param {jQuery} container The container to add to * @param {jQuery} container The container to add to
* @param {object} connection The connection to the downstream remote input port * @param {object} connectionEntity The connection to the downstream remote input port
* @param {array} remoteProcessGroupEntities The remote process groups
*/ */
var addDestinationRemoteInputPort = function (container, connection) { var addDestinationRemoteInputPort = function (parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities) {
// get the remote process group var remoteProcessGroupEntity;
return getRemoteProcessGroup(connection.parentGroupId, connection.destination.groupId).done(function (response) { $.each(remoteProcessGroupEntities, function (_, rpge) {
var remoteProcessGroup = response.remoteProcessGroup; if (connectionEntity.destinationGroupId === rpge.id) {
remoteProcessGroupEntity = rpge;
return false;
}
});
// get the group label
var remoteGroupLabel = getDisplayName(remoteProcessGroupEntity);
// remote process group // remote process group
var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container); var downstreamComponent = $('<div class="destination-component"></div>').appendTo(container);
$('<div class="search-result-icon remote-process-group-small-icon"></div>').appendTo(downstreamComponent); $('<div class="search-result-icon icon-group-remote"></div>').appendTo(downstreamComponent);
$('<div class="destination-component-name go-to-link"></div>').attr('title', remoteProcessGroup.name).text(remoteProcessGroup.name).on('click', function () { $('<div class="destination-component-name go-to-link"></div>').attr('title', remoteGroupLabel).text(remoteGroupLabel).on('click', function () {
// go to the remote process group // go to the remote process group
nf.CanvasUtils.showComponent(remoteProcessGroup.parentGroupId, remoteProcessGroup.id); nf.CanvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id);
// close the dialog // close the dialog
$('#connections-dialog').modal('hide'); $('#connections-dialog').modal('hide');
@ -213,107 +218,182 @@ nf.GoTo = (function () {
// clear // clear
$('<div class="clear"></div>').appendTo(downstreamComponent); $('<div class="clear"></div>').appendTo(downstreamComponent);
// get the port label
var remotePortLabel = connectionEntity.destinationId;
if (connectionEntity.permissions.canRead === true) {
remotePortLabel = connectionEntity.component.destination.name;
} else if (currentComponentId === connectionEntity.destinationId) {
remotePortLabel = currentComponentLabel;
}
// remote input port // remote input port
var downstreamInputPort = $('<div class="destination-input-port"></div>').appendTo(downstreamComponent); var downstreamInputPort = $('<div class="destination-input-port"></div>').appendTo(downstreamComponent);
$('<div class="search-result-icon input-port-small-icon"></div>').appendTo(downstreamInputPort); $('<div class="search-result-icon icon-port-in"></div>').appendTo(downstreamInputPort);
$('<div class="destination-input-port-name"></div>').attr('title', connection.destination.name).text(connection.destination.name).appendTo(downstreamInputPort); $('<div class="destination-input-port-name"></div>').attr('title', remotePortLabel).text(remotePortLabel).appendTo(downstreamInputPort);
// clear // clear
$('<div class="clear"></div>').appendTo(downstreamComponent); $('<div class="clear"></div>').appendTo(downstreamComponent);
});
}; };
/** /**
* Adds a source component to the dialog. * Adds a source component to the dialog.
* *
* @param {jQuery} container The container to add to * @param {jQuery} container The container to add to
* @param {object} connection The connection to the upstream component * @param {object} connectionEntity The connection to the upstream component
*/ */
var addSourceComponent = function (container, connection) { var addSourceComponent = function (container, connectionEntity) {
return $.Deferred(function (deferred) {
// get the appropriate component icon // get the appropriate component icon
var smallIconClass = ''; var smallIconClass = 'icon-funnel';
if (connection.source.type === 'PROCESSOR') { if (connectionEntity.sourceType === 'PROCESSOR') {
smallIconClass = 'processor-small-icon'; smallIconClass = 'icon-processor';
} else if (connection.source.type === 'INPUT_PORT') { } else if (connectionEntity.sourceType === 'INPUT_PORT') {
smallIconClass = 'input-port-small-icon'; smallIconClass = 'icon-port-in';
}
// get the source name
var sourceName = connectionEntity.sourceId;
if (connectionEntity.permissions.canRead === true) {
sourceName = connectionEntity.component.source.name;
} else if (currentComponentId === connectionEntity.sourceId) {
sourceName = currentComponentLabel;
} }
// component // component
var sourceComponent = $('<div class="source-component"></div>').appendTo(container); var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
$('<div class="search-result-icon"></div>').addClass(smallIconClass).appendTo(sourceComponent); $('<div class="search-result-icon"></div>').addClass(smallIconClass).appendTo(sourceComponent);
$('<div class="source-component-name go-to-link"></div>').attr('title', connection.source.name).text(connection.source.name).on('click', function () { $('<div class="source-component-name go-to-link"></div>').attr('title', sourceName).text(sourceName).on('click', function () {
// go to the component // go to the component
nf.CanvasUtils.showComponent(connection.source.groupId, connection.source.id); nf.CanvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId);
// close the dialog // close the dialog
$('#connections-dialog').modal('hide'); $('#connections-dialog').modal('hide');
}).appendTo(sourceComponent); }).appendTo(sourceComponent);
deferred.resolve(); // clear
}).promise(); $('<div class="clear"></div>').appendTo(sourceComponent);
}; };
/** /**
* Adds a source output port to the dialog. * Adds a source output port to the dialog.
* *
* @param {string} parentProcessGroupId The process group id
* @param {jQuery} container The container to add to * @param {jQuery} container The container to add to
* @param {object} connection The connection * @param {object} connectionEntity The connection
* @param {array} processGroupEntities The process groups
*/ */
var addSourceOutputPort = function (container, connection) { var addSourceOutputPort = function (parentProcessGroupId, container, connectionEntity, processGroupEntities) {
// get the remote process group var processGroupEntity;
return getProcessGroup(connection.source.groupId).done(function (response) { $.each(processGroupEntities, function (_, pge) {
var processGroup = response.component; if (connectionEntity.sourceGroupId === pge.id) {
processGroupEntity = pge;
return false;
}
});
// get the group label
var groupLabel = getDisplayName(processGroupEntity);
// process group // process group
var sourceComponent = $('<div class="source-component"></div>').appendTo(container); var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
$('<div class="search-result-icon process-group-small-icon"></div>').appendTo(sourceComponent); $('<div class="search-result-icon icon-group"></div>').appendTo(sourceComponent);
$('<div class="source-component-name go-to-link"></div>').attr('title', processGroup.name).text(processGroup.name).on('click', function () { $('<div class="source-component-name go-to-link"></div>').attr('title', groupLabel).text(groupLabel).on('click', function () {
// go to the process group // go to the process group
nf.CanvasUtils.showComponent(processGroup.parentGroupId, processGroup.id); nf.CanvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id);
// close the dialog // close the dialog
$('#connections-dialog').modal('hide'); $('#connections-dialog').modal('hide');
}).appendTo(sourceComponent); }).appendTo(sourceComponent);
// clear
$('<div class="clear"></div>').appendTo(sourceComponent); $('<div class="clear"></div>').appendTo(sourceComponent);
// get the port label
var portLabel = connectionEntity.sourceId;
if (connectionEntity.permissions.canRead === true) {
portLabel = connectionEntity.component.source.name;
} else if (currentComponentId === connectionEntity.sourceId) {
portLabel = currentComponentLabel;
}
var sourceOutputPort = $('<div class="source-output-port"></div>').appendTo(sourceComponent); var sourceOutputPort = $('<div class="source-output-port"></div>').appendTo(sourceComponent);
$('<div class="search-result-icon output-port-small-icon"></div>').appendTo(sourceOutputPort); $('<div class="search-result-icon icon-port-out"></div>').appendTo(sourceOutputPort);
$('<div class="source-output-port-name go-to-link"></div>').attr('title', connection.source.name).text(connection.source.name).on('click', function () { $('<div class="source-output-port-name go-to-link"></div>').attr('title', portLabel).text(portLabel).on('click', function () {
// go to the output port // go to the output port
nf.CanvasUtils.showComponent(connection.source.groupId, connection.source.id); nf.CanvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId);
// close the dialog // close the dialog
$('#connections-dialog').modal('hide'); $('#connections-dialog').modal('hide');
}).appendTo(sourceOutputPort); }).appendTo(sourceOutputPort);
});
// clear
$('<div class="clear"></div>').appendTo(sourceComponent);
}; };
/** /**
* Adds a source remote output port to the dialog. * Adds a source remote output port to the dialog.
* *
* @param {string} parentProcessGroupId The process group id
* @param {jQuery} container The container to add to * @param {jQuery} container The container to add to
* @param {object} connection The connection to the downstream remote output port * @param {object} connectionEntity The connection to the downstream remote output port
* @param {array} remoteProcessGroupEntities The remote process groups
*/ */
var addSourceRemoteOutputPort = function (container, connection) { var addSourceRemoteOutputPort = function (parentProcessGroupId, container, connectionEntity, remoteProcessGroupEntities) {
// get the remote process group var remoteProcessGroupEntity;
return getRemoteProcessGroup(connection.parentGroupId, connection.source.groupId).done(function (response) { $.each(remoteProcessGroupEntities, function (_, rpge) {
var remoteProcessGroup = response.remoteProcessGroup; if (connectionEntity.sourceGroupId === rpge.id) {
remoteProcessGroupEntity = rpge;
return false;
}
});
// get the group label
var remoteGroupLabel = getDisplayName(remoteProcessGroupEntity);
// remote process group // remote process group
var sourceComponent = $('<div class="source-component"></div>').appendTo(container); var sourceComponent = $('<div class="source-component"></div>').appendTo(container);
$('<div class="search-result-icon remote-process-group-small-icon"></div>').appendTo(sourceComponent); $('<div class="search-result-icon icon-group-remote"></div>').appendTo(sourceComponent);
$('<div class="source-component-name go-to-link"></div>').attr('title', remoteProcessGroup.name).text(remoteProcessGroup.name).on('click', function () { $('<div class="source-component-name go-to-link"></div>').attr('title', remoteGroupLabel).text(remoteGroupLabel).on('click', function () {
// go to the remote process group // go to the remote process group
nf.CanvasUtils.showComponent(remoteProcessGroup.parentGroupId, remoteProcessGroup.id); nf.CanvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id);
// close the dialog // close the dialog
$('#connections-dialog').modal('hide'); $('#connections-dialog').modal('hide');
}).appendTo(sourceComponent); }).appendTo(sourceComponent);
// clear
$('<div class="clear"></div>').appendTo(sourceComponent); $('<div class="clear"></div>').appendTo(sourceComponent);
// get the port label
var remotePortLabel = connectionEntity.sourceId;
if (connectionEntity.permissions.canRead === true) {
remotePortLabel = connectionEntity.component.source.name;
} else if (connectionEntity.sourceId === currentComponentId) {
remotePortLabel = currentComponentLabel;
}
// port markup
var sourceOutputPort = $('<div class="source-output-port"></div>').appendTo(sourceComponent); var sourceOutputPort = $('<div class="source-output-port"></div>').appendTo(sourceComponent);
$('<div class="search-result-icon output-port-small-icon"></div>').appendTo(sourceOutputPort); $('<div class="search-result-icon icon-port-out"></div>').appendTo(sourceOutputPort);
$('<div class="source-output-port-name"></div>').attr('title', connection.source.name).text(connection.source.name).appendTo(sourceOutputPort); $('<div class="source-output-port-name"></div>').attr('title', remotePortLabel).text(remotePortLabel).appendTo(sourceOutputPort);
});
// clear
$('<div class="clear"></div>').appendTo(sourceComponent);
};
/**
* Gets the display name for the specified entity.
*
* @param entity entity
* @returns display name
*/
var getDisplayName = function (entity) {
if (entity.permissions.canRead === true) {
return entity.component.name;
} else if (currentComponentId === entity.id) {
return currentComponentLabel;
} else {
return entity.id;
}
}; };
return { return {
@ -351,26 +431,28 @@ nf.GoTo = (function () {
* @param {selection} selection The processor selection * @param {selection} selection The processor selection
*/ */
showDownstreamFromProcessor: function (selection) { showDownstreamFromProcessor: function (selection) {
var selectionData = selection.datum(); var processorEntity = selection.datum();
var connections = nf.Connection.get();
var processGroups = nf.ProcessGroup.get();
var remoteProcessGroups = nf.RemoteProcessGroup.get();
$.ajax({ var processorLabel = getDisplayName(processorEntity);
type: 'GET',
url: config.urls.api + '/process-groups/' + encodeURIComponent(selectionData.component.parentGroupId) + '/connections', // record details of the current component
dataType: 'json' currentComponentId = processorEntity.id;
}).done(function (response) { currentComponentLabel = processorLabel;
var connections = response.connections;
// populate the downstream dialog // populate the downstream dialog
$('#connections-context') $('#connections-context')
.append('<div class="search-result-icon processor-small-icon"></div>') .append('<div class="search-result-icon icon-processor"></div>')
.append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) .append($('<div class="connections-component-name"></div>').text(processorLabel))
.append('<div class="clear"></div>'); .append('<div class="clear"></div>');
// add the destination for each connection // add the destination for each connection
$.each(connections, function (_, connection) { $.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the source // only show connections for which this selection is the source
if (connection.source.id === selectionData.id) { if (connectionEntity.sourceId === processorEntity.id) {
addConnection(connection); addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
} }
}); });
@ -381,7 +463,6 @@ nf.GoTo = (function () {
// show the downstream dialog // show the downstream dialog
$('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show'); $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show');
}).fail(nf.Common.handleAjaxError);
}, },
/** /**
@ -390,26 +471,28 @@ nf.GoTo = (function () {
* @param {selection} selection The processor selection * @param {selection} selection The processor selection
*/ */
showUpstreamFromProcessor: function (selection) { showUpstreamFromProcessor: function (selection) {
var selectionData = selection.datum(); var processorEntity = selection.datum();
var connections = nf.Connection.get();
var processGroups = nf.ProcessGroup.get();
var remoteProcessGroups = nf.RemoteProcessGroup.get();
$.ajax({ var processorLabel = getDisplayName(processorEntity);
type: 'GET',
url: config.urls.api + '/process-groups/' + encodeURIComponent(selectionData.component.parentGroupId) + '/connections', // record details of the current component
dataType: 'json' currentComponentId = processorEntity.id;
}).done(function (response) { currentComponentLabel = processorLabel;
var connections = response.connections;
// populate the upstream dialog // populate the upstream dialog
$('#connections-context') $('#connections-context')
.append('<div class="search-result-icon processor-small-icon"></div>') .append('<div class="search-result-icon icon-processor"></div>')
.append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) .append($('<div class="connections-component-name"></div>').text(processorLabel))
.append('<div class="clear"></div>'); .append('<div class="clear"></div>');
// add the source for each connection // add the source for each connection
$.each(connections, function (_, connection) { $.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the destination // only show connections for which this selection is the destination
if (connection.destination.id === selectionData.id) { if (connectionEntity.destinationId === processorEntity.id) {
addConnection(connection); addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
} }
}); });
@ -420,7 +503,6 @@ nf.GoTo = (function () {
// show the upstream dialog // show the upstream dialog
$('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show'); $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show');
}).fail(nf.Common.handleAjaxError);
}, },
/** /**
@ -429,26 +511,33 @@ nf.GoTo = (function () {
* @param {selection} selection The process group or remote process group selection * @param {selection} selection The process group or remote process group selection
*/ */
showDownstreamFromGroup: function (selection) { showDownstreamFromGroup: function (selection) {
var selectionData = selection.datum(); var groupEntity = selection.datum();
var connections = nf.Connection.get();
var processGroups = nf.ProcessGroup.get();
var remoteProcessGroups = nf.RemoteProcessGroup.get();
$.ajax({ var iconStyle = 'icon-group';
type: 'GET', if (nf.CanvasUtils.isRemoteProcessGroup(selection)) {
url: config.urls.api + '/process-groups/' + encodeURIComponent(selectionData.component.parentGroupId) + '/connections', iconStyle = 'icon-group-remote';
dataType: 'json' }
}).done(function (response) {
var connections = response.connections; var groupLabel = getDisplayName(groupEntity);
// record details of the current component
currentComponentId = groupEntity.id;
currentComponentLabel = groupLabel;
// populate the downstream dialog // populate the downstream dialog
$('#connections-context') $('#connections-context')
.append('<div class="search-result-icon process-group-small-icon"></div>') .append($('<div class="search-result-icon"></div>').addClass(iconStyle))
.append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) .append($('<div class="connections-component-name"></div>').text(groupLabel))
.append('<div class="clear"></div>'); .append('<div class="clear"></div>');
// add the destination for each connection // add the destination for each connection
$.each(connections, function (_, connection) { $.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the source // only show connections for which this selection is the source
if (connection.source.groupId === selectionData.id) { if (connectionEntity.sourceGroupId === groupEntity.id) {
addConnection(connection); addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
} }
}); });
@ -459,7 +548,6 @@ nf.GoTo = (function () {
// show the downstream dialog // show the downstream dialog
$('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show'); $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show');
}).fail(nf.Common.handleAjaxError);
}, },
/** /**
@ -468,26 +556,33 @@ nf.GoTo = (function () {
* @param {selection} selection The process group or remote process group selection * @param {selection} selection The process group or remote process group selection
*/ */
showUpstreamFromGroup: function (selection) { showUpstreamFromGroup: function (selection) {
var selectionData = selection.datum(); var groupEntity = selection.datum();
var connections = nf.Connection.get();
var processGroups = nf.ProcessGroup.get();
var remoteProcessGroups = nf.RemoteProcessGroup.get();
$.ajax({ var iconStyle = 'icon-group';
type: 'GET', if (nf.CanvasUtils.isRemoteProcessGroup(selection)) {
url: config.urls.api + '/process-groups/' + encodeURIComponent(selectionData.component.parentGroupId) + '/connections', iconStyle = 'icon-group-remote';
dataType: 'json' }
}).done(function (response) {
var connections = response.connections; var groupLabel = getDisplayName(groupEntity);
// record details of the current component
currentComponentId = groupEntity.id;
currentComponentLabel = groupLabel;
// populate the upstream dialog // populate the upstream dialog
$('#connections-context') $('#connections-context')
.append('<div class="search-result-icon process-group-small-icon"></div>') .append($('<div class="search-result-icon"></div>').addClass(iconStyle))
.append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) .append($('<div class="connections-component-name"></div>').text(groupLabel))
.append('<div class="clear"></div>'); .append('<div class="clear"></div>');
// add the source for each connection // add the source for each connection
$.each(connections, function (_, connection) { $.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the destination // only show connections for which this selection is the destination
if (connection.destination.groupId === selectionData.id) { if (connectionEntity.destinationGroupId === groupEntity.id) {
addConnection(connection); addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
} }
}); });
@ -498,7 +593,6 @@ nf.GoTo = (function () {
// show the dialog // show the dialog
$('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show'); $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show');
}).fail(nf.Common.handleAjaxError);
}, },
/** /**
@ -507,26 +601,28 @@ nf.GoTo = (function () {
* @param {selection} selection The input port selection * @param {selection} selection The input port selection
*/ */
showDownstreamFromInputPort: function (selection) { showDownstreamFromInputPort: function (selection) {
var selectionData = selection.datum(); var portEntity = selection.datum();
var connections = nf.Connection.get();
var processGroups = nf.ProcessGroup.get();
var remoteProcessGroups = nf.RemoteProcessGroup.get();
$.ajax({ var portLabel = getDisplayName(portEntity);
type: 'GET',
url: config.urls.api + '/process-groups/' + encodeURIComponent(selectionData.component.parentGroupId) + '/connections', // record details of the current component
dataType: 'json' currentComponentId = portEntity.id;
}).done(function (response) { currentComponentLabel = portLabel;
var connections = response.connections;
// populate the downstream dialog // populate the downstream dialog
$('#connections-context') $('#connections-context')
.append('<div class="search-result-icon input-port-small-icon"></div>') .append('<div class="search-result-icon icon-port-in"></div>')
.append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) .append($('<div class="connections-component-name"></div>').text(portLabel))
.append('<div class="clear"></div>'); .append('<div class="clear"></div>');
// add the destination for each connection // add the destination for each connection
$.each(connections, function (_, connection) { $.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the source // only show connections for which this selection is the source
if (connection.source.id === selectionData.id) { if (connectionEntity.sourceId === portEntity.id) {
addConnection(connection); addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
} }
}); });
@ -537,7 +633,6 @@ nf.GoTo = (function () {
// show the downstream dialog // show the downstream dialog
$('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show'); $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show');
}).fail(nf.Common.handleAjaxError);
}, },
/** /**
@ -546,29 +641,38 @@ nf.GoTo = (function () {
* @param {selection} selection The input port selection * @param {selection} selection The input port selection
*/ */
showUpstreamFromInputPort: function (selection) { showUpstreamFromInputPort: function (selection) {
var selectionData = selection.datum(); var portEntity = selection.datum();
$.ajax({ $.ajax({
type: 'GET', type: 'GET',
url: config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getParentGroupId()) + '/connections', url: config.urls.processGroups + encodeURIComponent(nf.Canvas.getParentGroupId()),
dataType: 'json' dataType: 'json'
}).done(function (response) { }).done(function (response) {
var connections = response.connections; var flow = response.processGroupFlow.flow;
var connections = flow.connections;
var processGroups = flow.processGroups;
var remoteProcessGroups = flow.remoteProcessGroups;
var portLabel = getDisplayName(portEntity);
// record details of the current component
currentComponentId = portEntity.id;
currentComponentLabel = portLabel;
// populate the upstream dialog // populate the upstream dialog
$('#connections-context') $('#connections-context')
.append('<div class="search-result-icon process-group-small-icon"></div>') .append('<div class="search-result-icon icon-group"></div>')
.append($('<div class="connections-component-name"></div>').text(nf.Canvas.getGroupName())) .append($('<div class="connections-component-name"></div>').text(nf.Canvas.getGroupName()))
.append('<div class="clear"></div>') .append('<div class="clear"></div>')
.append('<div class="search-result-icon input-port-small-icon" style="margin-left: 20px;"></div>') .append('<div class="search-result-icon icon-port-in" style="margin-left: 20px;"></div>')
.append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) .append($('<div class="connections-component-name"></div>').text(portLabel))
.append('<div class="clear"></div>'); .append('<div class="clear"></div>');
// add the source for each connection // add the source for each connection
$.each(connections, function (_, connection) { $.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the destination // only show connections for which this selection is the destination
if (connection.destination.id === selectionData.id) { if (connectionEntity.destinationId === portEntity.id) {
addConnection(connection); addConnection(nf.Canvas.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups);
} }
}); });
@ -588,29 +692,38 @@ nf.GoTo = (function () {
* @param {selection} selection The output port selection * @param {selection} selection The output port selection
*/ */
showDownstreamFromOutputPort: function (selection) { showDownstreamFromOutputPort: function (selection) {
var selectionData = selection.datum(); var portEntity = selection.datum();
$.ajax({ $.ajax({
type: 'GET', type: 'GET',
url: config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getParentGroupId()) + '/connections', url: config.urls.processGroups + encodeURIComponent(nf.Canvas.getParentGroupId()),
dataType: 'json' dataType: 'json'
}).done(function (response) { }).done(function (response) {
var connections = response.connections; var flow = response.processGroupFlow.flow;
var connections = flow.connections;
var processGroups = flow.processGroups;
var remoteProcessGroups = flow.remoteProcessGroups;
var portLabel = getDisplayName(portEntity);
// record details of the current component
currentComponentId = portEntity.id;
currentComponentLabel = portLabel;
// populate the downstream dialog // populate the downstream dialog
$('#connections-context') $('#connections-context')
.append('<div class="search-result-icon process-group-small-icon"></div>') .append('<div class="search-result-icon icon-group"></div>')
.append($('<div class="connections-component-name"></div>').text(nf.Canvas.getGroupName())) .append($('<div class="connections-component-name"></div>').text(nf.Canvas.getGroupName()))
.append('<div class="clear"></div>') .append('<div class="clear"></div>')
.append('<div class="search-result-icon output-port-small-icon" style="margin-left: 20px;"></div>') .append('<div class="search-result-icon icon-port-out" style="margin-left: 20px;"></div>')
.append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) .append($('<div class="connections-component-name"></div>').text(portLabel))
.append('<div class="clear"></div>'); .append('<div class="clear"></div>');
// add the destination for each connection // add the destination for each connection
$.each(connections, function (_, connection) { $.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the source // only show connections for which this selection is the source
if (connection.source.id === selectionData.id) { if (connectionEntity.sourceId === portEntity.id) {
addConnection(connection); addConnection(nf.Canvas.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups);
} }
}); });
@ -630,26 +743,28 @@ nf.GoTo = (function () {
* @param {selection} selection The output port selection * @param {selection} selection The output port selection
*/ */
showUpstreamFromOutputPort: function (selection) { showUpstreamFromOutputPort: function (selection) {
var selectionData = selection.datum(); var portEntity = selection.datum();
var connections = nf.Connection.get();
var processGroups = nf.ProcessGroup.get();
var remoteProcessGroups = nf.RemoteProcessGroup.get();
$.ajax({ var portLabel = getDisplayName(portEntity);
type: 'GET',
url: config.urls.api + '/process-groups/' + encodeURIComponent(selectionData.component.parentGroupId) + '/connections', // record details of the current component
dataType: 'json' currentComponentId = portEntity.id;
}).done(function (response) { currentComponentLabel = portLabel;
var connections = response.connections;
// populate the upstream dialog // populate the upstream dialog
$('#connections-context') $('#connections-context')
.append('<div class="search-result-icon input-port-small-icon"></div>') .append('<div class="search-result-icon icon-port-out"></div>')
.append($('<div class="connections-component-name"></div>').text(selectionData.component.name)) .append($('<div class="connections-component-name"></div>').text(portLabel))
.append('<div class="clear"></div>'); .append('<div class="clear"></div>');
// add the source for each connection // add the source for each connection
$.each(connections, function (_, connection) { $.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the destination // only show connections for which this selection is the destination
if (connection.destination.id === selectionData.id) { if (connectionEntity.destinationId === portEntity.id) {
addConnection(connection); addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
} }
}); });
@ -660,7 +775,6 @@ nf.GoTo = (function () {
// show the upstream dialog // show the upstream dialog
$('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show'); $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show');
}).fail(nf.Common.handleAjaxError);
}, },
/** /**
@ -669,23 +783,26 @@ nf.GoTo = (function () {
* @param {selection} selection The funnel selection * @param {selection} selection The funnel selection
*/ */
showDownstreamFromFunnel: function (selection) { showDownstreamFromFunnel: function (selection) {
var selectionData = selection.datum(); var funnelEntity = selection.datum();
var connections = nf.Connection.get();
var processGroups = nf.ProcessGroup.get();
var remoteProcessGroups = nf.RemoteProcessGroup.get();
$.ajax({ // record details of the current component
type: 'GET', currentComponentId = funnelEntity.id;
url: config.urls.api + '/process-groups/' + encodeURIComponent(selectionData.component.parentGroupId) + '/connections', currentComponentLabel = 'Funnel';
dataType: 'json'
}).done(function (response) {
var connections = response.connections;
// populate the downstream dialog // populate the downstream dialog
$('#connections-context').append($('<div class="connections-component-name"></div>').text('Funnel')); $('#connections-context')
.append('<div class="search-result-icon icon-funnel"></div>')
.append($('<div class="connections-component-name"></div>').text('Funnel'))
.append('<div class="clear"></div>');
// add the destination for each connection // add the destination for each connection
$.each(connections, function (_, connection) { $.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the source // only show connections for which this selection is the source
if (connection.source.id === selectionData.id) { if (connectionEntity.sourceId === funnelEntity.id) {
addConnection(connection); addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
} }
}); });
@ -696,7 +813,6 @@ nf.GoTo = (function () {
// show the downstream dialog // show the downstream dialog
$('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show'); $('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show');
}).fail(nf.Common.handleAjaxError);
}, },
/** /**
@ -705,23 +821,26 @@ nf.GoTo = (function () {
* @param {selection} selection The funnel selection * @param {selection} selection The funnel selection
*/ */
showUpstreamFromFunnel: function (selection) { showUpstreamFromFunnel: function (selection) {
var selectionData = selection.datum(); var funnelEntity = selection.datum();
var connections = nf.Connection.get();
var processGroups = nf.ProcessGroup.get();
var remoteProcessGroups = nf.RemoteProcessGroup.get();
$.ajax({ // record details of the current component
type: 'GET', currentComponentId = funnelEntity.id;
url: config.urls.api + '/process-groups/' + encodeURIComponent(selectionData.component.parentGroupId) + '/connections', currentComponentLabel = 'Funnel';
dataType: 'json'
}).done(function (response) {
var connections = response.connections;
// populate the upstream dialog // populate the upstream dialog
$('#connections-context').append($('<div class="upstream-destination-name"></div>').text('Funnel')); $('#connections-context')
.append('<div class="search-result-icon icon-funnel"></div>')
.append($('<div class="upstream-destination-name"></div>').text('Funnel'))
.append('<div class="clear"></div>');
// add the source for each connection // add the source for each connection
$.each(connections, function (_, connection) { $.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the destination // only show connections for which this selection is the destination
if (connection.destination.id === selectionData.id) { if (connectionEntity.destinationId === funnelEntity.id) {
addConnection(connection); addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
} }
}); });
@ -732,7 +851,6 @@ nf.GoTo = (function () {
// show the upstream dialog // show the upstream dialog
$('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show'); $('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show');
}).fail(nf.Common.handleAjaxError);
} }
}; };
}()); }());