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

NIFI-13114: (#8713) 

- Code clean up and removing TODO regarding enforcing isClustered to see the Primary Node indicator.

This closes #8713
This commit is contained in:
Matt Gilman 2024-05-01 12:04:40 -04:00 committed by GitHub
parent 2c43a706f8
commit be4c003cd7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 79 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
View File

@ -157,33 +157,32 @@ export class ProcessorManager {
return processor;
}
private updateProcessors(updated: any) {
private updateProcessors(updated: d3.Selection<any, any, any, any>) {
if (updated.empty()) {
return;
}
const self: ProcessorManager = this;
// processor border authorization
updated
.select('rect.border')
.classed('unauthorized', function (d: any) {
.classed('unauthorized', (d: any) => {
return d.permissions.canRead === false;
})
.classed('ghost', function (d: any) {
.classed('ghost', (d: any) => {
return d.permissions.canRead === true && d.component.extensionMissing === true;
});
// processor body authorization
updated.select('rect.body').classed('unauthorized', function (d: any) {
updated.select('rect.body').classed('unauthorized', (d: any) => {
return d.permissions.canRead === false;
});
updated.each(function (this: any, processorData: any) {
const processor: any = d3.select(this);
updated.each((processorData: any, i, nodes) => {
const processor: d3.Selection<any, any, any, any> = d3.select(nodes[i]);
let details: any = processor.select('g.processor-canvas-details');
// update the component behavior as appropriate
self.editableBehavior.editable(processor);
this.editableBehavior.editable(processor);
// if this processor is visible, render everything
if (processor.classed('visible')) {
@ -227,7 +226,7 @@ export class ProcessorManager {
details
.append('rect')
.attr('class', 'processor-stats-in-out odd')
.attr('width', function () {
.attr('width', () => {
return processorData.dimensions.width;
})
.attr('height', 19)
@ -238,7 +237,7 @@ export class ProcessorManager {
details
.append('rect')
.attr('class', 'processor-stats-border')
.attr('width', function () {
.attr('width', () => {
return processorData.dimensions.width;
})
.attr('height', 1)
@ -249,7 +248,7 @@ export class ProcessorManager {
details
.append('rect')
.attr('class', 'processor-read-write-stats even')
.attr('width', function () {
.attr('width', () => {
return processorData.dimensions.width;
})
.attr('height', 19)
@ -260,7 +259,7 @@ export class ProcessorManager {
details
.append('rect')
.attr('class', 'processor-stats-border')
.attr('width', function () {
.attr('width', () => {
return processorData.dimensions.width;
})
.attr('height', 1)
@ -271,7 +270,7 @@ export class ProcessorManager {
details
.append('rect')
.attr('class', 'processor-stats-in-out odd')
.attr('width', function () {
.attr('width', () => {
return processorData.dimensions.width;
})
.attr('height', 20)
@ -282,7 +281,7 @@ export class ProcessorManager {
details
.append('rect')
.attr('class', 'processor-stats-border')
.attr('width', function () {
.attr('width', () => {
return processorData.dimensions.width;
})
.attr('height', 1)
@ -293,7 +292,7 @@ export class ProcessorManager {
details
.append('rect')
.attr('class', 'processor-read-write-stats even')
.attr('width', function () {
.attr('width', () => {
return processorData.dimensions.width;
})
.attr('height', 19)
@ -460,7 +459,7 @@ export class ProcessorManager {
details
.append('rect')
.attr('class', 'bulletin-background')
.attr('x', function () {
.attr('x', () => {
return processorData.dimensions.width - 24;
})
.attr('width', 24)
@ -470,7 +469,7 @@ export class ProcessorManager {
details
.append('text')
.attr('class', 'bulletin-icon')
.attr('x', function () {
.attr('x', () => {
return processorData.dimensions.width - 17;
})
.attr('y', 17)
@ -481,60 +480,60 @@ export class ProcessorManager {
// update the processor name
processor
.select('text.processor-name')
.each(function (this: any, d: any) {
const processorName = d3.select(this);
.each((d: any, i, nodes) => {
const processorName = d3.select(nodes[i]);
// reset the processor name to handle any previous state
processorName.text(null).selectAll('title').remove();
// apply ellipsis to the processor name as necessary
self.canvasUtils.ellipsis(processorName, d.component.name, 'processor-name');
this.canvasUtils.ellipsis(processorName, d.component.name, 'processor-name');
})
.append('title')
.text(function (d: any) {
.text((d: any) => {
return d.component.name;
});
// update the processor type
processor
.select('text.processor-type')
.each(function (this: any, d: any) {
const processorType = d3.select(this);
.each((d: any, i, nodes) => {
const processorType = d3.select(nodes[i]);
// reset the processor type to handle any previous state
processorType.text(null).selectAll('title').remove();
// apply ellipsis to the processor type as necessary
self.canvasUtils.ellipsis(
this.canvasUtils.ellipsis(
processorType,
self.nifiCommon.formatType(d.component),
this.nifiCommon.formatType(d.component),
'processor-type'
);
})
.append('title')
.text(function (d: any) {
return self.nifiCommon.formatType(d.component);
.text((d: any) => {
return this.nifiCommon.formatType(d.component);
});
// update the processor bundle
processor
.select('text.processor-bundle')
.each(function (this: any, d: any) {
const processorBundle = d3.select(this);
.each((d: any, i, nodes) => {
const processorBundle = d3.select(nodes[i]);
// reset the processor type to handle any previous state
processorBundle.text(null).selectAll('title').remove();
// apply ellipsis to the processor type as necessary
self.canvasUtils.ellipsis(
this.canvasUtils.ellipsis(
processorBundle,
self.nifiCommon.formatBundle(d.component.bundle),
this.nifiCommon.formatBundle(d.component.bundle),
'processor-bundle'
);
})
.append('title')
.text(function (d: any) {
return self.nifiCommon.formatBundle(d.component.bundle);
.text((d: any) => {
return this.nifiCommon.formatBundle(d.component.bundle);
});
// update the processor comments
@ -542,11 +541,11 @@ export class ProcessorManager {
.select('path.component-comments')
.style(
'visibility',
self.nifiCommon.isBlank(processorData.component.config.comments) ? 'hidden' : 'visible'
this.nifiCommon.isBlank(processorData.component.config.comments) ? 'hidden' : 'visible'
)
.each(function (this: any) {
if (!self.nifiCommon.isBlank(processorData.component.config.comments)) {
self.canvasUtils.canvasTooltip(TextTip, d3.select(this), {
.each((d: any, i, nodes) => {
if (!this.nifiCommon.isBlank(processorData.component.config.comments)) {
this.canvasUtils.canvasTooltip(TextTip, d3.select(nodes[i]), {
text: processorData.component.config.comments
});
}
@ -566,11 +565,11 @@ export class ProcessorManager {
}
// populate the stats
self.updateProcessorStatus(processor);
this.updateProcessorStatus(processor);
} else {
if (processorData.permissions.canRead) {
// update the processor name
processor.select('text.processor-name').text(function (d: any) {
processor.select('text.processor-name').text((d: any) => {
const name = d.component.name;
if (name.length > ProcessorManager.PREVIEW_NAME_LENGTH) {
return name.substring(0, ProcessorManager.PREVIEW_NAME_LENGTH) + String.fromCharCode(8230);
@ -612,22 +611,22 @@ export class ProcessorManager {
const color = processorData.component.style['background-color'];
//update the processor icon container
processor.select('rect.processor-icon-container').style('fill', function () {
processor.select('rect.processor-icon-container').style('fill', () => {
return color;
});
//update the processor border
processor.select('rect.border').style('stroke', function () {
processor.select('rect.border').style('stroke', () => {
return color;
});
if (color) {
processor.select('text.processor-icon').attr('class', function () {
processor.select('text.processor-icon').attr('class', () => {
return 'processor-icon';
});
// update the processor color
processor.style('fill', function (d: any) {
processor.style('fill', (d: any) => {
let color = 'unset';
if (!d.permissions.canRead) {
@ -638,8 +637,8 @@ export class ProcessorManager {
if (d.component.style['background-color']) {
color = d.component.style['background-color'];
color = self.canvasUtils.determineContrastColor(
self.nifiCommon.substringAfterLast(color, '#')
color = this.canvasUtils.determineContrastColor(
this.nifiCommon.substringAfterLast(color, '#')
);
}
@ -647,32 +646,39 @@ export class ProcessorManager {
});
}
} else {
processor.select('text.processor-icon').attr('class', function () {
processor.select('text.processor-icon').attr('class', () => {
return 'processor-icon accent-color';
});
}
}
// restricted component indicator
processor.select('circle.restricted-background').style('visibility', self.showRestricted);
processor.select('text.restricted').style('visibility', self.showRestricted);
processor.select('circle.restricted-background').style('visibility', (d: any) => {
return this.showRestricted(d);
});
processor.select('text.restricted').style('visibility', (d: any) => {
return this.showRestricted(d);
});
// is primary component indicator
processor.select('circle.is-primary-background').style('visibility', self.showIsPrimary);
processor.select('text.is-primary').style('visibility', self.showIsPrimary);
processor.select('circle.is-primary-background').style('visibility', (d: any) => {
return this.showIsPrimary(d);
});
processor.select('text.is-primary').style('visibility', (d: any) => {
return this.showIsPrimary(d);
});
});
}
private updateProcessorStatus(updated: any) {
private updateProcessorStatus(updated: d3.Selection<any, any, any, any>) {
if (updated.empty()) {
return;
}
const self: ProcessorManager = this;
// update the run status
updated
.select('text.run-status-icon')
.attr('class', function (d: any) {
.attr('class', (d: any) => {
let clazz = 'primary-color';
if (d.status.aggregateSnapshot.runStatus === 'Validating') {
@ -687,17 +693,17 @@ export class ProcessorManager {
return `run-status-icon ${clazz}`;
})
.attr('font-family', function (d: any) {
.attr('font-family', (d: any) => {
let family = 'FontAwesome';
if (d.status.aggregateSnapshot.runStatus === 'Disabled') {
family = 'flowfont';
}
return family;
})
.classed('fa-spin', function (d: any) {
.classed('fa-spin', (d: any) => {
return d.status.aggregateSnapshot.runStatus === 'Validating';
})
.text(function (d: any) {
.text((d: any) => {
let img = '';
if (d.status.aggregateSnapshot.runStatus === 'Disabled') {
img = '\ue802';
@ -712,10 +718,10 @@ export class ProcessorManager {
}
return img;
})
.each(function (this: any, d: any) {
.each((d: any, i, nodes) => {
// if there are validation errors generate a tooltip
if (self.needsTip(d)) {
self.canvasUtils.canvasTooltip(ValidationErrorsTip, d3.select(this), {
if (this.needsTip(d)) {
this.canvasUtils.canvasTooltip(ValidationErrorsTip, d3.select(nodes[i]), {
isValidating: d.status.aggregateSnapshot.runStatus === 'Validating',
validationErrors: d.component.validationErrors
});
@ -723,49 +729,49 @@ export class ProcessorManager {
});
// in count value
updated.select('text.processor-in tspan.count').text(function (d: any) {
return self.nifiCommon.substringBeforeFirst(d.status.aggregateSnapshot.input, ' ');
updated.select('text.processor-in tspan.count').text((d: any) => {
return this.nifiCommon.substringBeforeFirst(d.status.aggregateSnapshot.input, ' ');
});
// in size value
updated.select('text.processor-in tspan.size').text(function (d: any) {
return ' ' + self.nifiCommon.substringAfterFirst(d.status.aggregateSnapshot.input, ' ');
updated.select('text.processor-in tspan.size').text((d: any) => {
return ' ' + this.nifiCommon.substringAfterFirst(d.status.aggregateSnapshot.input, ' ');
});
// read/write value
updated.select('text.processor-read-write').text(function (d: any) {
updated.select('text.processor-read-write').text((d: any) => {
return d.status.aggregateSnapshot.read + ' / ' + d.status.aggregateSnapshot.written;
});
// out count value
updated.select('text.processor-out tspan.count').text(function (d: any) {
return self.nifiCommon.substringBeforeFirst(d.status.aggregateSnapshot.output, ' ');
updated.select('text.processor-out tspan.count').text((d: any) => {
return this.nifiCommon.substringBeforeFirst(d.status.aggregateSnapshot.output, ' ');
});
// out size value
updated.select('text.processor-out tspan.size').text(function (d: any) {
return ' ' + self.nifiCommon.substringAfterFirst(d.status.aggregateSnapshot.output, ' ');
updated.select('text.processor-out tspan.size').text((d: any) => {
return ' ' + this.nifiCommon.substringAfterFirst(d.status.aggregateSnapshot.output, ' ');
});
// tasks/time value
updated.select('text.processor-tasks-time').text(function (d: any) {
updated.select('text.processor-tasks-time').text((d: any) => {
return d.status.aggregateSnapshot.tasks + ' / ' + d.status.aggregateSnapshot.tasksDuration;
});
updated.each(function (this: any, d: any) {
const processor = d3.select(this);
updated.each((d: any, i, nodes) => {
const processor = d3.select(nodes[i]);
// -------------------
// active thread count
// -------------------
self.canvasUtils.activeThreadCount(processor, d);
this.canvasUtils.activeThreadCount(processor, d);
// ---------
// bulletins
// ---------
self.canvasUtils.bulletins(processor, d.bulletins);
this.canvasUtils.bulletins(processor, d.bulletins);
});
}
@ -805,8 +811,6 @@ export class ProcessorManager {
* @returns {*}
*/
private showIsPrimary(d: any): string {
// TODO
// return nfClusterSummary.isClustered() && d.status.aggregateSnapshot.executionNode === 'PRIMARY' ? 'visible' : 'hidden';
return d.status.aggregateSnapshot.executionNode === 'PRIMARY' ? 'visible' : 'hidden';
}