[NIFI-3038] Update cluster summary dialog layout. This closes #1534

This commit is contained in:
Scott Aslan 2017-02-27 12:05:29 -05:00 committed by Matt Gilman
parent cfe899d189
commit c3dbbb845f
No known key found for this signature in database
GPG Key ID: DF61EC19432AEE37
7 changed files with 156 additions and 84 deletions

View File

@ -18,11 +18,6 @@
<div id="cluster-connection-summary-dialog" class="hidden large-dialog">
<div class="dialog-content">
<div id="cluster-connection-summary-header">
<button id="cluster-connection-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
<div id="cluster-connection-summary-last-refreshed-container" class="last-refreshed-container">
Last updated:&nbsp;<span id="cluster-connection-summary-last-refreshed"></span>
</div>
<div id="cluster-connection-summary-loading-container" class="loading-container"></div>
<div id="cluster-connection-details-container">
<div id="cluster-connection-icon"></div>
<div id="cluster-connection-details">
@ -35,4 +30,9 @@
</div>
<div id="cluster-connection-summary-table"></div>
</div>
<button id="cluster-connection-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
<div id="cluster-connection-summary-last-refreshed-container" class="last-refreshed-container">
Last updated:&nbsp;<span id="cluster-connection-summary-last-refreshed" class="value-color"></span>
</div>
<div id="cluster-connection-summary-loading-container" class="loading-container"></div>
</div>

View File

@ -18,11 +18,6 @@
<div id="cluster-input-port-summary-dialog" class="hidden large-dialog">
<div class="dialog-content">
<div id="cluster-input-port-summary-header">
<button id="cluster-input-port-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
<div id="cluster-input-port-summary-last-refreshed-container" class="last-refreshed-container">
Last updated:&nbsp;<span id="cluster-input-port-summary-last-refreshed"></span>
</div>
<div id="cluster-input-port-summary-loading-container" class="loading-container"></div>
<div id="cluster-input-port-details-container">
<div id="cluster-input-port-icon"></div>
<div id="cluster-input-port-details">
@ -35,4 +30,9 @@
</div>
<div id="cluster-input-port-summary-table"></div>
</div>
<button id="cluster-input-port-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
<div id="cluster-input-port-summary-last-refreshed-container" class="last-refreshed-container">
Last updated:&nbsp;<span id="cluster-input-port-summary-last-refreshed" class="value-color"></span>
</div>
<div id="cluster-input-port-summary-loading-container" class="loading-container"></div>
</div>

View File

@ -18,11 +18,6 @@
<div id="cluster-output-port-summary-dialog" class="hidden large-dialog">
<div class="dialog-content">
<div id="cluster-output-port-summary-header">
<button id="cluster-output-port-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
<div id="cluster-output-port-summary-last-refreshed-container" class="last-refreshed-container">
Last updated:&nbsp;<span id="cluster-output-port-summary-last-refreshed"></span>
</div>
<div id="cluster-output-port-summary-loading-container" class="loading-container"></div>
<div id="cluster-output-port-details-container">
<div id="cluster-output-port-icon"></div>
<div id="cluster-output-port-details">
@ -35,4 +30,9 @@
</div>
<div id="cluster-output-port-summary-table"></div>
</div>
<button id="cluster-output-port-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
<div id="cluster-output-port-summary-last-refreshed-container" class="last-refreshed-container">
Last updated:&nbsp;<span id="cluster-output-port-summary-last-refreshed" class="value-color"></span>
</div>
<div id="cluster-output-port-summary-loading-container" class="loading-container"></div>
</div>

View File

