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

[NIFI-2844] Update CSS styles for Cluster Summary Dialog icons and refresh button. This closes #1104

This commit is contained in:
Scott Aslan 2016-11-14 14:47:11 -05:00 committed by Matt Gilman
parent 97cd94d260
commit 45bf8430fc
8 changed files with 171 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-connection-summary-dialog.jsp
View File

@ -27,9 +27,10 @@
<div id="cluster-connection-icon"></div>
<div id="cluster-connection-details">
<div id="cluster-connection-name"></div>
<div id="cluster-connection-id"></div>
<div id="cluster-connection-type"></div>
<div id="cluster-connection-group-id" class="hidden"></div>
</div>
<div id="cluster-connection-id"></div>
</div>
</div>
<div id="cluster-connection-summary-table"></div>

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-input-port-summary-dialog.jsp
View File

@ -27,9 +27,10 @@
<div id="cluster-input-port-icon"></div>
<div id="cluster-input-port-details">
<div id="cluster-input-port-name"></div>
<div id="cluster-input-port-id"></div>
<div id="cluster-input-port-type"></div>
<div id="cluster-input-port-group-id" class="hidden"></div>
</div>
<div id="cluster-input-port-id"></div>
</div>
</div>
<div id="cluster-input-port-summary-table"></div>

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-output-port-summary-dialog.jsp
View File

@ -27,9 +27,10 @@
<div id="cluster-output-port-icon"></div>
<div id="cluster-output-port-details">
<div id="cluster-output-port-name"></div>
<div id="cluster-output-port-id"></div>
<div id="cluster-output-port-type"></div>
<div id="cluster-output-port-group-id" class="hidden"></div>
</div>
<div id="cluster-output-port-id"></div>
</div>
</div>
<div id="cluster-output-port-summary-table"></div>

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-process-group-summary-dialog.jsp
View File

@ -27,8 +27,9 @@
<div id="cluster-process-group-icon"></div>
<div id="cluster-process-group-details">
<div id="cluster-process-group-name"></div>
<div id="cluster-process-group-id"></div>
<div id="cluster-process-group-type"></div>
</div>
<div id="cluster-process-group-id"></div>
</div>
</div>
<div id="cluster-process-group-summary-table"></div>

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-processor-summary-dialog.jsp
View File

@ -27,9 +27,10 @@
<div id="cluster-processor-icon"></div>
<div id="cluster-processor-details">
<div id="cluster-processor-name"></div>
<div id="cluster-processor-id"></div>
<div id="cluster-processor-type"></div>
<div id="cluster-processor-group-id" class="hidden"></div>
</div>
<div id="cluster-processor-id"></div>
</div>
</div>
<div id="cluster-processor-summary-table"></div>

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-remote-process-group-summary-dialog.jsp
View File

@ -27,9 +27,10 @@
<div id="cluster-remote-process-group-icon"></div>
<div id="cluster-remote-process-group-details">
<div id="cluster-remote-process-group-name"></div>
<div id="cluster-remote-process-group-id"></div>
<div id="cluster-remote-process-group-type"></div>
<div id="cluster-remote-process-group-group-id" class="hidden"></div>
</div>
<div id="cluster-remote-process-group-id"></div>
</div>
</div>
<div id="cluster-remote-process-group-summary-table"></div>

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

