in nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts [157:675]
private updateProcessors(updated: d3.Selection<any, any, any, any>) {
if (updated.empty()) {
return;
}
// processor border authorization
updated
.select('rect.border')
.classed('unauthorized', (d: any) => {
return d.permissions.canRead === false;
})
.classed('ghost', (d: any) => {
return d.permissions.canRead === true && d.component.extensionMissing === true;
});
// processor body authorization
updated.select('rect.body').classed('unauthorized', (d: any) => {
return d.permissions.canRead === false;
});
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
this.editableBehavior.editable(processor);
// if this processor is visible, render everything
if (processor.classed('visible')) {
if (details.empty()) {
details = processor.append('g').attr('class', 'processor-canvas-details');
// run status icon
details
.append('text')
.attr('class', 'run-status-icon')
.attr('x', 55)
.attr('y', 23)
.attr('width', 14)
.attr('height', 14);
// processor type
details
.append('text')
.attr('class', 'processor-type')
.attr('x', 75)
.attr('y', 32)
.attr('width', 230)
.attr('height', 12);
// processor type
details
.append('text')
.attr('class', 'processor-bundle')
.attr('x', 75)
.attr('y', 45)
.attr('width', 200)
.attr('height', 12);
// -----
// stats
// -----
// draw the processor statistics table
// in
details
.append('rect')
.attr('class', 'processor-stats-in-out odd')
.attr('width', () => {
return processorData.dimensions.width;
})
.attr('height', 19)
.attr('x', 0)
.attr('y', 50);
// border
details
.append('rect')
.attr('class', 'processor-stats-border')
.attr('width', () => {
return processorData.dimensions.width;
})
.attr('height', 1)
.attr('x', 0)
.attr('y', 68);
// read/write
details
.append('rect')
.attr('class', 'processor-read-write-stats even')
.attr('width', () => {
return processorData.dimensions.width;
})
.attr('height', 19)
.attr('x', 0)
.attr('y', 69);
// border
details
.append('rect')
.attr('class', 'processor-stats-border')
.attr('width', () => {
return processorData.dimensions.width;
})
.attr('height', 1)
.attr('x', 0)
.attr('y', 87);
// out
details
.append('rect')
.attr('class', 'processor-stats-in-out odd')
.attr('width', () => {
return processorData.dimensions.width;
})
.attr('height', 20)
.attr('x', 0)
.attr('y', 88);
// border
details
.append('rect')
.attr('class', 'processor-stats-border')
.attr('width', () => {
return processorData.dimensions.width;
})
.attr('height', 1)
.attr('x', 0)
.attr('y', 106);
// tasks/time
details
.append('rect')
.attr('class', 'processor-read-write-stats even')
.attr('width', () => {
return processorData.dimensions.width;
})
.attr('height', 19)
.attr('x', 0)
.attr('y', 107);
// stats label container
const processorStatsLabel = details.append('g').attr('transform', 'translate(10, 55)');
// in label
processorStatsLabel
.append('text')
.attr('width', 73)
.attr('height', 10)
.attr('y', 9)
.attr('class', 'stats-label')
.text('In');
// read/write label
processorStatsLabel
.append('text')
.attr('width', 73)
.attr('height', 10)
.attr('y', 27)
.attr('class', 'stats-label')
.text('Read/Write');
// out label
processorStatsLabel
.append('text')
.attr('width', 73)
.attr('height', 10)
.attr('y', 46)
.attr('class', 'stats-label')
.text('Out');
// tasks/time label
processorStatsLabel
.append('text')
.attr('width', 73)
.attr('height', 10)
.attr('y', 65)
.attr('class', 'stats-label')
.text('Tasks/Time');
// stats value container
const processorStatsValue = details.append('g').attr('transform', 'translate(85, 55)');
// in value
const inText = processorStatsValue
.append('text')
.attr('width', 180)
.attr('height', 9)
.attr('y', 9)
.attr('class', 'processor-in stats-value');
// in count
inText.append('tspan').attr('class', 'count');
// in size
inText.append('tspan').attr('class', 'size');
// read/write value
processorStatsValue
.append('text')
.attr('width', 180)
.attr('height', 10)
.attr('y', 27)
.attr('class', 'processor-read-write stats-value');
// out value
const outText = processorStatsValue
.append('text')
.attr('width', 180)
.attr('height', 10)
.attr('y', 46)
.attr('class', 'processor-out stats-value');
// out count
outText.append('tspan').attr('class', 'count');
// out size
outText.append('tspan').attr('class', 'size');
// tasks/time value
processorStatsValue
.append('text')
.attr('width', 180)
.attr('height', 10)
.attr('y', 65)
.attr('class', 'processor-tasks-time stats-value');
// stats value container
const processorStatsInfo = details.append('g').attr('transform', 'translate(305, 55)');
// in info
processorStatsInfo
.append('text')
.attr('width', 25)
.attr('height', 10)
.attr('y', 9)
.attr('class', 'stats-info')
.text('5 min');
// read/write info
processorStatsInfo
.append('text')
.attr('width', 25)
.attr('height', 10)
.attr('y', 27)
.attr('class', 'stats-info')
.text('5 min');
// out info
processorStatsInfo
.append('text')
.attr('width', 25)
.attr('height', 10)
.attr('y', 46)
.attr('class', 'stats-info')
.text('5 min');
// tasks/time info
processorStatsInfo
.append('text')
.attr('width', 25)
.attr('height', 10)
.attr('y', 65)
.attr('class', 'stats-info')
.text('5 min');
// --------
// comments
// --------
details
.append('text')
.attr('class', 'component-comments')
.attr(
'transform',
'translate(' +
(processorData.dimensions.width - 11) +
', ' +
(processorData.dimensions.height - 3) +
')'
)
.text('\uf075');
// -------------------
// active thread count
// -------------------
// active thread count
details.append('text').attr('class', 'active-thread-count-icon').attr('y', 46).text('\ue83f');
// active thread background
details.append('text').attr('class', 'active-thread-count').attr('y', 46);
// ---------
// bulletins
// ---------
// bulletin background
details
.append('rect')
.attr('class', 'bulletin-background')
.attr('x', () => {
return processorData.dimensions.width - 24;
})
.attr('width', 24)
.attr('height', 24);
// bulletin icon
details
.append('text')
.attr('class', 'bulletin-icon')
.attr('x', () => {
return processorData.dimensions.width - 17;
})
.attr('y', 17)
.text('\uf24a');
}
if (processorData.permissions.canRead) {
// update the processor name
processor
.select('text.processor-name')
.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
this.canvasUtils.ellipsis(processorName, d.component.name, 'processor-name');
})
.append('title')
.text((d: any) => {
return d.component.name;
});
// update the processor type
processor
.select('text.processor-type')
.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
this.canvasUtils.ellipsis(
processorType,
this.nifiCommon.formatType(d.component),
'processor-type'
);
})
.append('title')
.text((d: any) => {
return this.nifiCommon.formatType(d.component);
});
// update the processor bundle
processor
.select('text.processor-bundle')
.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
this.canvasUtils.ellipsis(
processorBundle,
this.nifiCommon.formatBundle(d.component.bundle),
'processor-bundle'
);
})
.append('title')
.text((d: any) => {
return this.nifiCommon.formatBundle(d.component.bundle);
});
// update the processor comments
processor
.select('text.component-comments')
.style(
'visibility',
this.nifiCommon.isBlank(processorData.component.config.comments) ? 'hidden' : 'visible'
)
.each((d: any, i, nodes) => {
if (!this.nifiCommon.isBlank(processorData.component.config.comments)) {
this.canvasUtils.canvasTooltip(
TextTip,
d3.select(nodes[i]),
processorData.component.config.comments
);
} else {
this.canvasUtils.resetCanvasTooltip(d3.select(nodes[i]));
}
});
} else {
// clear the processor name
processor.select('text.processor-name').text(null);
// clear the processor type
processor.select('text.processor-type').text(null);
// clear the processor bundle
processor.select('text.processor-bundle').text(null);
// clear the processor comments
processor.select('text.component-comments').style('visibility', 'hidden');
}
// populate the stats
this.updateProcessorStatus(processor);
} else {
if (processorData.permissions.canRead) {
// update the processor name
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);
} else {
return name;
}
});
} else {
// clear the processor name
processor.select('text.processor-name').text(null);
}
// remove the details if necessary
if (!details.empty()) {
details.remove();
}
}
// ---------------
// processor color
// ---------------
//update the processor icon container
processor
.select('rect.processor-icon-container')
.classed('unauthorized', !processorData.permissions.canRead);
//update the processor icon
processor
.select('text.processor-icon')
.classed('unauthorized tertiary-color', !processorData.permissions.canRead);
//update the processor border
processor.select('rect.border').classed('unauthorized', !processorData.permissions.canRead);
// use the specified color if appropriate
if (processorData.permissions.canRead) {
if (processorData.component.style['background-color']) {
const color = processorData.component.style['background-color'];
//update the processor icon container
processor.select('rect.processor-icon-container').style('fill', () => {
return color;
});
//update the processor border
processor.select('rect.border').style('stroke', () => {
return color;
});
if (color) {
processor.select('text.processor-icon').attr('class', () => {
return 'processor-icon';
});
// update the processor color
processor.style('fill', (d: any) => {
let color = 'unset';
if (!d.permissions.canRead) {
return color;
}
// use the specified color if appropriate
if (d.component.style['background-color']) {
color = d.component.style['background-color'];
color = this.canvasUtils.determineContrastColor(
this.nifiCommon.substringAfterLast(color, '#')
);
}
return color;
});
}
} else {
// undo changes made above
processor.select('text.processor-icon').attr('class', () => {
return 'processor-icon tertiary-color';
});
processor.select('rect.processor-icon-container').style('fill', null);
processor.select('rect.border').style('stroke', null);
}
}
// restricted component indicator
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', (d: any) => {
return this.showIsPrimary(d);
});
processor.select('text.is-primary').style('visibility', (d: any) => {
return this.showIsPrimary(d);
});
});
}