@ -18,11 +18,6 @@
<div id="cluster-process-group-summary-dialog" class="hidden large-dialog">
<div class="dialog-content">
<div id="cluster-process-group-summary-header">
<button id="cluster-process-group-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
<div id="cluster-process-group-summary-last-refreshed-container" class="last-refreshed-container">
Last updated:&nbsp;<span id="cluster-process-group-summary-last-refreshed"></span>
</div>
<div id="cluster-process-group-summary-loading-container" class="loading-container"></div>
<div id="cluster-process-group-details-container">
<div id="cluster-process-group-icon"></div>
<div id="cluster-process-group-details">
@ -34,4 +29,9 @@
</div>
<div id="cluster-process-group-summary-table"></div>
</div>
<button id="cluster-process-group-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
<div id="cluster-process-group-summary-last-refreshed-container" class="last-refreshed-container">
Last updated:&nbsp;<span id="cluster-process-group-summary-last-refreshed" class="value-color"></span>
</div>
<div id="cluster-process-group-summary-loading-container" class="loading-container"></div>
</div>

View File

@ -18,11 +18,6 @@
<div id="cluster-processor-summary-dialog" class="hidden large-dialog">
<div class="dialog-content">
<div id="cluster-processor-summary-header">
<button id="cluster-processor-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
<div id="cluster-processor-summary-last-refreshed-container" class="last-refreshed-container">
Last updated:&nbsp;<span id="cluster-processor-summary-last-refreshed"></span>
</div>
<div id="cluster-processor-summary-loading-container" class="loading-container"></div>
<div id="cluster-processor-details-container">
<div id="cluster-processor-icon"></div>
<div id="cluster-processor-details">
@ -35,4 +30,9 @@
</div>
<div id="cluster-processor-summary-table"></div>
</div>
<button id="cluster-processor-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
<div id="cluster-processor-summary-last-refreshed-container" class="last-refreshed-container">
Last updated:&nbsp;<span id="cluster-processor-summary-last-refreshed" class="value-color"></span>
</div>
<div id="cluster-processor-summary-loading-container" class="loading-container"></div>
</div>

View File

@ -18,11 +18,6 @@
<div id="cluster-remote-process-group-summary-dialog" class="hidden large-dialog">
<div class="dialog-content">
<div id="cluster-remote-process-group-summary-header">
<button id="cluster-remote-process-group-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
<div id="cluster-remote-process-group-summary-last-refreshed-container" class="last-refreshed-container">
Last updated:&nbsp;<span id="cluster-remote-process-group-summary-last-refreshed"></span>
</div>
<div id="cluster-remote-process-group-summary-loading-container" class="loading-container"></div>
<div id="cluster-remote-process-group-details-container">
<div id="cluster-remote-process-group-icon"></div>
<div id="cluster-remote-process-group-details">
@ -35,4 +30,9 @@
</div>
<div id="cluster-remote-process-group-summary-table"></div>
</div>
<button id="cluster-remote-process-group-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
<div id="cluster-remote-process-group-summary-last-refreshed-container" class="last-refreshed-container">
Last updated:&nbsp;<span id="cluster-remote-process-group-summary-last-refreshed" class="value-color"></span>
</div>
<div id="cluster-remote-process-group-summary-loading-container" class="loading-container"></div>
</div>

View File