@ -329,8 +329,6 @@ span.sorted {
}
#cluster-processor-refresh-button {
height: 24px;
width: 26px;
float: left;
}
@ -350,34 +348,50 @@ span.sorted {
#cluster-processor-details-container {
position: absolute;
right: 35px;
height: 52px;
}
#cluster-processor-icon {
width: 28px;
height: 26px;
float: left;
margin-right: 5px;
margin-top: -2px;
}
#cluster-processor-icon:before {
font-family: flowfont;
content: "\e808";
font-size: 16px;
content: "\e807";
font-size: 32px;
color: #ad9897;
}
#cluster-processor-details {
float: left;
padding-left: 10px;
}
#cluster-processor-name {
margin-bottom: 2px;
color: #000;
font-weight: bold;
white-space: nowrap;
height: 15px;
font-size: 15px;
font-family: Roboto;
color: #262626;
width: 230px;
text-overflow: ellipsis;
overflow: hidden;
width: 200px;
white-space: nowrap;
}
#cluster-processor-type {
font-size: 12px;
font-family: Roboto;
color: #728e9b;
margin-top: 3px;
}
#cluster-processor-id {
font-size: 12px;
font-family: Roboto;
color: #775351;
position: absolute;
bottom: 0px;
}
/* cluster input port summary table */
@ -401,8 +415,6 @@ span.sorted {
}
#cluster-input-port-refresh-button {
height: 24px;
width: 26px;
float: left;
}
@ -422,35 +434,50 @@ span.sorted {
#cluster-input-port-details-container {
position: absolute;
right: 35px;
height: 52px;
}
#cluster-input-port-icon {
background-size: cover;
width: 40px;
height: 26px;
float: left;
margin-right: 5px;
margin-top: -2px;
}
#cluster-input-port-icon:before {
font-family: flowfont;
content: "\e832";
font-size: 16px;
font-size: 32px;
color: #ad9897;
}
#cluster-input-port-details {
float: left;
padding-left: 10px;
}
#cluster-input-port-name {
margin-bottom: 2px;
color: #000;
font-weight: bold;
white-space: nowrap;
height: 15px;
font-size: 15px;
font-family: Roboto;
color: #262626;
width: 230px;
text-overflow: ellipsis;
overflow: hidden;
width: 200px;
white-space: nowrap;
}
#cluster-input-port-type {
font-size: 12px;
font-family: Roboto;
color: #728e9b;
margin-top: 3px;
}
#cluster-input-port-id {
font-size: 12px;
font-family: Roboto;
color: #775351;
position: absolute;
bottom: 0px;
}
/* cluster output port summary table */
@ -474,8 +501,6 @@ span.sorted {
}
#cluster-output-port-refresh-button {
height: 24px;
width: 26px;
float: left;
}
@ -495,35 +520,50 @@ span.sorted {
#cluster-output-port-details-container {
position: absolute;
right: 35px;
height: 52px;
}
#cluster-output-port-icon {
background-size: cover;
width: 40px;
height: 26px;
float: left;
margin-right: 5px;
margin-top: -2px;
}
#cluster-output-port-icon:before {
font-family: flowfont;
content: "\e833";
font-size: 16px;
font-size: 32px;
color: #ad9897;
}
#cluster-output-port-details {
float: left;
padding-left: 10px;
}
#cluster-output-port-name {
margin-bottom: 2px;
color: #000;
font-weight: bold;
white-space: nowrap;
height: 15px;
font-size: 15px;
font-family: Roboto;
color: #262626;
width: 230px;
text-overflow: ellipsis;
overflow: hidden;
width: 200px;
white-space: nowrap;
}
#cluster-output-port-type {
font-size: 12px;
font-family: Roboto;
color: #728e9b;
margin-top: 3px;
}
#cluster-output-port-id {
font-size: 12px;
font-family: Roboto;
color: #775351;
position: absolute;
bottom: 0px;
}
/* cluster remote process group summary table */
@ -547,8 +587,6 @@ span.sorted {
}
#cluster-remote-process-group-refresh-button {
height: 24px;
width: 26px;
float: left;
}
@ -568,11 +606,10 @@ span.sorted {
#cluster-remote-process-group-details-container {
position: absolute;
right: 35px;
height: 52px;
}
#cluster-remote-process-group-icon {
width: 30px;
height: 22px;
float: left;
margin-right: 5px;
}
@ -580,21 +617,39 @@ span.sorted {
#cluster-remote-process-group-icon:before {
font-family: flowfont;
content: "\e805";
font-size: 16px;
font-size: 32px;
color: #ad9897;
}
#cluster-remote-process-group-details {
float: left;
padding-left: 10px;
}
#cluster-remote-process-group-name {
margin-bottom: 2px;
color: #000;
font-weight: bold;
white-space: nowrap;
height: 15px;
font-size: 15px;
font-family: Roboto;
color: #262626;
width: 230px;
text-overflow: ellipsis;
overflow: hidden;
width: 200px;
white-space: nowrap;
}
#cluster-remote-process-group-type {
font-size: 12px;
font-family: Roboto;
color: #728e9b;
margin-top: 3px;
}
#cluster-remote-process-group-id {
font-size: 12px;
font-family: Roboto;
color: #775351;
position: absolute;
bottom: 0px;
}
/* cluster connection summary table */
@ -618,8 +673,6 @@ span.sorted {
}
#cluster-connection-refresh-button {
height: 24px;
width: 26px;
float: left;
}
@ -639,34 +692,50 @@ span.sorted {
#cluster-connection-details-container {
position: absolute;
right: 35px;
height: 52px;
}
#cluster-connection-icon {
width: 28px;
height: 28px;
float: left;
margin-right: 5px;
margin-top: -4px;
}
#cluster-connection-icon:before {
font-family: flowfont;
content: "\e834";
font-size: 16px;
font-size: 32px;
color: #ad9897;
}
#cluster-connection-details {
float: left;
padding-left: 10px;
}
#cluster-connection-name {
margin-bottom: 2px;
color: #000;
font-weight: bold;
white-space: nowrap;
height: 15px;
font-size: 15px;
font-family: Roboto;
color: #262626;
width: 230px;
text-overflow: ellipsis;
overflow: hidden;
width: 200px;
white-space: nowrap;
}
#cluster-connection-type {
font-size: 12px;
font-family: Roboto;
color: #728e9b;
margin-top: 3px;
}
#cluster-connection-id {
font-size: 12px;
font-family: Roboto;
color: #775351;
position: absolute;
bottom: 0px;
}
/* cluster process group summary table */
@ -690,8 +759,6 @@ span.sorted {
}
#cluster-process-group-refresh-button {
height: 24px;
width: 26px;
float: left;
}
@ -711,32 +778,48 @@ span.sorted {
#cluster-process-group-details-container {
position: absolute;
right: 35px;
height: 52px;
}
#cluster-process-group-icon {
width: 29px;
height: 20px;
float: left;
margin-right: 5px;
margin-top: 1px;
}
#cluster-process-group-icon:before {
font-family: flowfont;
content: "\e804";
font-size: 16px;
font-size: 32px;
color: #ad9897;
}
#cluster-process-group-details {
float: left;
padding-left: 10px;
}
#cluster-process-group-name {
margin-bottom: 2px;
color: #000;
font-weight: bold;
white-space: nowrap;
height: 15px;
font-size: 15px;
font-family: Roboto;
color: #262626;
width: 230px;
text-overflow: ellipsis;
overflow: hidden;
width: 200px;
white-space: nowrap;
}
#cluster-process-group-type {
font-size: 12px;
font-family: Roboto;
color: #728e9b;
margin-top: 3px;
}
#cluster-process-group-id {
font-size: 12px;
font-family: Roboto;
color: #775351;
position: absolute;
bottom: 0px;
}

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
View File

@ -1707,8 +1707,8 @@ nf.SummaryTable = (function () {
}
// generate the mark up
var formattedValue = '<div class="' + transmissionClass + '" style="margin-top: 5px;"></div>';
return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + transmissionLabel + '</div><div style="float: left; margin-left: 4px;">' + nf.Common.escapeHtml(activeThreadCount) + '</div>';
var formattedValue = '<div layout="row"><div class="' + transmissionClass + '"></div>';
return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + transmissionLabel + '</div><div style="float: left; margin-left: 4px;">' + nf.Common.escapeHtml(activeThreadCount) + '</div></div>';
};
var transmissionStatusColumn = {
@ -2495,6 +2495,7 @@ nf.SummaryTable = (function () {
// populate the processor details
$('#cluster-processor-name').text(processorStatus.name).ellipsis();
$('#cluster-processor-type').text(processorStatus.aggregateSnapshot.type).ellipsis();
$('#cluster-processor-id').text(processorStatus.id);
$('#cluster-processor-group-id').text(processorStatus.groupId);
@ -2551,6 +2552,7 @@ nf.SummaryTable = (function () {
// populate the processor details
$('#cluster-connection-name').text(connectionStatus.name).ellipsis();
$('#cluster-connection-type').text('Connection').ellipsis();
$('#cluster-connection-id').text(connectionStatus.id);
$('#cluster-connection-group-id').text(connectionStatus.groupId);
@ -2611,6 +2613,7 @@ nf.SummaryTable = (function () {
// populate the input port details
$('#cluster-process-group-name').text(processGroupStatus.name).ellipsis();
$('#cluster-process-group-type').text('Process Group').ellipsis();
$('#cluster-process-group-id').text(processGroupStatus.id);
// update the stats last refreshed timestamp
@ -2662,6 +2665,7 @@ nf.SummaryTable = (function () {
// populate the input port details
$('#cluster-input-port-name').text(inputPortStatus.name).ellipsis();
$('#cluster-input-port-type').text('Input Port').ellipsis();
$('#cluster-input-port-id').text(inputPortStatus.id);
$('#cluster-input-port-group-id').text(inputPortStatus.groupId);
@ -2714,6 +2718,7 @@ nf.SummaryTable = (function () {
// populate the output port details
$('#cluster-output-port-name').text(outputPortStatus.name).ellipsis();
$('#cluster-output-port-type').text('Output Port').ellipsis();
$('#cluster-output-port-id').text(outputPortStatus.id);
$('#cluster-output-port-group-id').text(outputPortStatus.groupId);
@ -2768,6 +2773,7 @@ nf.SummaryTable = (function () {
// populate the remote process group details
$('#cluster-remote-process-group-name').text(remoteProcessGroupStatus.name).ellipsis();
$('#cluster-remote-process-group-type').text('Remote Process Group').ellipsis();
$('#cluster-remote-process-group-id').text(remoteProcessGroupStatus.id);
$('#cluster-remote-process-group-group-id').text(remoteProcessGroupStatus.groupId);