in nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts [139:542]
private updateRemoteProcessGroups(updated: any) {
if (updated.empty()) {
return;
}
const self: RemoteProcessGroupManager = this;
// remote process group border authorization
updated.select('rect.border').classed('unauthorized', function (d: any) {
return d.permissions.canRead === false;
});
// remote process group body authorization
updated.select('rect.body').classed('unauthorized', function (d: any) {
return d.permissions.canRead === false;
});
updated.each(function (this: any, remoteProcessGroupData: any) {
const remoteProcessGroup: any = d3.select(this);
let details: any = remoteProcessGroup.select('g.remote-process-group-details');
// update the component behavior as appropriate
self.editableBehavior.editable(remoteProcessGroup);
// if this processor is visible, render everything
if (remoteProcessGroup.classed('visible')) {
if (details.empty()) {
details = remoteProcessGroup.append('g').attr('class', 'remote-process-group-details');
// remote process group transmission status
details
.append('text')
.attr('class', 'remote-process-group-transmission-status')
.attr('x', 10)
.attr('y', 20);
// ------------------
// details background
// ------------------
details
.append('rect')
.attr('class', 'remote-process-group-details-banner banner')
.attr('x', 0)
.attr('y', 32)
.attr('width', function () {
return remoteProcessGroupData.dimensions.width;
})
.attr('height', 24);
// -------
// details
// -------
// remote process group secure transfer
details
.append('text')
.attr('class', 'remote-process-group-transmission-secure')
.attr('x', 10)
.attr('y', 48);
// remote process group uri
details
.append('text')
.attr('x', 30)
.attr('y', 48)
.attr('width', 305)
.attr('height', 12)
.attr('class', 'remote-process-group-uri');
// ----------------
// stats background
// ----------------
// sent
details
.append('rect')
.attr('class', 'remote-process-group-sent-stats odd')
.attr('width', function () {
return remoteProcessGroupData.dimensions.width;
})
.attr('height', 19)
.attr('x', 0)
.attr('y', 66);
// border
details
.append('rect')
.attr('class', 'remote-process-group-stats-border')
.attr('width', function () {
return remoteProcessGroupData.dimensions.width;
})
.attr('height', 1)
.attr('x', 0)
.attr('y', 84);
// received
details
.append('rect')
.attr('class', 'remote-process-group-received-stats even')
.attr('width', function () {
return remoteProcessGroupData.dimensions.width;
})
.attr('height', 19)
.attr('x', 0)
.attr('y', 85);
// -----
// stats
// -----
// stats label container
const remoteProcessGroupStatsLabel = details.append('g').attr('transform', 'translate(6, 75)');
// sent label
remoteProcessGroupStatsLabel
.append('text')
.attr('width', 73)
.attr('height', 10)
.attr('x', 4)
.attr('y', 5)
.attr('class', 'stats-label')
.text('Sent');
// received label
remoteProcessGroupStatsLabel
.append('text')
.attr('width', 73)
.attr('height', 10)
.attr('x', 4)
.attr('y', 23)
.attr('class', 'stats-label')
.text('Received');
// stats value container
const remoteProcessGroupStatsValue = details.append('g').attr('transform', 'translate(95, 75)');
// sent value
const sentText = remoteProcessGroupStatsValue
.append('text')
.attr('width', 180)
.attr('height', 10)
.attr('x', 4)
.attr('y', 5)
.attr('class', 'remote-process-group-sent stats-value');
// sent count
sentText.append('tspan').attr('class', 'count');
// sent size
sentText.append('tspan').attr('class', 'size');
// sent ports
sentText.append('tspan').attr('class', 'ports');
// received value
const receivedText = remoteProcessGroupStatsValue
.append('text')
.attr('width', 180)
.attr('height', 10)
.attr('x', 4)
.attr('y', 23)
.attr('class', 'remote-process-group-received stats-value');
// received ports
receivedText.append('tspan').attr('class', 'ports');
// received count
receivedText.append('tspan').attr('class', 'count');
// received size
receivedText.append('tspan').attr('class', 'size');
// stats value container
const processGroupStatsInfo = details.append('g').attr('transform', 'translate(335, 75)');
// sent info
processGroupStatsInfo
.append('text')
.attr('width', 25)
.attr('height', 10)
.attr('x', 4)
.attr('y', 5)
.attr('class', 'stats-info')
.text('5 min');
// received info
processGroupStatsInfo
.append('text')
.attr('width', 25)
.attr('height', 10)
.attr('x', 4)
.attr('y', 23)
.attr('class', 'stats-info')
.text('5 min');
// -------------------
// last refreshed time
// -------------------
details
.append('rect')
.attr('class', 'remote-process-group-last-refresh-rect banner')
.attr('x', 0)
.attr('y', function () {
return remoteProcessGroupData.dimensions.height - 24;
})
.attr('width', function () {
return remoteProcessGroupData.dimensions.width;
})
.attr('height', 24);
details
.append('text')
.attr('x', 10)
.attr('y', 168)
.attr('class', 'remote-process-group-last-refresh');
// --------
// comments
// --------
details
.append('text')
.attr('class', 'component-comments')
.attr(
'transform',
'translate(' +
(remoteProcessGroupData.dimensions.width - 11) +
', ' +
(remoteProcessGroupData.dimensions.height - 3) +
')'
)
.text('\uf075');
// -------------------
// active thread count
// -------------------
// active thread count
details.append('text').attr('class', 'active-thread-count-icon').attr('y', 20).text('\ue83f');
// active thread icon
details.append('text').attr('class', 'active-thread-count').attr('y', 20);
// ---------
// bulletins
// ---------
// bulletin background
details
.append('rect')
.attr('class', 'bulletin-background')
.attr('x', function () {
return remoteProcessGroupData.dimensions.width - 24;
})
.attr('y', 32)
.attr('width', 24)
.attr('height', 24);
// bulletin icon
details
.append('text')
.attr('class', 'bulletin-icon')
.attr('x', function () {
return remoteProcessGroupData.dimensions.width - 17;
})
.attr('y', 49)
.text('\uf24a');
}
if (remoteProcessGroupData.permissions.canRead) {
// remote process group uri
details
.select('text.remote-process-group-uri')
.each(function (this: any, d: any) {
const remoteProcessGroupUri = d3.select(this);
// 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
self.canvasUtils.ellipsis(remoteProcessGroupUri, d.component.targetUris, 'rpg-uri');
})
.append('title')
.text(function (d: any) {
return d.component.name;
});
// update the process groups transmission status
details
.select('text.remote-process-group-transmission-secure')
.text(function (d: any) {
let icon: string;
if (d.component.targetSecure === true) {
icon = '\uf023';
} else {
icon = '\uf09c';
}
return icon;
})
.each(function (this: any, d: any) {
self.canvasUtils.canvasTooltip(
TextTip,
d3.select(this),
d.component.targetSecure ? 'Site-to-Site is secure.' : 'Site-to-Site is NOT secure.'
);
});
// ---------------
// update comments
// ---------------
// update the remote process group comments
details
.select('text.component-comments')
.style(
'visibility',
self.nifiCommon.isBlank(remoteProcessGroupData.component.comments) ? 'hidden' : 'visible'
)
.each(function (this: any) {
if (!self.nifiCommon.isBlank(remoteProcessGroupData.component.comments)) {
self.canvasUtils.canvasTooltip(
TextTip,
d3.select(this),
remoteProcessGroupData.component.comments
);
} else {
self.canvasUtils.resetCanvasTooltip(d3.select(this));
}
});
// --------------
// last refreshed
// --------------
details.select('text.remote-process-group-last-refresh').text(function (d: any) {
if (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 (this: any, d: any) {
const remoteProcessGroupName = d3.select(this);
// 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
self.canvasUtils.ellipsis(remoteProcessGroupName, d.component.name, 'rpg-name');
})
.append('title')
.text(function (d: any) {
return d.component.name;
});
} else {
// clear the target uri
details.select('text.remote-process-group-uri').text(null);
// clear the transmission secure icon
details.select('text.remote-process-group-transmission-secure').text(null);
// clear the comments
details.select('text.component-comments').style('visibility', 'hidden');
// clear the last refresh
details.select('text.remote-process-group-last-refresh').text(null);
// clear the name
remoteProcessGroup.select('text.remote-process-group-name').text(null);
}
// populate the stats
self.updateRemoteProcessGroupStatus(remoteProcessGroup);
} else {
if (remoteProcessGroupData.permissions.canRead) {
// update the process group name
remoteProcessGroup.select('text.remote-process-group-name').text(function (d: any) {
const name = d.component.name;
if (name.length > RemoteProcessGroupManager.PREVIEW_NAME_LENGTH) {
return (
name.substring(0, RemoteProcessGroupManager.PREVIEW_NAME_LENGTH) +
String.fromCharCode(8230)
);
} else {
return name;
}
});
} else {
// clear the name
remoteProcessGroup.select('text.remote-process-group-name').text(null);
}
// remove the details if necessary
if (!details.empty()) {
details.remove();
}
}
});
}