@ -326,7 +326,15 @@ span.sorted {
}
#cluster-processor-refresh-button {
float: left;
position: absolute;
bottom: 20px;
left: 20px;
}
#cluster-processor-summary-last-refreshed-container {
position: absolute;
bottom: 27px;
left: 48px;
}
#cluster-processor-summary-last-refreshed {
@ -334,7 +342,9 @@ span.sorted {
}
#cluster-processor-summary-loading-container {
float: left;
position: absolute;
bottom: 28px;
left: 212px;
width: 16px;
height: 16px;
background-color: transparent;
@ -344,8 +354,9 @@ span.sorted {
#cluster-processor-details-container {
position: absolute;
right: 35px;
right: 0px;
height: 52px;
left: 0px;
}
#cluster-processor-icon {
@ -360,17 +371,11 @@ span.sorted {
color: #ad9897;
}
#cluster-processor-details {
float: left;
padding-left: 10px;
}
#cluster-processor-name {
height: 15px;
font-size: 15px;
font-family: Roboto;
color: #262626;
width: 230px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -381,6 +386,8 @@ span.sorted {
font-family: Roboto;
color: #728e9b;
margin-top: 3px;
overflow: hidden;
white-space: nowrap;
}
#cluster-processor-id {
@ -389,6 +396,11 @@ span.sorted {
color: #775351;
position: absolute;
bottom: 0px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
left: 0px;
right: 0px;
}
/* cluster input port summary table */
@ -412,7 +424,15 @@ span.sorted {
}
#cluster-input-port-refresh-button {
float: left;
position: absolute;
bottom: 20px;
left: 20px;
}
#cluster-input-port-summary-last-refreshed-container {
position: absolute;
bottom: 27px;
left: 48px;
}
#cluster-input-port-summary-last-refreshed {
@ -420,7 +440,9 @@ span.sorted {
}
#cluster-input-port-summary-loading-container {
float: left;
position: absolute;
bottom: 28px;
left: 212px;
width: 16px;
height: 16px;
background-color: transparent;
@ -430,8 +452,9 @@ span.sorted {
#cluster-input-port-details-container {
position: absolute;
right: 35px;
right: 0px;
height: 52px;
left: 0px;
}
#cluster-input-port-icon {
@ -446,17 +469,11 @@ span.sorted {
color: #ad9897;
}
#cluster-input-port-details {
float: left;
padding-left: 10px;
}
#cluster-input-port-name {
height: 15px;
font-size: 15px;
font-family: Roboto;
color: #262626;
width: 230px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -467,6 +484,8 @@ span.sorted {
font-family: Roboto;
color: #728e9b;
margin-top: 3px;
overflow: hidden;
white-space: nowrap;
}
#cluster-input-port-id {
@ -475,6 +494,11 @@ span.sorted {
color: #775351;
position: absolute;
bottom: 0px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
left: 0px;
right: 0px;
}
/* cluster output port summary table */
@ -498,7 +522,15 @@ span.sorted {
}
#cluster-output-port-refresh-button {
float: left;
position: absolute;
bottom: 20px;
left: 20px;
}
#cluster-output-port-summary-last-refreshed-container {
position: absolute;
bottom: 27px;
left: 48px;
}
#cluster-output-port-summary-last-refreshed {
@ -506,7 +538,9 @@ span.sorted {
}
#cluster-output-port-summary-loading-container {
float: left;
position: absolute;
bottom: 28px;
left: 212px;
width: 16px;
height: 16px;
background-color: transparent;
@ -516,8 +550,9 @@ span.sorted {
#cluster-output-port-details-container {
position: absolute;
right: 35px;
right: 0px;
height: 52px;
left: 0px;
}
#cluster-output-port-icon {
@ -532,17 +567,11 @@ span.sorted {
color: #ad9897;
}
#cluster-output-port-details {
float: left;
padding-left: 10px;
}
#cluster-output-port-name {
height: 15px;
font-size: 15px;
font-family: Roboto;
color: #262626;
width: 230px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -553,6 +582,8 @@ span.sorted {
font-family: Roboto;
color: #728e9b;
margin-top: 3px;
overflow: hidden;
white-space: nowrap;
}
#cluster-output-port-id {
@ -561,6 +592,11 @@ span.sorted {
color: #775351;
position: absolute;
bottom: 0px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
left: 0px;
right: 0px;
}
/* cluster remote process group summary table */
@ -584,7 +620,15 @@ span.sorted {
}
#cluster-remote-process-group-refresh-button {
float: left;
position: absolute;
bottom: 20px;
left: 20px;
}
#cluster-remote-process-group-summary-last-refreshed-container {
position: absolute;
bottom: 27px;
left: 48px;
}
#cluster-remote-process-group-summary-last-refreshed {
@ -592,7 +636,9 @@ span.sorted {
}
#cluster-remote-process-group-summary-loading-container {
float: left;
position: absolute;
bottom: 28px;
left: 212px;
width: 16px;
height: 16px;
background-color: transparent;
@ -602,8 +648,9 @@ span.sorted {
#cluster-remote-process-group-details-container {
position: absolute;
right: 35px;
right: 0px;
height: 52px;
left: 0px;
}
#cluster-remote-process-group-icon {
@ -618,17 +665,11 @@ span.sorted {
color: #ad9897;
}
#cluster-remote-process-group-details {
float: left;
padding-left: 10px;
}
#cluster-remote-process-group-name {
height: 15px;
font-size: 15px;
font-family: Roboto;
color: #262626;
width: 230px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -639,6 +680,8 @@ span.sorted {
font-family: Roboto;
color: #728e9b;
margin-top: 3px;
overflow: hidden;
white-space: nowrap;
}
#cluster-remote-process-group-id {
@ -647,6 +690,11 @@ span.sorted {
color: #775351;
position: absolute;
bottom: 0px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
left: 0px;
right: 0px;
}
/* cluster connection summary table */
@ -670,7 +718,15 @@ span.sorted {
}
#cluster-connection-refresh-button {
float: left;
position: absolute;
bottom: 20px;
left: 20px;
}
#cluster-connection-summary-last-refreshed-container {
position: absolute;
bottom: 27px;
left: 48px;
}
#cluster-connection-summary-last-refreshed {
@ -678,7 +734,9 @@ span.sorted {
}
#cluster-connection-summary-loading-container {
float: left;
position: absolute;
bottom: 28px;
left: 212px;
width: 16px;
height: 16px;
background-color: transparent;
@ -688,8 +746,9 @@ span.sorted {
#cluster-connection-details-container {
position: absolute;
right: 35px;
right: 0px;
height: 52px;
left: 0px;
}
#cluster-connection-icon {
@ -704,17 +763,11 @@ span.sorted {
color: #ad9897;
}
#cluster-connection-details {
float: left;
padding-left: 10px;
}
#cluster-connection-name {
height: 15px;
font-size: 15px;
font-family: Roboto;
color: #262626;
width: 230px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -725,6 +778,8 @@ span.sorted {
font-family: Roboto;
color: #728e9b;
margin-top: 3px;
overflow: hidden;
white-space: nowrap;
}
#cluster-connection-id {
@ -733,6 +788,11 @@ span.sorted {
color: #775351;
position: absolute;
bottom: 0px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
left: 0px;
right: 0px;
}
/* cluster process group summary table */
@ -756,7 +816,15 @@ span.sorted {
}
#cluster-process-group-refresh-button {
float: left;
position: absolute;
bottom: 20px;
left: 20px;
}
#cluster-process-group-summary-last-refreshed-container {
position: absolute;
bottom: 27px;
left: 48px;
}
#cluster-process-group-summary-last-refreshed {
@ -764,7 +832,9 @@ span.sorted {
}
#cluster-process-group-summary-loading-container {
float: left;
position: absolute;
bottom: 28px;
left: 212px;
width: 16px;
height: 16px;
background-color: transparent;
@ -774,8 +844,9 @@ span.sorted {
#cluster-process-group-details-container {
position: absolute;
right: 35px;
right: 0px;
height: 52px;
left: 0px;
}
#cluster-process-group-icon {
@ -790,17 +861,11 @@ span.sorted {
color: #ad9897;
}
#cluster-process-group-details {
float: left;
padding-left: 10px;
}
#cluster-process-group-name {
height: 15px;
font-size: 15px;
font-family: Roboto;
color: #262626;
width: 230px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -811,6 +876,8 @@ span.sorted {
font-family: Roboto;
color: #728e9b;
margin-top: 3px;
overflow: hidden;
white-space: nowrap;
}
#cluster-process-group-id {
@ -819,4 +886,9 @@ span.sorted {
color: #775351;
position: absolute;
bottom: 0px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
left: 0px;
right: 0px;
}