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

[NIFI-3154] display ellipsis when text is sufficiently long in connection details and connection configuration dialogs. This closes #1305

This commit is contained in:
Scott Aslan 2016-12-08 10:46:26 -05:00 committed by Matt Gilman
parent d15bd0c00c
commit 2c84b44f54
8 changed files with 40 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp
View File

@ -95,7 +95,7 @@
<div id="read-only-output-port-source" class="setting hidden"> <div id="read-only-output-port-source" class="setting hidden">
<div class="setting-name">From output</div> <div class="setting-name">From output</div>
<div class="setting-field connection-terminal-label"> <div class="setting-field connection-terminal-label">
<div id="read-only-output-port-name"></div> <div id="read-only-output-port-name" class="ellipsis"></div>
</div> </div>
</div> </div>
<div id="output-port-source" class="setting hidden"> <div id="output-port-source" class="setting hidden">
@ -107,21 +107,21 @@
<div id="input-port-source" class="setting hidden"> <div id="input-port-source" class="setting hidden">
<div class="setting-name">From input</div> <div class="setting-name">From input</div>
<div class="setting-field connection-terminal-label"> <div class="setting-field connection-terminal-label">
<div id="input-port-source-name" class="label"></div> <div id="input-port-source-name" class="label ellipsis"></div>
</div> </div>
</div> </div>
<div id="funnel-source" class="setting hidden"> <div id="funnel-source" class="setting hidden">
<div class="setting-name">From funnel</div> <div class="setting-name">From funnel</div>
<div class="setting-field connection-terminal-label"> <div class="setting-field connection-terminal-label">
<div id="funnel-source-name" class="label">funnel</div> <div id="funnel-source-name" class="label ellipsis" title="funnel">funnel</div>
</div> </div>
</div> </div>
<div id="processor-source" class="setting hidden"> <div id="processor-source" class="setting hidden">
<div class="setting-name">From processor</div> <div class="setting-name">From processor</div>
<div class="setting-field connection-terminal-label"> <div class="setting-field connection-terminal-label">
<div id="processor-source-details"> <div id="processor-source-details">
<div id="processor-source-name" class="label"></div> <div id="processor-source-name" class="label ellipsis"></div>
<div id="processor-source-type"></div> <div id="processor-source-type" class="ellipsis"></div>
</div> </div>
</div> </div>
</div> </div>
@ -149,21 +149,21 @@
<div id="output-port-destination" class="setting hidden"> <div id="output-port-destination" class="setting hidden">
<div class="setting-name">To output</div> <div class="setting-name">To output</div>
<div class="setting-field connection-terminal-label"> <div class="setting-field connection-terminal-label">
<div id="output-port-destination-name" class="label"></div> <div id="output-port-destination-name" class="label ellipsis"></div>
</div> </div>
</div> </div>
<div id="funnel-destination" class="setting hidden"> <div id="funnel-destination" class="setting hidden">
<div class="setting-name">To funnel</div> <div class="setting-name">To funnel</div>
<div class="setting-field connection-terminal-label"> <div class="setting-field connection-terminal-label">
<div id="funnel-source-name" class="label">funnel</div> <div id="funnel-destination-name" class="label ellipsis" title="funnel">funnel</div>
</div> </div>
</div> </div>
<div id="processor-destination" class="setting hidden"> <div id="processor-destination" class="setting hidden">
<div class="setting-name">To processor</div> <div class="setting-name">To processor</div>
<div class="setting-field connection-terminal-label"> <div class="setting-field connection-terminal-label">
<div id="processor-destination-details"> <div id="processor-destination-details">
<div id="processor-destination-name" class="label"></div> <div id="processor-destination-name" class="label ellipsis"></div>
<div id="processor-destination-type"></div> <div id="processor-destination-type" class="ellipsis"></div>
</div> </div>
</div> </div>
</div> </div>

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp
View File

@ -24,7 +24,7 @@
<div class="setting"> <div class="setting">
<div id="read-only-connection-source-label" class="setting-name"></div> <div id="read-only-connection-source-label" class="setting-name"></div>
<div class="setting-field connection-terminal-label"> <div class="setting-field connection-terminal-label">
<div id="read-only-connection-source"></div> <div id="read-only-connection-source" class="ellipsis"></div>
</div> </div>
</div> </div>
<div class="setting"> <div class="setting">
@ -48,7 +48,7 @@
<div class="setting"> <div class="setting">
<div id="read-only-connection-target-label" class="setting-name"></div> <div id="read-only-connection-target-label" class="setting-name"></div>
<div class="setting-field connection-terminal-label"> <div class="setting-field connection-terminal-label">
<div id="read-only-connection-target"></div> <div id="read-only-connection-target" class="ellipsis"></div>
</div> </div>
</div> </div>
<div class="setting"> <div class="setting">

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

@ -162,6 +162,7 @@ ul.links span.header-link-over {
.ellipsis { .ellipsis {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
} }
.ellipsis.multiline { .ellipsis.multiline {

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css
View File

@ -46,7 +46,6 @@ div.connection-terminal-label {
#relationship-names { #relationship-names {
padding: 2px; padding: 2px;
height: 150px; height: 150px;
width: 274px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
border: 0 solid #cccccc; border: 0 solid #cccccc;
@ -61,7 +60,6 @@ div.available-relationship-container {
#connection-configuration div.relationship-name { #connection-configuration div.relationship-name {
display: inline-block; display: inline-block;
line-height: normal; line-height: normal;
width: 240px;
} }
#connection-name-container { #connection-name-container {

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css
View File

@ -35,11 +35,9 @@
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
padding: 2px 2px 0; padding: 2px 2px 0;
width: 274px;
} }
#connection-details div.relationship-name { #connection-details div.relationship-name {
display: inline-block; display: inline-block;
line-height: normal; line-height: normal;
width: 240px;
} }

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
View File

@ -109,6 +109,7 @@ div.relationship-description {
#run-duration-slider { #run-duration-slider {
margin-top: 5px; margin-top: 5px;
border-radius: 0; border-radius: 0;
margin-right: 2px;
} }
#run-duration-slider .ui-slider-handle { #run-duration-slider .ui-slider-handle {

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

