mirror of https://github.com/apache/nifi.git
[NIFI-2027] Responsive Tables. This closes #577
This commit is contained in:
Scott Aslan
Matt Gilman
parent
e3d13ecf50
commit
bb0ea78741
|
|
@ -15,7 +15,7 @@
|
|||
limitations under the License.
|
||||
--%>
|
||||
<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
|
||||
<div id="listing-request-status-dialog" layout="column" class="hidden large-dialog">
|
||||
<div id="listing-request-status-dialog" layout="column" class="hidden small-dialog">
|
||||
<div class="dialog-content">
|
||||
<div class="setting">
|
||||
<div class="setting-field">
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div flex layout="row" style="padding-top:0">
|
||||
<div flex layout="row" style="padding-top:0;height: 90%;">
|
||||
<div flex="25" id="controller-service-tag-cloud-container">
|
||||
<div class="setting">
|
||||
<div class="setting-field">
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div flex layout="row" style="padding-top:0">
|
||||
<div flex layout="row" style="padding-top:0;height: 90%;">
|
||||
<div flex="25" id="processor-tag-cloud-container">
|
||||
<div class="setting">
|
||||
<div class="setting-field">
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div flex layout="row" style="padding-top:0">
|
||||
<div flex layout="row" style="padding-top:0;height: 90%;">
|
||||
<div flex="25" id="reporting-task-tag-cloud-container">
|
||||
<div class="setting">
|
||||
<div class="setting-name">Tags</div>
|
||||
|
|
|
|||
|
|
@ -23,36 +23,34 @@
|
|||
<button id="add-process-group-configuration-controller-service" class="add-button fa fa-plus"></button>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="general-process-group-configuration-tab-content" class="configuration-tab">
|
||||
<div id="general-process-group-configuration">
|
||||
<div class="setting">
|
||||
<div class="setting-name">Process group name</div>
|
||||
<div class="editable setting-field">
|
||||
<input type="text" id="process-group-name" class="setting-input"/>
|
||||
</div>
|
||||
<div class="read-only setting-field">
|
||||
<span id="read-only-process-group-name"></span>
|
||||
</div>
|
||||
<div id="general-process-group-configuration-tab-content" class="configuration-tab">
|
||||
<div id="general-process-group-configuration">
|
||||
<div class="setting">
|
||||
<div class="setting-name">Process group name</div>
|
||||
<div class="editable setting-field">
|
||||
<input type="text" id="process-group-name" class="setting-input"/>
|
||||
</div>
|
||||
<div class="setting">
|
||||
<div class="setting-name">Process group comments</div>
|
||||
<div class="editable setting-field">
|
||||
<textarea id="process-group-comments" class="setting-input"></textarea>
|
||||
</div>
|
||||
<div class="read-only setting-field">
|
||||
<span id="read-only-process-group-comments"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editable settings-buttons">
|
||||
<div id="process-group-configuration-save" class="button">Apply</div>
|
||||
<div class="clear"></div>
|
||||
<div class="read-only setting-field">
|
||||
<span id="read-only-process-group-name"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting">
|
||||
<div class="setting-name">Process group comments</div>
|
||||
<div class="editable setting-field">
|
||||
<textarea id="process-group-comments" class="setting-input"></textarea>
|
||||
</div>
|
||||
<div class="read-only setting-field">
|
||||
<span id="read-only-process-group-comments"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editable settings-buttons">
|
||||
<div id="process-group-configuration-save" class="button">Apply</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="process-group-controller-services-tab-content" class="configuration-tab">
|
||||
<div id="process-group-controller-services-table" class="settings-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="process-group-controller-services-tab-content" class="configuration-tab">
|
||||
<div id="process-group-controller-services-table" class="settings-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="process-group-refresh-container">
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<div id="queue-listing-header-text"></div>
|
||||
</div>
|
||||
<div id="queue-listing-stats-container">
|
||||
<div id="queue-listing-stats">
|
||||
<div id="queue-listing-stats" class="filter-status">
|
||||
Displaying <span id="displayed-flowfiles"></span> of <span id="total-flowfiles-count"></span> (<span id="total-flowfiles-size"></span>)
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
<button id="provenance-search-button" class="fa fa-search"></button>
|
||||
</div>
|
||||
<div id="provenance-table"></div>
|
||||
<div id="provenance-refresh-container" class="last-refreshed-container">
|
||||
<div id="provenance-refresh-container">
|
||||
<button id="refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
|
||||
<div id="provenance-last-refreshed-container" class="last-refreshed-container">
|
||||
Last updated: <span id="provenance-last-refreshed" class="value-color"></span>
|
||||
|
|
|
|||
|
|
@ -42,9 +42,11 @@
|
|||
|
||||
#component-state-table {
|
||||
overflow: hidden;
|
||||
height: 55%;
|
||||
width: 100%;
|
||||
min-height: 150px;
|
||||
position: absolute;
|
||||
top: 208px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
bottom: 52px;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -53,7 +55,8 @@
|
|||
|
||||
#clear-link-container {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
top: 186px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
#clear-link.disabled {
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ div.controller-service-canceling {
|
|||
*/
|
||||
|
||||
#controller-service-comments {
|
||||
height: 250px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -22,14 +22,14 @@
|
|||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 90%;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#counters-header-and-filter {
|
||||
height: 32px;
|
||||
height: 98px;
|
||||
}
|
||||
|
||||
#counters-header-text {
|
||||
|
|
@ -44,6 +44,7 @@
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#counters-loading-container {
|
||||
|
|
@ -66,7 +67,9 @@
|
|||
/* counters table */
|
||||
|
||||
#counters-table {
|
||||
overflow: hidden;
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 98px;
|
||||
left: 0px;
|
||||
bottom: 47px;
|
||||
right: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ div.go-to-link {
|
|||
|
||||
#listing-request-percent-complete {
|
||||
margin-top: 10px;
|
||||
width: 378px;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,9 +22,8 @@
|
|||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 90%;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
@ -33,13 +32,13 @@
|
|||
font-weight: bold;
|
||||
color: #728E9B;
|
||||
font-family: Roboto Slab;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#history-refresh-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#history-loading-container {
|
||||
|
|
@ -62,16 +61,18 @@
|
|||
/* history filter controls */
|
||||
|
||||
#history-filter-container {
|
||||
float: right;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
#history-filter-button {
|
||||
float: right;
|
||||
margin-left: 1px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#history-filter-overview {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -137,7 +138,9 @@ div.history-details-name {
|
|||
/* history table */
|
||||
|
||||
#history-table {
|
||||
overflow: hidden;
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 62px;
|
||||
left: 0px;
|
||||
bottom: 47px;
|
||||
right: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
#controller-service-types-table {
|
||||
min-height: 150px;
|
||||
overflow: hidden;
|
||||
height: 80%;
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
#processor-types-table {
|
||||
min-height: 150px;
|
||||
overflow: hidden;
|
||||
height: 80%;
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
#reporting-task-types-table {
|
||||
min-height: 150px;
|
||||
overflow: hidden;
|
||||
height: 80%;
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,12 @@
|
|||
|
||||
#process-group-configuration {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#add-process-group-configuration-controller-service {
|
||||
|
|
@ -27,11 +33,6 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#process-group-controller-services-table {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* settings tabs */
|
||||
|
||||
#process-group-configuration-tabs {
|
||||
|
|
@ -40,8 +41,8 @@
|
|||
|
||||
#process-group-refresh-container {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
left: 0px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -184,5 +184,5 @@ div.relationship-description {
|
|||
*/
|
||||
|
||||
#processor-comments {
|
||||
height: 250px;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -22,9 +22,14 @@
|
|||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#provenance-header-and-filter{
|
||||
height: 111px;
|
||||
}
|
||||
|
||||
#provenance-header-text {
|
||||
|
|
@ -33,6 +38,7 @@
|
|||
color: #728E9B;
|
||||
font-family: Roboto Slab;
|
||||
margin-bottom: 15px;
|
||||
height: 118px;
|
||||
}
|
||||
|
||||
#provenance-refresh-container {
|
||||
|
|
@ -176,23 +182,10 @@ div.searchable-field-value {
|
|||
|
||||
/* event details dialog */
|
||||
|
||||
#event-details-tabs {
|
||||
background-color: transparent;
|
||||
height: 21px;
|
||||
width: 778px;
|
||||
}
|
||||
|
||||
#event-details-dialog div.details-tab {
|
||||
display: none;
|
||||
height: 330px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
div.flowfile-container {
|
||||
width: 282px;
|
||||
height: 120px;
|
||||
overflow: auto;
|
||||
border: 1px solid #aaa;
|
||||
padding: 5px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
|
|
@ -203,60 +196,57 @@ div.flowfile-container {
|
|||
}
|
||||
|
||||
div.event-header {
|
||||
color: #264C58;
|
||||
font-size: 11px;
|
||||
color: #728e9b;
|
||||
font-size: 12pt;
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
line-height: 56px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#attributes-container {
|
||||
height: 290px;
|
||||
overflow: auto;
|
||||
border: 1px solid #aaa;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
div.detail-name {
|
||||
float: left;
|
||||
width: 145px;
|
||||
color: #527991;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: Roboto Slab;
|
||||
padding-bottom: 4px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
div.detail-value {
|
||||
float: left;
|
||||
width: 270px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
color: #775351;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.attribute-detail {
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
div.attribute-name {
|
||||
float: left;
|
||||
width: 225px;
|
||||
color: #527991;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: Roboto Slab;
|
||||
padding-bottom: 4px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
div.attribute-value {
|
||||
float: left;
|
||||
width: 490px;
|
||||
margin-left: 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
color: #775351;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#attributes-header {
|
||||
|
|
@ -296,7 +286,7 @@ div.modified-attribute-value {
|
|||
}
|
||||
|
||||
div.event-detail {
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#input-content-download, #output-content-download, #replay-content {
|
||||
|
|
@ -310,22 +300,20 @@ div.event-detail {
|
|||
}
|
||||
|
||||
div.content-detail-name {
|
||||
color: #527991;
|
||||
float: left;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 90px;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: Roboto Slab;
|
||||
padding-bottom: 4px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
div.content-detail-value {
|
||||
width: 265px;
|
||||
float: left;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
color: #775351;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#replay-details {
|
||||
|
|
@ -348,7 +336,7 @@ div.content-detail-value {
|
|||
position: absolute;
|
||||
top: 78px;
|
||||
left: 0px;
|
||||
bottom: 35px;
|
||||
bottom: 48px;
|
||||
right: 0px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,14 @@
|
|||
Queue listing styles
|
||||
*/
|
||||
|
||||
#queue-listing-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
#queue-listing-header-text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
|
@ -27,7 +35,6 @@
|
|||
}
|
||||
|
||||
#queue-listing-stats-container {
|
||||
margin-left: 20px;
|
||||
margin-top: 18px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
|
@ -35,8 +42,8 @@
|
|||
|
||||
#queue-listing-refresh-container {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#queue-listing-last-refreshed {
|
||||
|
|
@ -52,113 +59,86 @@
|
|||
margin-left: 3px;
|
||||
}
|
||||
|
||||
#queue-listing-stats {
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
color: #9f6000;
|
||||
float: right;
|
||||
line-height: normal;
|
||||
margin-right: 20px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* queue listing table */
|
||||
|
||||
#queue-listing-table {
|
||||
overflow: hidden;
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.provenance-icon {
|
||||
background-image: url(../images/iconProvenance.png);
|
||||
background-position: top left;
|
||||
background-size: cover;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 53px;
|
||||
left: 0px;
|
||||
bottom: 68px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
/* queue listing table */
|
||||
|
||||
#queue-listing-message {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
color: #f00;
|
||||
font-size: 10px;
|
||||
top: 36px;
|
||||
color: #ba554a;
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
right: 0px;
|
||||
max-width: 40%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* flowfile details */
|
||||
|
||||
#flowfile-details-tabs {
|
||||
background-color: transparent;
|
||||
border-bottom: 3px solid #666666;
|
||||
height: 21px;
|
||||
width: 778px;
|
||||
}
|
||||
|
||||
#flowfile-details-dialog div.details-tab {
|
||||
background: url("../images/bgTabContainer.png") repeat-x scroll 0 0 #EEEEEE;
|
||||
display: none;
|
||||
height: 330px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
div.flowfile-header {
|
||||
color: #264C58;
|
||||
font-size: 11px;
|
||||
color: #728e9b;
|
||||
font-size: 12pt;
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
line-height: 56px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#flowfile-attributes-container {
|
||||
height: 290px;
|
||||
overflow: auto;
|
||||
border: 1px solid #aaa;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
div.detail-name {
|
||||
float: left;
|
||||
width: 145px;
|
||||
color: #527991;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: Roboto Slab;
|
||||
padding-bottom: 4px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
div.detail-value {
|
||||
float: left;
|
||||
width: 270px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
color: #775351;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.attribute-detail {
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
div.attribute-name {
|
||||
float: left;
|
||||
width: 225px;
|
||||
color: #527991;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: Roboto Slab;
|
||||
padding-bottom: 4px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
div.attribute-value {
|
||||
float: left;
|
||||
width: 490px;
|
||||
margin-left: 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
color: #775351;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#flowfile-attributes-header {
|
||||
|
|
@ -166,7 +146,7 @@ div.attribute-value {
|
|||
}
|
||||
|
||||
div.flowfile-detail {
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#content-download {
|
||||
|
|
@ -180,20 +160,18 @@ div.flowfile-detail {
|
|||
}
|
||||
|
||||
div.content-detail-name {
|
||||
color: #527991;
|
||||
float: left;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 90px;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: Roboto Slab;
|
||||
padding-bottom: 4px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
div.content-detail-value {
|
||||
width: 200px;
|
||||
float: left;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
color: #775351;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,5 +72,5 @@ input.reporting-task-scheduling-period {
|
|||
*/
|
||||
|
||||
#reporting-task-comments {
|
||||
height: 250px;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -16,7 +16,12 @@
|
|||
*/
|
||||
|
||||
#settings {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
div.settings-header-text {
|
||||
|
|
@ -24,12 +29,12 @@ div.settings-header-text {
|
|||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #728E9B;
|
||||
padding-top: 28px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
div.settings-container {
|
||||
margin-top: 18px;
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
#new-service-or-task {
|
||||
|
|
@ -38,10 +43,8 @@ div.settings-container {
|
|||
}
|
||||
|
||||
#settings-refresh-container {
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
/* settings tabs */
|
||||
|
|
@ -51,10 +54,11 @@ div.settings-tabs {
|
|||
}
|
||||
|
||||
div.settings-table {
|
||||
min-height: 150px;
|
||||
overflow: hidden;
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 111px;
|
||||
left: 0px;
|
||||
bottom: 72px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
span.sorted {
|
||||
|
|
|
|||
|
|
@ -69,6 +69,9 @@ div.close-hover {
|
|||
}
|
||||
|
||||
#shell {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
|
@ -23,8 +23,10 @@
|
|||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 35px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#summary-header-text {
|
||||
|
|
@ -37,8 +39,9 @@
|
|||
|
||||
#flow-summary-refresh-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
#summary-loading-container {
|
||||
|
|
@ -59,9 +62,10 @@
|
|||
}
|
||||
|
||||
div.status-text {
|
||||
margin-left: 4px;
|
||||
float: left;
|
||||
padding-left: 4px;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* view options */
|
||||
|
|
@ -265,7 +269,7 @@ div.summary-table {
|
|||
position: absolute;
|
||||
top: 151px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
bottom: 48px;
|
||||
right: 0px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
|
|
|
|||
|
|
@ -22,12 +22,16 @@
|
|||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 90%;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#templates-header-and-filter {
|
||||
height: 108px;
|
||||
}
|
||||
|
||||
#templates-header-text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
|
@ -40,6 +44,7 @@
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#templates-loading-container {
|
||||
|
|
@ -178,8 +183,9 @@ input.templates-filter-list {
|
|||
/* templates table */
|
||||
|
||||
#templates-table {
|
||||
overflow: hidden;
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
top: -28px;
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 0px;
|
||||
bottom: 47px;
|
||||
right: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ div.property-table {
|
|||
width: 100%;
|
||||
min-height: 150px;
|
||||
overflow: hidden;
|
||||
height: 80%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.property-table .fa {
|
||||
|
|
|
|||
|
|
@ -102,6 +102,14 @@ classes should alter those!
|
|||
border-right: 0px !important;
|
||||
}
|
||||
|
||||
.grid-canvas *:last-child .fa{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.grid-canvas *:last-child .icon{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.slick-viewport .fa {
|
||||
color: #004849;
|
||||
line-height: 22px;
|
||||
|
|
|
|||
|
|
@ -60,6 +60,17 @@ ul.tab-pane {
|
|||
}
|
||||
|
||||
div.configuration-tab {
|
||||
height: 320px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
div[id$=-tabs-content] {
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
div[id$=-tab-content] {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[id$=-properties] {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -43,22 +43,6 @@ $(document).ready(function () {
|
|||
|
||||
// initialize the bulletin board
|
||||
nf.ng.Bridge.injector.get('bulletinBoardCtrl').init();
|
||||
|
||||
//alter styles if we're not in the shell
|
||||
if (top === window) {
|
||||
$('#bulletin-board').css('margin', 40);
|
||||
$('#bulletin-board-refresh-container').css({
|
||||
"position": "absolute",
|
||||
"width": "100%",
|
||||
"bottom": "40px",
|
||||
"margin": "40px"
|
||||
});
|
||||
|
||||
$('#bulletin-board-status-container').css({
|
||||
"float": "right",
|
||||
"padding-right": "80px"
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
nf.ng.BulletinBoardCtrl = function (serviceProvider) {
|
||||
|
|
@ -290,6 +274,27 @@ nf.ng.BulletinBoardCtrl = function (serviceProvider) {
|
|||
* Initializes the bulletin board page.
|
||||
*/
|
||||
init: function () {
|
||||
//alter styles if we're not in the shell
|
||||
if (top === window) {
|
||||
$('body').css({
|
||||
'height': $(window).height() + 'px',
|
||||
'width': $(window).width() + 'px'
|
||||
});
|
||||
|
||||
$('#bulletin-board').css('margin', 40);
|
||||
$('#bulletin-board-refresh-container').css({
|
||||
"position": "absolute",
|
||||
"width": "100%",
|
||||
"bottom": "40px",
|
||||
"margin": "40px"
|
||||
});
|
||||
|
||||
$('#bulletin-board-status-container').css({
|
||||
"float": "right",
|
||||
"padding-right": "80px"
|
||||
});
|
||||
}
|
||||
|
||||
nf.Storage.init();
|
||||
|
||||
initializePage().done(function () {
|
||||
|
|
|
|||
|
|
@ -528,12 +528,13 @@ nf.Canvas = (function () {
|
|||
updateFlowStatusContainerSize();
|
||||
|
||||
// resize grids when appropriate
|
||||
if ($('#process-group-controller-services-table').is(':visible')) {
|
||||
nf.ProcessGroupConfiguration.resetTableSize();
|
||||
} else if ($('#controller-services-table').is(':visible') || $('#reporting-tasks-table').is(':visible')) {
|
||||
nf.Settings.resetTableSize();
|
||||
} else if ($('#queue-listing-table').is(':visible')) {
|
||||
nf.QueueListing.resetTableSize();
|
||||
var gridElements = $('*[class*="slickgrid_"]');
|
||||
for (var i = 0, len = gridElements.length; i < len; i++) {
|
||||
if ($(gridElements[i]).is(':visible')){
|
||||
setTimeout(function(gridElement){
|
||||
gridElement.data('gridInstance').resizeCanvas();
|
||||
}, 50, $(gridElements[i]));
|
||||
}
|
||||
}
|
||||
}
|
||||
}).on('keydown', function (evt) {
|
||||
|
|
|
|||
|
|
@ -252,6 +252,7 @@ nf.QueueListing = (function () {
|
|||
|
||||
// update the button model of the drop request status dialog
|
||||
$('#listing-request-status-dialog').modal('setButtonModel', [{
|
||||
headerText: 'Queue Listing',
|
||||
buttonText: 'Stop',
|
||||
color: {
|
||||
base: '#728E9B',
|
||||
|
|
@ -318,10 +319,8 @@ nf.QueueListing = (function () {
|
|||
} else if (listingRequest.destinationRunning === true) {
|
||||
queueListingMessage.text('The destination of this queue is currently running. This listing may no longer be accurate.').show();
|
||||
}
|
||||
queueListingTable.css('bottom', '35px');
|
||||
} else {
|
||||
queueListingMessage.text('').hide();
|
||||
queueListingTable.css('bottom', '20px');
|
||||
}
|
||||
|
||||
// get the grid to load the data
|
||||
|
|
@ -611,7 +610,7 @@ nf.QueueListing = (function () {
|
|||
if (nf.Common.canAccessProvenance()) {
|
||||
// function for formatting actions
|
||||
var actionsFormatter = function () {
|
||||
return '<div title="Provenance" class="pointer provenance-icon view-provenance"></div>';
|
||||
return '<div title="Provenance" class="pointer icon icon-provenance view-provenance"></div>';
|
||||
};
|
||||
|
||||
queueListingColumns.push({
|
||||
|
|
|
|||
|
|
@ -561,6 +561,8 @@ nf.ReportingTask = (function () {
|
|||
|
||||
// show the details
|
||||
$('#reporting-task-configuration').modal('show');
|
||||
|
||||
$('#reporting-task-properties').propertytable('resetTableSize');
|
||||
}).fail(nf.Common.handleAjaxError);
|
||||
},
|
||||
|
||||
|
|
@ -673,6 +675,8 @@ nf.ReportingTask = (function () {
|
|||
|
||||
// show the details
|
||||
reportingTaskDialog.modal('show');
|
||||
|
||||
$('#reporting-task-properties').propertytable('resetTableSize');
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -165,11 +165,6 @@ nf.CountersTable = (function () {
|
|||
}
|
||||
});
|
||||
|
||||
// listen for browser resize events to update the page size
|
||||
$(window).resize(function () {
|
||||
nf.CountersTable.resetTableSize();
|
||||
});
|
||||
|
||||
// initialize the templates table
|
||||
var countersColumns = [
|
||||
{id: 'context', name: 'Context', field: 'context', sortable: true, resizable: true},
|
||||
|
|
|
|||
|
|
@ -20,12 +20,6 @@
|
|||
$(document).ready(function () {
|
||||
// initialize the counters page
|
||||
nf.Counters.init();
|
||||
|
||||
//alter styles if we're not in the shell
|
||||
if (top === window) {
|
||||
$('#counters').css('margin', 40);
|
||||
$('#counters-refresh-container').css('margin', 40);
|
||||
}
|
||||
});
|
||||
|
||||
nf.Counters = (function () {
|
||||
|
|
@ -140,8 +134,22 @@ nf.Counters = (function () {
|
|||
nf.CountersTable.loadCountersTable().done(function () {
|
||||
// once the table is initialized, finish initializing the page
|
||||
initializeCountersPage().done(function () {
|
||||
// configure the initial grid height
|
||||
nf.CountersTable.resetTableSize();
|
||||
var setBodySize = function () {
|
||||
//alter styles if we're not in the shell
|
||||
if (top === window) {
|
||||
$('body').css({
|
||||
'height': $(window).height() + 'px',
|
||||
'width': $(window).width() + 'px'
|
||||
});
|
||||
|
||||
$('#counters').css('margin', 40);
|
||||
$('#counters-table').css('bottom', 127);
|
||||
$('#counters-refresh-container').css('margin', 40);
|
||||
}
|
||||
|
||||
// configure the initial grid height
|
||||
nf.CountersTable.resetTableSize();
|
||||
};
|
||||
|
||||
// get the about details
|
||||
$.ajax({
|
||||
|
|
@ -155,7 +163,13 @@ nf.Counters = (function () {
|
|||
// set the document title and the about title
|
||||
document.title = countersTitle;
|
||||
$('#counters-header-text').text(countersTitle);
|
||||
|
||||
// set the initial size
|
||||
setBodySize();
|
||||
}).fail(nf.Common.handleAjaxError);
|
||||
|
||||
// listen for browser resize events to reset the body size
|
||||
$(window).resize(setBodySize);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -150,9 +150,9 @@
|
|||
|
||||
// show the filter message if applicable
|
||||
if (query['sourceId'] || query['userName'] || query['startDate'] || query['endDate']) {
|
||||
$('#history-filter-overview').show();
|
||||
$('#history-filter-overview').css('visibility', 'visible');
|
||||
} else {
|
||||
$('#history-filter-overview').hide();
|
||||
$('#history-filter-overview').css('visibility', 'hidden');
|
||||
}
|
||||
|
||||
// clear the current request
|
||||
|
|
|
|||
|
|
@ -247,18 +247,13 @@ nf.HistoryTable = (function () {
|
|||
* Initializes the history table.
|
||||
*/
|
||||
var initHistoryTable = function () {
|
||||
// listen for browser resize events to update the page size
|
||||
$(window).resize(function () {
|
||||
nf.HistoryTable.resetTableSize();
|
||||
});
|
||||
|
||||
// clear the current filter
|
||||
$('#clear-history-filter').click(function () {
|
||||
// clear the filter dialog
|
||||
$('#history-filter').val('');
|
||||
|
||||
// hide the overview
|
||||
$('#history-filter-overview').hide();
|
||||
$('#history-filter-overview').css('visibility', 'hidden');
|
||||
|
||||
// clear the filter
|
||||
var historyGrid = $('#history-table').data('gridInstance');
|
||||
|
|
|
|||
|
|
@ -20,12 +20,6 @@
|
|||
$(document).ready(function () {
|
||||
// initialize the status page
|
||||
nf.History.init();
|
||||
|
||||
//alter styles if we're not in the shell
|
||||
if (top === window) {
|
||||
$('#history').css('margin', 40);
|
||||
$('#history-refresh-container').css('margin', 40);
|
||||
}
|
||||
});
|
||||
|
||||
nf.History = (function () {
|
||||
|
|
@ -142,8 +136,21 @@ nf.History = (function () {
|
|||
|
||||
// once the table is initialized, finish initializing the page
|
||||
initializeHistoryPage().done(function () {
|
||||
// configure the initial grid height
|
||||
nf.HistoryTable.resetTableSize();
|
||||
var setBodySize = function () {
|
||||
//alter styles if we're not in the shell
|
||||
if (top === window) {
|
||||
$('body').css({
|
||||
'height': $(window).height() + 'px',
|
||||
'width': $(window).width() + 'px'
|
||||
});
|
||||
|
||||
$('#history').css('margin', 40);
|
||||
$('#history-refresh-container').css('margin', 40);
|
||||
}
|
||||
|
||||
// configure the initial grid height
|
||||
nf.HistoryTable.resetTableSize();
|
||||
};
|
||||
|
||||
// get the about details
|
||||
$.ajax({
|
||||
|
|
@ -157,7 +164,13 @@ nf.History = (function () {
|
|||
// set the document title and the about title
|
||||
document.title = historyTitle;
|
||||
$('#history-header-text').text(historyTitle);
|
||||
|
||||
// set the initial size
|
||||
setBodySize();
|
||||
}).fail(nf.Common.handleAjaxError);
|
||||
|
||||
// listen for browser resize events to reset the body size
|
||||
$(window).resize(setBodySize);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -566,11 +566,6 @@ nf.ProvenanceTable = (function () {
|
|||
}
|
||||
});
|
||||
|
||||
// listen for browser resize events to update the page size
|
||||
$(window).resize(function () {
|
||||
nf.ProvenanceTable.resetTableSize();
|
||||
});
|
||||
|
||||
// clear the current search
|
||||
$('#clear-provenance-search').click(function () {
|
||||
// clear each searchable field
|
||||
|
|
|
|||
|
|
@ -20,11 +20,6 @@
|
|||
$(document).ready(function () {
|
||||
// initialize the status page
|
||||
nf.Provenance.init();
|
||||
|
||||
//alter styles if we're not in the shell
|
||||
if (top === window) {
|
||||
$('#provenance').css('margin', 40);
|
||||
}
|
||||
});
|
||||
|
||||
nf.Provenance = (function () {
|
||||
|
|
@ -223,11 +218,34 @@ nf.Provenance = (function () {
|
|||
});
|
||||
}
|
||||
|
||||
// once the table is initialized, finish initializing the page
|
||||
initializeProvenancePage().done(function () {
|
||||
var setBodySize = function () {
|
||||
//alter styles if we're not in the shell
|
||||
if (top === window) {
|
||||
$('body').css({
|
||||
'height': $(window).height() + 'px',
|
||||
'width': $(window).width() + 'px'
|
||||
});
|
||||
|
||||
$('#provenance').css('margin', 40);
|
||||
$('#provenance-table').css('bottom', 127);
|
||||
$('#provenance-refresh-container').css({
|
||||
'margin': '0px 0px 40px 0px',
|
||||
'bottom': '40px'
|
||||
});
|
||||
}
|
||||
|
||||
// configure the initial grid height
|
||||
nf.ProvenanceTable.resetTableSize();
|
||||
};
|
||||
|
||||
// once the table is initialized, finish initializing the page
|
||||
initializeProvenancePage().done(function () {
|
||||
// set the initial size
|
||||
setBodySize();
|
||||
});
|
||||
|
||||
// listen for browser resize events to reset the body size
|
||||
$(window).resize(setBodySize);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,23 +40,6 @@ $(document).ready(function () {
|
|||
|
||||
// initialize the summary page
|
||||
nf.Summary.init();
|
||||
|
||||
//alter styles if we're not in the shell
|
||||
if (top === window) {
|
||||
$('#summary').css('margin', 40);
|
||||
$('#flow-summary-refresh-container').css({
|
||||
"position": "absolute",
|
||||
"width": "100%",
|
||||
"bottom": "0px",
|
||||
"margin": "40px"
|
||||
});
|
||||
|
||||
$('#system-diagnostics-link-container').css({
|
||||
"float": "right",
|
||||
"margin-top": "8px",
|
||||
"padding-right": "80px"
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
nf.Summary = (function () {
|
||||
|
|
@ -175,10 +158,21 @@ nf.Summary = (function () {
|
|||
initializeSummaryPage().done(function () {
|
||||
|
||||
var setBodySize = function () {
|
||||
$('body').css({
|
||||
'height': $(window).height() + 'px',
|
||||
'width': $(window).width() + 'px'
|
||||
});
|
||||
//alter styles if we're not in the shell
|
||||
if (top === window) {
|
||||
$('body').css({
|
||||
'height': $(window).height() + 'px',
|
||||
'width': $(window).width() + 'px'
|
||||
});
|
||||
|
||||
$('#summary').css('margin', 40);
|
||||
$('div.summary-table').css('bottom', 127);
|
||||
$('#flow-summary-refresh-container').css({
|
||||
"position": "absolute",
|
||||
"bottom": "0px",
|
||||
"margin": "40px"
|
||||
});
|
||||
}
|
||||
|
||||
nf.SummaryTable.resetTableSize();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -216,11 +216,6 @@ nf.TemplatesTable = (function () {
|
|||
}
|
||||
});
|
||||
|
||||
// listen for browser resize events to update the page size
|
||||
$(window).resize(function () {
|
||||
nf.TemplatesTable.resetTableSize();
|
||||
});
|
||||
|
||||
// enable template uploading if DFM
|
||||
if (nf.Common.isDFM()) {
|
||||
$('#upload-template-container').show();
|
||||
|
|
|
|||
|
|
@ -20,12 +20,6 @@
|
|||
$(document).ready(function () {
|
||||
// initialize the templates page
|
||||
nf.Templates.init();
|
||||
|
||||
//alter styles if we're not in the shell
|
||||
if (top === window) {
|
||||
$('#templates').css('margin', 40);
|
||||
$('#templates-refresh-container').css('margin', 40);
|
||||
}
|
||||
});
|
||||
|
||||
nf.Templates = (function () {
|
||||
|
|
@ -229,8 +223,22 @@ nf.Templates = (function () {
|
|||
nf.TemplatesTable.loadTemplatesTable().done(function () {
|
||||
// once the table is initialized, finish initializing the page
|
||||
initializeTemplatesPage().done(function () {
|
||||
// configure the initial grid height
|
||||
nf.TemplatesTable.resetTableSize();
|
||||
var setBodySize = function () {
|
||||
//alter styles if we're not in the shell
|
||||
if (top === window) {
|
||||
$('body').css({
|
||||
'height': $(window).height() + 'px',
|
||||
'width': $(window).width() + 'px'
|
||||
});
|
||||
|
||||
$('#templates').css('margin', 40);
|
||||
$('#templates-table').css('bottom', 127);
|
||||
$('#templates-refresh-container').css('margin', 40);
|
||||
}
|
||||
|
||||
// configure the initial grid height
|
||||
nf.TemplatesTable.resetTableSize();
|
||||
};
|
||||
|
||||
// get the about details
|
||||
$.ajax({
|
||||
|
|
@ -244,7 +252,13 @@ nf.Templates = (function () {
|
|||
// set the document title and the about title
|
||||
document.title = templatesTitle;
|
||||
$('#templates-header-text').text(templatesTitle);
|
||||
|
||||
// set the initial size
|
||||
setBodySize();
|
||||
}).fail(nf.Common.handleAjaxError);
|
||||
|
||||
// listen for browser resize events to reset the body size
|
||||
$(window).resize(setBodySize);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue