You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by mc...@apache.org on 2016/12/15 19:34:05 UTC
[6/6] nifi git commit: [NIFI-3154] display ellipsis when text is
sufficiently long in connection details and connection configuration dialogs.
This closes #1305
[NIFI-3154] display ellipsis when text is sufficiently long in connection details and connection configuration dialogs. This closes #1305
Project: http://git-wip-us.apache.org/repos/asf/nifi/repo
Commit: http://git-wip-us.apache.org/repos/asf/nifi/commit/48246f1c
Tree: http://git-wip-us.apache.org/repos/asf/nifi/tree/48246f1c
Diff: http://git-wip-us.apache.org/repos/asf/nifi/diff/48246f1c
Branch: refs/heads/support/nifi-1.1.x
Commit: 48246f1c1c4e0ad31bc239b88a1cb09eb43c102d
Parents: b917e9b
Author: Scott Aslan <sc...@gmail.com>
Authored: Thu Dec 8 10:46:26 2016 -0500
Committer: Matt Gilman <ma...@gmail.com>
Committed: Thu Dec 15 14:15:20 2016 -0500
----------------------------------------------------------------------
.../canvas/connection-configuration.jsp | 18 ++++-----
.../WEB-INF/partials/connection-details.jsp | 4 +-
.../src/main/webapp/css/common-ui.css | 1 +
.../webapp/css/connection-configuration.css | 2 -
.../src/main/webapp/css/connection-details.css | 2 -
.../main/webapp/css/processor-configuration.css | 1 +
.../js/nf/canvas/nf-connection-configuration.js | 14 +++----
.../main/webapp/js/nf/nf-connection-details.js | 40 ++++++++++----------
8 files changed, 40 insertions(+), 42 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/nifi/blob/48246f1c/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp
index a93bea0..9e65743 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp
@@ -95,7 +95,7 @@
<div id="read-only-output-port-source" class="setting hidden">
<div class="setting-name">From output</div>
<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 id="output-port-source" class="setting hidden">
@@ -107,21 +107,21 @@
<div id="input-port-source" class="setting hidden">
<div class="setting-name">From input</div>
<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 id="funnel-source" class="setting hidden">
<div class="setting-name">From funnel</div>
<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 id="processor-source" class="setting hidden">
<div class="setting-name">From processor</div>
<div class="setting-field connection-terminal-label">
<div id="processor-source-details">
- <div id="processor-source-name" class="label"></div>
- <div id="processor-source-type"></div>
+ <div id="processor-source-name" class="label ellipsis"></div>
+ <div id="processor-source-type" class="ellipsis"></div>
</div>
</div>
</div>
@@ -149,21 +149,21 @@
<div id="output-port-destination" class="setting hidden">
<div class="setting-name">To output</div>
<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 id="funnel-destination" class="setting hidden">
<div class="setting-name">To funnel</div>
<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 id="processor-destination" class="setting hidden">
<div class="setting-name">To processor</div>
<div class="setting-field connection-terminal-label">
<div id="processor-destination-details">
- <div id="processor-destination-name" class="label"></div>
- <div id="processor-destination-type"></div>
+ <div id="processor-destination-name" class="label ellipsis"></div>
+ <div id="processor-destination-type" class="ellipsis"></div>
</div>
</div>
</div>
http://git-wip-us.apache.org/repos/asf/nifi/blob/48246f1c/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp
index 2bbd480..f7637a2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp
@@ -24,7 +24,7 @@
<div class="setting">
<div id="read-only-connection-source-label" class="setting-name"></div>
<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 class="setting">
@@ -48,7 +48,7 @@
<div class="setting">
<div id="read-only-connection-target-label" class="setting-name"></div>
<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 class="setting">
http://git-wip-us.apache.org/repos/asf/nifi/blob/48246f1c/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css
index cdd8318..a0f6af7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css
@@ -162,6 +162,7 @@ ul.links span.header-link-over {
.ellipsis {
white-space: nowrap;
overflow: hidden;
+ text-overflow: ellipsis;
}
.ellipsis.multiline {
http://git-wip-us.apache.org/repos/asf/nifi/blob/48246f1c/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css
index 30487f9..b18da8d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-configuration.css
@@ -46,7 +46,6 @@ div.connection-terminal-label {
#relationship-names {
padding: 2px;
height: 150px;
- width: 274px;
overflow-y: auto;
overflow-x: hidden;
border: 0 solid #cccccc;
@@ -61,7 +60,6 @@ div.available-relationship-container {
#connection-configuration div.relationship-name {
display: inline-block;
line-height: normal;
- width: 240px;
}
#connection-name-container {
http://git-wip-us.apache.org/repos/asf/nifi/blob/48246f1c/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css
index 61d9109..ce94485 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css
@@ -35,11 +35,9 @@
overflow-x: hidden;
overflow-y: auto;
padding: 2px 2px 0;
- width: 274px;
}
#connection-details div.relationship-name {
display: inline-block;
line-height: normal;
- width: 240px;
}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/nifi/blob/48246f1c/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
index 6e82b5e..3439491 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
@@ -109,6 +109,7 @@ div.relationship-description {
#run-duration-slider {
margin-top: 5px;
border-radius: 0;
+ margin-right: 2px;
}
#run-duration-slider .ui-slider-handle {
http://git-wip-us.apache.org/repos/asf/nifi/blob/48246f1c/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
index b9672a2..74fc03d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
@@ -189,7 +189,7 @@ nf.ConnectionConfiguration = (function () {
// populate the port information
$('#input-port-source').show();
- $('#input-port-source-name').text(inputPortName);
+ $('#input-port-source-name').text(inputPortName).attr('title', inputPortName);
// populate the connection source details
$('#connection-source-id').val(inputPortData.id);
@@ -244,8 +244,8 @@ nf.ConnectionConfiguration = (function () {
// populate the source processor information
$('#processor-source').show();
- $('#processor-source-name').text(processorName);
- $('#processor-source-type').text(processorType);
+ $('#processor-source-name').text(processorName).attr('title', processorName);
+ $('#processor-source-type').text(processorType).attr('title', processorType);
// populate the connection source details
$('#connection-source-id').val(processorData.id);
@@ -443,7 +443,7 @@ nf.ConnectionConfiguration = (function () {
var outputPortName = outputPortData.permissions.canRead ? outputPortData.component.name : outputPortData.id;
$('#output-port-destination').show();
- $('#output-port-destination-name').text(outputPortName);
+ $('#output-port-destination-name').text(outputPortName).attr('title', outputPortName);
// populate the connection destination details
$('#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';
$('#processor-destination').show();
- $('#processor-destination-name').text(processorName);
- $('#processor-destination-type').text(processorType);
+ $('#processor-destination-name').text(processorName).attr('title', processorName);
+ $('#processor-destination-type').text(processorType).attr('title', processorType);
// populate the connection destination details
$('#connection-destination-id').val(processorData.id);
@@ -1307,7 +1307,7 @@ nf.ConnectionConfiguration = (function () {
if (nf.CanvasUtils.isProcessGroup(source) || nf.CanvasUtils.isRemoteProcessGroup(source)) {
// populate the connection source details
$('#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
http://git-wip-us.apache.org/repos/asf/nifi/blob/48246f1c/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
index cc01408..1479023 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
@@ -53,8 +53,8 @@ nf.ConnectionDetails = (function () {
dataType: 'json'
}).done(function (response) {
var processor = response.component;
- var processorName = $('<div class="label"></div>').text(processor.name);
- var processorType = $('<div></div>').text(nf.Common.substringAfterLast(processor.type, '.'));
+ 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, '.')).addClass('ellipsis').attr('title', nf.Common.substringAfterLast(processor.type, '.'));
// populate source processor details
$('#read-only-connection-source-label').text('From processor');
@@ -64,8 +64,8 @@ nf.ConnectionDetails = (function () {
deferred.resolve();
}).fail(function (xhr, status, error) {
if (xhr.status === 403) {
- var processorName = $('<div class="label"></div>').text(source.name);
- var processorType = $('<div></div>').text('Processor');
+ var processorName = $('<div class="label"></div>').text(source.name).addClass('ellipsis').attr('title', source.name);
+ var processorType = $('<div></div>').text('Processor').addClass('ellipsis').attr('title', 'Processor');
// populate source processor details
$('#read-only-connection-source-label').text('From processor');
@@ -90,7 +90,7 @@ nf.ConnectionDetails = (function () {
var initializeSourceFunnel = function (groupId, groupName, source) {
return $.Deferred(function (deferred) {
$('#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);
deferred.resolve();
}).promise();
@@ -114,7 +114,7 @@ nf.ConnectionDetails = (function () {
// populate source port details
$('#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);
deferred.resolve();
@@ -122,7 +122,7 @@ nf.ConnectionDetails = (function () {
if (xhr.status === 403) {
// populate source processor details
$('#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);
deferred.resolve();
@@ -145,7 +145,7 @@ nf.ConnectionDetails = (function () {
if (groupId === source.groupId) {
// populate source port details
$('#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);
deferred.resolve();
@@ -159,7 +159,7 @@ nf.ConnectionDetails = (function () {
// populate source port details
$('#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);
deferred.resolve();
@@ -167,7 +167,7 @@ nf.ConnectionDetails = (function () {
if (xhr.status === 403) {
// populate source processor details
$('#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);
deferred.resolve();
@@ -213,8 +213,8 @@ nf.ConnectionDetails = (function () {
dataType: 'json'
}).done(function (response) {
var processor = response.component;
- var processorName = $('<div class="label"></div>').text(processor.name);
- var processorType = $('<div></div>').text(nf.Common.substringAfterLast(processor.type, '.'));
+ 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, '.')).addClass('ellipsis').attr('title', nf.Common.substringAfterLast(processor.type, '.'));
// populate destination processor details
$('#read-only-connection-target-label').text('To processor');
@@ -224,8 +224,8 @@ nf.ConnectionDetails = (function () {
deferred.resolve();
}).fail(function (xhr, status, error) {
if (xhr.status === 403) {
- var processorName = $('<div class="label"></div>').text(destination.name);
- var processorType = $('<div></div>').text('Processor');
+ var processorName = $('<div class="label"></div>').text(destination.name).addClass('ellipsis').attr('title', destination.name);
+ var processorType = $('<div></div>').text('Processor').addClass('ellipsis').attr('title', 'Processor');
// populate destination processor details
$('#read-only-connection-target-label').text('To processor');
@@ -250,7 +250,7 @@ nf.ConnectionDetails = (function () {
var initializeDestinationFunnel = function (groupId, groupName, destination) {
return $.Deferred(function (deferred) {
$('#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);
deferred.resolve();
}).promise();
@@ -274,7 +274,7 @@ nf.ConnectionDetails = (function () {
// populate source port details
$('#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);
deferred.resolve();
@@ -282,7 +282,7 @@ nf.ConnectionDetails = (function () {
if (xhr.status === 403) {
// populate source port details
$('#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);
deferred.resolve();
@@ -305,7 +305,7 @@ nf.ConnectionDetails = (function () {
if (groupId === destination.groupId) {
// populate destination port details
$('#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);
deferred.resolve();
@@ -319,7 +319,7 @@ nf.ConnectionDetails = (function () {
// populate destination port details
$('#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);
deferred.resolve();
@@ -327,7 +327,7 @@ nf.ConnectionDetails = (function () {
if (xhr.status === 403) {
// populate source port details
$('#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);
deferred.resolve();