@ -189,7 +189,7 @@ nf.ConnectionConfiguration = (function () {
// populate the port information // populate the port information
$('#input-port-source').show(); $('#input-port-source').show();
$('#input-port-source-name').text(inputPortName); $('#input-port-source-name').text(inputPortName).attr('title', inputPortName);
// populate the connection source details // populate the connection source details
$('#connection-source-id').val(inputPortData.id); $('#connection-source-id').val(inputPortData.id);
@ -244,8 +244,8 @@ nf.ConnectionConfiguration = (function () {
// populate the source processor information // populate the source processor information
$('#processor-source').show(); $('#processor-source').show();
$('#processor-source-name').text(processorName); $('#processor-source-name').text(processorName).attr('title', processorName);
$('#processor-source-type').text(processorType); $('#processor-source-type').text(processorType).attr('title', processorType);
// populate the connection source details // populate the connection source details
$('#connection-source-id').val(processorData.id); $('#connection-source-id').val(processorData.id);
@ -443,7 +443,7 @@ nf.ConnectionConfiguration = (function () {
var outputPortName = outputPortData.permissions.canRead ? outputPortData.component.name : outputPortData.id; var outputPortName = outputPortData.permissions.canRead ? outputPortData.component.name : outputPortData.id;
$('#output-port-destination').show(); $('#output-port-destination').show();
$('#output-port-destination-name').text(outputPortName); $('#output-port-destination-name').text(outputPortName).attr('title', outputPortName);
// populate the connection destination details // populate the connection destination details
$('#connection-destination-id').val(outputPortData.id); $('#connection-destination-id').val(outputPortData.id);
@ -482,8 +482,8 @@ nf.ConnectionConfiguration = (function () {
var processorType = processorData.permissions.canRead ? nf.Common.substringAfterLast(processorData.component.type, '.') : 'Processor'; var processorType = processorData.permissions.canRead ? nf.Common.substringAfterLast(processorData.component.type, '.') : 'Processor';
$('#processor-destination').show(); $('#processor-destination').show();
$('#processor-destination-name').text(processorName); $('#processor-destination-name').text(processorName).attr('title', processorName);
$('#processor-destination-type').text(processorType); $('#processor-destination-type').text(processorType).attr('title', processorType);
// populate the connection destination details // populate the connection destination details
$('#connection-destination-id').val(processorData.id); $('#connection-destination-id').val(processorData.id);
@ -1307,7 +1307,7 @@ nf.ConnectionConfiguration = (function () {
if (nf.CanvasUtils.isProcessGroup(source) || nf.CanvasUtils.isRemoteProcessGroup(source)) { if (nf.CanvasUtils.isProcessGroup(source) || nf.CanvasUtils.isRemoteProcessGroup(source)) {
// populate the connection source details // populate the connection source details
$('#connection-source-id').val(connection.source.id); $('#connection-source-id').val(connection.source.id);
$('#read-only-output-port-name').text(connection.source.name); $('#read-only-output-port-name').text(connection.source.name).attr('title', connection.source.name);
} }
// if the destination is a process gorup or remote process group, select the appropriate port if applicable // if the destination is a process gorup or remote process group, select the appropriate port if applicable

40
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
View File

@ -53,8 +53,8 @@ nf.ConnectionDetails = (function () {
dataType: 'json' dataType: 'json'
}).done(function (response) { }).done(function (response) {
var processor = response.component; var processor = response.component;
var processorName = $('<div class="label"></div>').text(processor.name); var processorName = $('<div class="label"></div>').text(processor.name).addClass('ellipsis').attr('title', processor.name);
var processorType = $('<div></div>').text(nf.Common.substringAfterLast(processor.type, '.')); var processorType = $('<div></div>').text(nf.Common.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nf.Common.substringAfterLast(processor.type, '.'));
// populate source processor details // populate source processor details
$('#read-only-connection-source-label').text('From processor'); $('#read-only-connection-source-label').text('From processor');
@ -64,8 +64,8 @@ nf.ConnectionDetails = (function () {
deferred.resolve(); deferred.resolve();
}).fail(function (xhr, status, error) { }).fail(function (xhr, status, error) {
if (xhr.status === 403) { if (xhr.status === 403) {
var processorName = $('<div class="label"></div>').text(source.name); var processorName = $('<div class="label"></div>').text(source.name).addClass('ellipsis').attr('title', source.name);
var processorType = $('<div></div>').text('Processor'); var processorType = $('<div></div>').text('Processor').addClass('ellipsis').attr('title', 'Processor');
// populate source processor details // populate source processor details
$('#read-only-connection-source-label').text('From processor'); $('#read-only-connection-source-label').text('From processor');
@ -90,7 +90,7 @@ nf.ConnectionDetails = (function () {
var initializeSourceFunnel = function (groupId, groupName, source) { var initializeSourceFunnel = function (groupId, groupName, source) {
return $.Deferred(function (deferred) { return $.Deferred(function (deferred) {
$('#read-only-connection-source-label').text('From funnel'); $('#read-only-connection-source-label').text('From funnel');
$('#read-only-connection-source').append('funnel'); $('#read-only-connection-source').text('funnel').attr('title', 'funnel');
$('#read-only-connection-source-group-name').text(groupName); $('#read-only-connection-source-group-name').text(groupName);
deferred.resolve(); deferred.resolve();
}).promise(); }).promise();
@ -114,7 +114,7 @@ nf.ConnectionDetails = (function () {
// populate source port details // populate source port details
$('#read-only-connection-source-label').text('From output'); $('#read-only-connection-source-label').text('From output');
$('#read-only-connection-source').text(source.name); $('#read-only-connection-source').text(source.name).attr('title', source.name);
$('#read-only-connection-source-group-name').text(remoteProcessGroup.name); $('#read-only-connection-source-group-name').text(remoteProcessGroup.name);
deferred.resolve(); deferred.resolve();
@ -122,7 +122,7 @@ nf.ConnectionDetails = (function () {
if (xhr.status === 403) { if (xhr.status === 403) {
// populate source processor details // populate source processor details
$('#read-only-connection-source-label').text('From output'); $('#read-only-connection-source-label').text('From output');
$('#read-only-connection-source').append(source.name); $('#read-only-connection-source').text(source.name).attr('title', source.name);
$('#read-only-connection-source-group-name').text(source.groupId); $('#read-only-connection-source-group-name').text(source.groupId);
deferred.resolve(); deferred.resolve();
@ -145,7 +145,7 @@ nf.ConnectionDetails = (function () {
if (groupId === source.groupId) { if (groupId === source.groupId) {
// populate source port details // populate source port details
$('#read-only-connection-source-label').text('From input'); $('#read-only-connection-source-label').text('From input');
$('#read-only-connection-source').text(source.name); $('#read-only-connection-source').text(source.name).attr('title', source.name);
$('#read-only-connection-source-group-name').text(groupName); $('#read-only-connection-source-group-name').text(groupName);
deferred.resolve(); deferred.resolve();
@ -159,7 +159,7 @@ nf.ConnectionDetails = (function () {
// populate source port details // populate source port details
$('#read-only-connection-source-label').text('From output'); $('#read-only-connection-source-label').text('From output');
$('#read-only-connection-source').text(source.name); $('#read-only-connection-source').text(source.name).attr('title', source.name);
$('#read-only-connection-source-group-name').text(processGroup.name); $('#read-only-connection-source-group-name').text(processGroup.name);
deferred.resolve(); deferred.resolve();
@ -167,7 +167,7 @@ nf.ConnectionDetails = (function () {
if (xhr.status === 403) { if (xhr.status === 403) {
// populate source processor details // populate source processor details
$('#read-only-connection-source-label').text('From output'); $('#read-only-connection-source-label').text('From output');
$('#read-only-connection-source').append(source.name); $('#read-only-connection-source').text(source.name).attr('title', source.name);
$('#read-only-connection-source-group-name').text(source.groupId); $('#read-only-connection-source-group-name').text(source.groupId);
deferred.resolve(); deferred.resolve();
@ -213,8 +213,8 @@ nf.ConnectionDetails = (function () {
dataType: 'json' dataType: 'json'
}).done(function (response) { }).done(function (response) {
var processor = response.component; var processor = response.component;
var processorName = $('<div class="label"></div>').text(processor.name); var processorName = $('<div class="label"></div>').text(processor.name).addClass('ellipsis').attr('title', processor.name);
var processorType = $('<div></div>').text(nf.Common.substringAfterLast(processor.type, '.')); var processorType = $('<div></div>').text(nf.Common.substringAfterLast(processor.type, '.')).addClass('ellipsis').attr('title', nf.Common.substringAfterLast(processor.type, '.'));
// populate destination processor details // populate destination processor details
$('#read-only-connection-target-label').text('To processor'); $('#read-only-connection-target-label').text('To processor');
@ -224,8 +224,8 @@ nf.ConnectionDetails = (function () {
deferred.resolve(); deferred.resolve();
}).fail(function (xhr, status, error) { }).fail(function (xhr, status, error) {
if (xhr.status === 403) { if (xhr.status === 403) {
var processorName = $('<div class="label"></div>').text(destination.name); var processorName = $('<div class="label"></div>').text(destination.name).addClass('ellipsis').attr('title', destination.name);
var processorType = $('<div></div>').text('Processor'); var processorType = $('<div></div>').text('Processor').addClass('ellipsis').attr('title', 'Processor');
// populate destination processor details // populate destination processor details
$('#read-only-connection-target-label').text('To processor'); $('#read-only-connection-target-label').text('To processor');
@ -250,7 +250,7 @@ nf.ConnectionDetails = (function () {
var initializeDestinationFunnel = function (groupId, groupName, destination) { var initializeDestinationFunnel = function (groupId, groupName, destination) {
return $.Deferred(function (deferred) { return $.Deferred(function (deferred) {
$('#read-only-connection-target-label').text('To funnel'); $('#read-only-connection-target-label').text('To funnel');
$('#read-only-connection-target').append('funnel'); $('#read-only-connection-target').text('funnel').attr('title', 'funnel');
$('#read-only-connection-target-group-name').text(groupName); $('#read-only-connection-target-group-name').text(groupName);
deferred.resolve(); deferred.resolve();
}).promise(); }).promise();
@ -274,7 +274,7 @@ nf.ConnectionDetails = (function () {
// populate source port details // populate source port details
$('#read-only-connection-target-label').text('To input'); $('#read-only-connection-target-label').text('To input');
$('#read-only-connection-target').text(destination.name); $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
$('#read-only-connection-target-group-name').text(remoteProcessGroup.name); $('#read-only-connection-target-group-name').text(remoteProcessGroup.name);
deferred.resolve(); deferred.resolve();
@ -282,7 +282,7 @@ nf.ConnectionDetails = (function () {
if (xhr.status === 403) { if (xhr.status === 403) {
// populate source port details // populate source port details
$('#read-only-connection-target-label').text('To input'); $('#read-only-connection-target-label').text('To input');
$('#read-only-connection-target').append(destination.name); $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
$('#read-only-connection-target-group-name').text(destination.groupId); $('#read-only-connection-target-group-name').text(destination.groupId);
deferred.resolve(); deferred.resolve();
@ -305,7 +305,7 @@ nf.ConnectionDetails = (function () {
if (groupId === destination.groupId) { if (groupId === destination.groupId) {
// populate destination port details // populate destination port details
$('#read-only-connection-target-label').text('To output'); $('#read-only-connection-target-label').text('To output');
$('#read-only-connection-target').text(destination.name); $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
$('#read-only-connection-target-group-name').text(groupName); $('#read-only-connection-target-group-name').text(groupName);
deferred.resolve(); deferred.resolve();
@ -319,7 +319,7 @@ nf.ConnectionDetails = (function () {
// populate destination port details // populate destination port details
$('#read-only-connection-target-label').text('To input'); $('#read-only-connection-target-label').text('To input');
$('#read-only-connection-target').text(destination.name); $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
$('#read-only-connection-target-group-name').text(processGroup.name); $('#read-only-connection-target-group-name').text(processGroup.name);
deferred.resolve(); deferred.resolve();
@ -327,7 +327,7 @@ nf.ConnectionDetails = (function () {
if (xhr.status === 403) { if (xhr.status === 403) {
// populate source port details // populate source port details
$('#read-only-connection-target-label').text('To input'); $('#read-only-connection-target-label').text('To input');
$('#read-only-connection-target').append(destination.name); $('#read-only-connection-target').text(destination.name).attr('title', destination.name);
$('#read-only-connection-target-group-name').text(destination.groupId); $('#read-only-connection-target-group-name').text(destination.groupId);
deferred.resolve(); deferred.resolve();