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

[NIFI-2081] Responsive dialog content, tab content, and scrollable styles. This closes #594

This commit is contained in:
Scott Aslan 2016-07-05 09:29:33 -04:00 committed by Matt Gilman
parent 470513fa2e
commit 293dc29936
73 changed files with 940 additions and 500 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,39 +18,41 @@
<div id="process-group-configuration">
<div id="process-group-configuration-header-text" class="settings-header-text">Process Group Configuration</div>
<div class="settings-container">
<div class="tab-container">
<div id="process-group-configuration-tabs" class="settings-tabs"></div>
<div>
<div id="process-group-configuration-tabs" class="settings-tabs tab-container"></div>
<button id="add-process-group-configuration-controller-service" class="add-button fa fa-plus"></button>
<div class="clear"></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 id="process-group-configuration-tabs-content">
<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>
<div class="read-only setting-field">
<span id="read-only-process-group-name"></span>
<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>
<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 class="editable settings-buttons">
<div id="process-group-configuration-save" class="button">Apply</div>
<div class="clear"></div>
</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>
<div id="process-group-controller-services-tab-content" class="configuration-tab">
<div id="process-group-controller-services-table" class="settings-table"></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>
<div id="process-group-refresh-container">

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

@ -18,8 +18,8 @@
<div id="settings">
<div id="settings-header-text" class="settings-header-text">NiFi Settings</div>
<div class="settings-container">
<div class="tab-container">
<div id="settings-tabs" class="settings-tabs"></div>
<div>
<div id="settings-tabs" class="settings-tabs tab-container"></div>
<button id="new-service-or-task" class="add-button fa fa-plus"></button>
<div class="clear"></div>
</div>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-search-dialog.jsp
View File

@ -18,7 +18,7 @@
<div id="provenance-search-dialog" class="hidden medium-dialog">
<div class="dialog-content">
<div class="setting">
<div class="setting-name">Fields</div>
<div class="setting-name" style="padding-top:10px;">Fields</div>
<div class="setting-field">
<div id="searchable-fields-container">
<div id="no-searchable-fields" class="unset">No searchable fields have been configured.</div>

26
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/summary-content.jsp
View File

@ -20,20 +20,20 @@
<div id="summary-header-text">NiFi Summary</div>
</div>
<div id="summary-tabs" class="tab-container"></div>
<div id="summary-filter-controls" class="filter-controls">
<div id="summary-filter-status" class="filter-status">
Displaying&nbsp;<span id="displayed-items"></span>&nbsp;of&nbsp;<span id="total-items"></span>
</div>
<div id="summary-filter-container" class="filter-container">
<input type="text" placeholder="Filter" id="summary-filter" class="filter"/>
<div id="summary-filter-type" class="filter-type"></div>
</div>
</div>
<div id="view-options-container">
View:&nbsp;
<span id="view-single-node-link" class="link">Single node</span>&nbsp;&nbsp;<span id="view-cluster-link" class="link">Cluster</span>
</div>
<div id="summary-tabs-content">
<div id="summary-filter-controls" class="filter-controls">
<div id="summary-filter-status" class="filter-status">
Displaying&nbsp;<span id="displayed-items"></span>&nbsp;of&nbsp;<span id="total-items"></span>
</div>
<div id="summary-filter-container" class="filter-container">
<input type="text" placeholder="Filter" id="summary-filter" class="filter"/>
<div id="summary-filter-type" class="filter-type"></div>
</div>
</div>
<div id="view-options-container">
View:&nbsp;
<span id="view-single-node-link" class="link">Single node</span>&nbsp;&nbsp;<span id="view-cluster-link" class="link">Cluster</span>
</div>
<div id="processor-summary-tab-content" class="configuration-tab">
<div id="processor-summary-table" class="summary-table"></div>
</div>

212
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/system-diagnostics-dialog.jsp
View File

@ -18,116 +18,117 @@
<div id="system-diagnostics-dialog" class="hidden large-dialog">
<div class="dialog-content">
<div id="system-diagnostics-tabs" class="tab-container"></div>
<div id="jvm-tab-content" class="configuration-tab">
<div class="settings-left">
<div id="system-diagnostics-tabs-content">
<div id="jvm-tab-content" class="configuration-tab">
<div class="settings-left">
<div class="setting">
<input type="hidden" id=""/>
<div class="setting-header">Heap <span id="utilization-heap"></span></div>
<div class="setting-field">
<table id="heap-table">
<tbody>
<tr>
<td class="memory-header setting-name">Max:</td>
</tr>
<tr>
<td><span id="max-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="setting-name">Total:</td>
</tr>
<tr>
<td><span id="total-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="setting-name">Used:</td>
</tr>
<tr>
<td><span id="used-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="setting-name">Free:</td>
</tr>
<tr>
<td><span id="free-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="clear"></div>
</div>
</div>
<div class="spacer"></div>
<div class="settings-right">
<div class="setting">
<div class="setting-header">Non-heap <span id="utilization-non-heap"></span></div>
<div class="setting-field">
<table id="heap-table">
<tbody>
<tr>
<td class="memory-header setting-name">Max:</td>
</tr>
<tr>
<td><span id="max-non-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="setting-name">Total:</td>
</tr>
<tr>
<td><span id="total-non-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="setting-name">Used:</td>
</tr>
<tr>
<td><span id="used-non-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="setting-name">Free:</td>
</tr>
<tr>
<td><span id="free-non-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<div class="setting">
<input type="hidden" id=""/>
<div class="setting-header">Heap <span id="utilization-heap"></span></div>
<div class="setting-field">
<table id="heap-table">
<tbody>
<tr>
<td class="memory-header setting-name">Max:</td>
</tr>
<tr>
<td><span id="max-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="setting-name">Total:</td>
</tr>
<tr>
<td><span id="total-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="setting-name">Used:</td>
</tr>
<tr>
<td><span id="used-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="setting-name">Free:</td>
</tr>
<tr>
<td><span id="free-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
<div class="setting-header">Garbage Collection</div>
<div id="garbage-collection-container" class="setting-field">
<table id="garbage-collection-table">
<tbody></tbody>
</table>
</div>
<div class="clear"></div>
</div>
</div>
<div class="spacer"></div>
<div class="settings-right">
<div class="setting">
<div class="setting-header">Non-heap <span id="utilization-non-heap"></span></div>
<div class="setting-field">
<table id="heap-table">
<tbody>
<tr>
<td class="memory-header setting-name">Max:</td>
</tr>
<tr>
<td><span id="max-non-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="setting-name">Total:</td>
</tr>
<tr>
<td><span id="total-non-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="setting-name">Used:</td>
</tr>
<tr>
<td><span id="used-non-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="setting-name">Free:</td>
</tr>
<tr>
<td><span id="free-non-heap"></span></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<div class="setting">
<div class="setting-header">Garbage Collection</div>
<div id="garbage-collection-container" class="setting-field">
<table id="garbage-collection-table">
<tbody></tbody>
</table>
</div>
</div>
</div>
<div id="system-tab-content"class="configuration-tab">
<div id="system-tab-content"class="configuration-tab">
<div class="settings-left">
<div class="setting">
<div class="setting-name">Available Processors:</div>
@ -162,6 +163,7 @@
</div>
</div>
</div>
</div>
<div id="system-diagnostics-refresh-container">
<button id="system-diagnostics-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
<div id="system-diagnostics-last-refreshed-container" class="last-refreshed-container">

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/bulletin-board.css
View File

@ -18,6 +18,10 @@
Bulletin Board Styles
*/
#bulletin-board {
margin: 20px;
}
#bulletin-board-header-text {
font-size: 18px;
font-weight: bold;
@ -28,8 +32,10 @@
#bulletin-board-refresh-container {
position: absolute;
width: 100%;
bottom: 0px;
right: 0px;
bottom: 20px;
margin: 20px;
left: 0px;
}
#bulletin-board-loading-container {

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

@ -97,6 +97,7 @@ input.cluster-filter-list {
overflow: hidden;
height: 80%;
width: 100%;
min-height: 150px;
}
span.sorted {

11
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/component-state.css
View File

@ -43,10 +43,11 @@
#component-state-table {
overflow: hidden;
position: absolute;
top: 208px;
left: 20px;
right: 20px;
bottom: 52px;
top: 142px;
left: 0px;
right: 0px;
bottom: 0px;
min-height: 150px;
}
/*
@ -55,7 +56,7 @@
#clear-link-container {
position: absolute;
top: 186px;
top: 120px;
right: 20px;
}

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

@ -26,14 +26,12 @@
}
#connection-details div.configuration-tab {
overflow: auto;
padding: 10px;
display: none;
}
#read-only-relationship-names {
border: 0 solid #CCCCCC;
height: 145px;
overflow-x: hidden;
overflow-y: auto;
padding: 2px 2px 0;

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/controller-service.css
View File

@ -54,10 +54,8 @@
#controller-service-referencing-components {
border: 0 solid #CCCCCC;
height: 280px;
overflow: auto;
padding: 2px;
width: 376px;
}
div.referencing-component-block {
@ -161,8 +159,6 @@ div.controller-service-canceling {
#disable-controller-service-referencing-components {
border: 0 solid #CCCCCC;
padding: 2px;
width: 429px;
height: 335px;
overflow: auto;
white-space: nowrap;
}
@ -198,8 +194,6 @@ div.controller-service-canceling {
#enable-controller-service-referencing-components {
border: 0 solid #ccc;
padding: 2px;
width: 429px;
height: 335px;
overflow: auto;
white-space: nowrap;
}

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

@ -72,4 +72,5 @@
left: 0px;
bottom: 47px;
right: 0px;
min-height: 150px;
}

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

@ -199,7 +199,6 @@ div.go-to-link {
#listing-request-percent-complete {
margin-top: 10px;
width: 100%;
border-radius: 0;
}
@ -212,7 +211,6 @@ div.progress-label {
display: block;
font-weight: bold;
text-align: center;
/*width: 378px;*/
margin-top: 4px;
}
@ -264,7 +262,7 @@ ul.result li {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: bold;
line-height: 56px;
padding-bottom: 20px;
text-overflow: ellipsis;
}

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

@ -143,4 +143,5 @@ div.history-details-name {
left: 0px;
bottom: 47px;
right: 0px;
min-height: 150px;
}

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

@ -311,6 +311,14 @@ textarea {
font-size: 13px !important;
}
#new-template-description {
position: absolute;
top: 81px;
bottom: 0px;
height: inherit;
min-height: 32px;
}
ul.property-info {
list-style-type: disc;
margin-left: 10px;
@ -507,7 +515,8 @@ input:focus {
/* filter controls */
.filter-controls {
width: 100%;
position: absolute;
top: 10px;
}
.filter-container {
@ -606,8 +615,7 @@ div.secondary-button:hover {
}
.scrollable {
background: rgba(255, 255, 255, 1);
background: linear-gradient(to bottom,rgba(255,255,255,1) 0,rgba(255,255,255,0.50) 95%,rgba(234,238,240,1) 100%);
border-bottom: 1px solid #d0dbe0;
}
/* progress bars */
@ -640,7 +648,7 @@ md-progress-linear > div {
#select-template-button {
position: absolute;
top: 66px;
top: 0px;
left: 135px;
cursor: pointer;
overflow: hidden;

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css
View File

@ -26,11 +26,10 @@
}
#add-process-group-configuration-controller-service {
float: right;
margin-top: 4px;
cursor: pointer;
font-size: 16px;
text-transform: uppercase;
position: absolute;
top: 0px;
right: 0px;
}
/* settings tabs */
@ -39,6 +38,11 @@
float: left;
}
#process-group-configuration-tabs-content {
top: 53px;
bottom: 52px;
}
#process-group-refresh-container {
position: absolute;
bottom: 20px;

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

@ -29,7 +29,6 @@
}
#processor-details div.details-tab {
height: 330px;
display: none;
}
@ -43,7 +42,6 @@
overflow-y: auto;
overflow-x: hidden;
padding: 2px 2px 0;
width: 376px;
}
#processor-details div.relationship-name {

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

@ -110,7 +110,7 @@ input.provenance-filter-list {
#provenance-search-container {
float: right;
position: relative;
top: -38px;
top: 42px;
}
#provenance-search-button {
@ -131,7 +131,6 @@ input.provenance-filter-list {
/* provenance search dialog */
#searchable-fields-container {
width: 100%;
min-height: 185px;
padding: 5px;
overflow: auto;
@ -334,12 +333,13 @@ div.content-detail-value {
#provenance-table {
position: absolute;
top: 78px;
top: 88px;
left: 0px;
bottom: 48px;
right: 0px;
overflow: hidden;
background-color: #fff;
min-height: 150px;
}
/* provenance lineage */

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/queue-listing.css
View File

@ -67,6 +67,7 @@
left: 0px;
bottom: 68px;
right: 0px;
min-height: 150px;
}
/* queue listing table */
@ -93,7 +94,7 @@ div.flowfile-header {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: bold;
line-height: 56px;
padding-bottom: 20px;
text-overflow: ellipsis;
}

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/remote-process-group-configuration.css
View File

@ -81,8 +81,7 @@ div.remote-port-header {
div.remote-ports-container {
padding: 5px;
overflow-y: auto;
overflow-x: hidden;
height: 335px;
overflow-x: auto;
border: 1px solid #666;
}

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

@ -33,13 +33,17 @@ div.settings-header-text {
}
div.settings-container {
margin-top: 18px;
height: 85%;
position: absolute;
top: 58px;
bottom: 0px;
left: 0px;
right: 0px;
}
#new-service-or-task {
float: right;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
}
#settings-refresh-container {
@ -53,12 +57,18 @@ div.settings-tabs {
float: left;
}
#settings-tabs-content {
top: 53px;
bottom: 48px;
}
div.settings-table {
position: absolute;
top: 111px;
top: 0px;
left: 0px;
bottom: 72px;
bottom: 20px;
right: 0px;
min-height: 150px;
}
span.sorted {

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

@ -30,8 +30,13 @@
#shell-container {
background: #fff;
box-shadow: 0 5px 8px rgba(0,0,0,0.30);
padding: 20px;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
}
#shell-close-container {
@ -74,4 +79,5 @@ div.close-hover {
right: 0px;
bottom: 0px;
left: 0px;
overflow: hidden;
}

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

@ -63,7 +63,6 @@
#status-history-container {
float: left;
margin-bottom: 30px;
}
#status-history-chart-container {

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

@ -121,8 +121,8 @@ input.search-nodes {
#system-diagnostics-refresh-container{
position: absolute;
top: 66px;
right: 20px;
top: 0px;
right: 0px;
}
#system-diagnostics-loading-container {
@ -228,6 +228,14 @@ div.storage-usage-progressbar div.ui-progressbar-value {
float: left;
}
#summary-tabs-content {
top: 80px;
}
#summary-filter-controls {
z-index: 1;
}
.summary-tab {
display: block;
padding: 0 5px;
@ -267,12 +275,13 @@ div.storage-usage-progressbar div.ui-progressbar-value {
div.summary-table {
position: absolute;
top: 151px;
top: 70px;
left: 0px;
bottom: 48px;
right: 0px;
overflow: hidden;
background-color: #fff;
min-height: 150px;
}
span.sorted {
@ -288,9 +297,14 @@ span.sorted {
/* cluster processor summary table */
#cluster-processor-summary-table {
position: absolute;
top: 70px;
left: 0px;
bottom: 48px;
right: 0px;
overflow: hidden;
height: 80%;
width: 100%;
background-color: #fff;
min-height: 150px;
}
#cluster-processor-summary-header {
@ -349,9 +363,14 @@ span.sorted {
/* cluster input port summary table */
#cluster-input-port-summary-table {
position: absolute;
top: 70px;
left: 0px;
bottom: 48px;
right: 0px;
overflow: hidden;
height: 80%;
width: 100%;
background-color: #fff;
min-height: 150px;
}
#cluster-input-port-summary-header {
@ -411,9 +430,14 @@ span.sorted {
/* cluster output port summary table */
#cluster-output-port-summary-table {
position: absolute;
top: 70px;
left: 0px;
bottom: 48px;
right: 0px;
overflow: hidden;
height: 80%;
width: 100%;
background-color: #fff;
min-height: 150px;
}
#cluster-output-port-summary-header {
@ -473,9 +497,14 @@ span.sorted {
/* cluster remote process group summary table */
#cluster-remote-process-group-summary-table {
position: absolute;
top: 70px;
left: 0px;
bottom: 48px;
right: 0px;
overflow: hidden;
height: 80%;
width: 100%;
background-color: #fff;
min-height: 150px;
}
#cluster-remote-process-group-summary-header {
@ -533,10 +562,14 @@ span.sorted {
/* cluster connection summary table */
#cluster-connection-summary-table {
width: 100%;
position: absolute;
top: 70px;
left: 0px;
bottom: 48px;
right: 0px;
overflow: hidden;
height: 80%;
width: 100%;
background-color: #fff;
min-height: 150px;
}
#cluster-connection-summary-header {
@ -595,9 +628,14 @@ span.sorted {
/* cluster process group summary table */
#cluster-process-group-summary-table {
position: absolute;
top: 70px;
left: 0px;
bottom: 48px;
right: 0px;
overflow: hidden;
height: 80%;
width: 100%;
background-color: #fff;
min-height: 150px;
}
#cluster-process-group-summary-header {

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

@ -98,4 +98,5 @@ input.templates-filter-list {
left: 0px;
bottom: 47px;
right: 0px;
min-height: 150px;
}

13
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
View File

@ -22,6 +22,9 @@
background-color: #ffffff;
box-shadow: 0 5px 8px rgba(0,0,0,0.30);
overflow: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.small-dialog {
@ -73,8 +76,14 @@
}
.dialog-content {
padding: 10px 20px 20px 20px;
overflow: auto;
position: absolute;
top: 66px;
bottom: 52px;
left: 20px;
right: 20px;
overflow-y: auto;
/*padding: 10px 20px 20px 20px;*/
/*overflow: auto;*/
}
.dialog-buttons {

403
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
View File

@ -23,6 +23,7 @@
* header: true,
* footer: true,
* headerText: 'Dialog Header',
* scrollableContentStyle: 'scrollable',
* buttons: [{
* buttonText: 'Cancel',
* color: {
@ -45,7 +46,8 @@
* }
* }],
* handler: {
* close: closeHandler
* close: closeHandler,
* open: openHandler
* }
* }
*
@ -156,9 +158,28 @@
dialog.prepend(dialogHeader);
}
var nfDialog = {};
if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
nfDialog = dialog.data('nf-dialog');
}
// save the close handler
if (isDefinedAndNotNull(options.handler)) {
dialog.data('handler', options.handler);
if (isDefinedAndNotNull(options.handler.close)) {
nfDialog.close = options.handler.close;
}
}
// save the open handler
if (isDefinedAndNotNull(options.handler)) {
if (isDefinedAndNotNull(options.handler.open)) {
nfDialog.open = options.handler.open;
}
}
// save the scrollable class name
if (isDefinedAndNotNull(options.scrollableContentStyle)) {
nfDialog.scrollableContentStyle = options.scrollableContentStyle;
}
// determine if dialog needs footer/buttons
@ -166,6 +187,9 @@
// add the buttons
addButtons(dialog, options.buttons);
}
//persist data attribute
dialog.data('nfDialog', nfDialog);
}
});
},
@ -175,9 +199,36 @@
*
* @argument {function} handler The function to call when hiding the dialog
*/
setHandler: function (handler) {
return this.each(function () {
$(this).data('handler', handler);
setCloseHandler: function (handler) {
return this.each(function (index, dialog) {
var nfDialog = {};
if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
nfDialog = $(dialog).data('nf-dialog');
}
nfDialog.close = handler;
//persist data attribute
$(dialog).data('nfDialog', nfDialog);
});
},
/**
* Sets the handler that is used when the dialog is opened.
*
* @argument {function} handler The function to call when showing the dialog
*/
setOpenHandler: function (handler) {
return this.each(function (index, dialog) {
var nfDialog = {};
if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
nfDialog = $(dialog).data('nf-dialog');
}
nfDialog.open = handler;
//persist data attribute
$(dialog).data('nfDialog', nfDialog);
});
},
@ -211,12 +262,168 @@
});
},
resize: function () {
var dialog = $(this);
var dialogContent = dialog.find('.dialog-content');
var nfDialog = {};
if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
nfDialog = dialog.data('nf-dialog');
}
//initialize responsive properties
if (!isDefinedAndNotNull(nfDialog.responsive)) {
nfDialog.responsive = {};
if (!isDefinedAndNotNull(nfDialog.responsive.x)) {
nfDialog.responsive.x = true;
}
if (!isDefinedAndNotNull(nfDialog.responsive.y)) {
nfDialog.responsive.y = true;
}
} else {
if (!isDefinedAndNotNull(nfDialog.responsive.x)) {
nfDialog.responsive.x = true;
} else {
nfDialog.responsive.x = (nfDialog.responsive.x == "true" || nfDialog.responsive.x == true) ? true : false;
}
if (!isDefinedAndNotNull(nfDialog.responsive.y)) {
nfDialog.responsive.y = true;
} else {
nfDialog.responsive.y = (nfDialog.responsive.y == "true" || nfDialog.responsive.y == true) ? true : false;
}
}
if (!isDefinedAndNotNull(nfDialog.resizable)) {
nfDialog.resizable = false;
} else {
nfDialog.resizable = (nfDialog.resizable == "true" || nfDialog.resizable == true) ? true : false;
}
if(nfDialog.resizable){
dialogContent.css({
'position': 'static',
'padding': '10px 20px 52px 20px'
});
}
if (nfDialog.responsive.y || nfDialog.responsive.x) {
var fullscreenHeight;
var fullscreenWidth;
if (isDefinedAndNotNull(nfDialog.responsive['fullscreen-height'])) {
fullscreenHeight = parseInt(nfDialog.responsive['fullscreen-height'], 10);
} else {
nfDialog.responsive['fullscreen-height'] = dialog.height() + 'px';
fullscreenHeight = parseInt(nfDialog.responsive['fullscreen-height'], 10);
}
if (isDefinedAndNotNull(nfDialog.responsive['fullscreen-width'])) {
fullscreenWidth = parseInt(nfDialog.responsive['fullscreen-width'], 10);
} else {
nfDialog.responsive['fullscreen-width'] = dialog.width() + 'px';
fullscreenWidth = parseInt(nfDialog.responsive['fullscreen-width'], 10);
}
if (!isDefinedAndNotNull(nfDialog.width)) {
nfDialog.width = dialog.css('width');
}
if (!isDefinedAndNotNull(nfDialog['min-width'])) {
if (parseInt(dialog.css('min-width'), 10) > 0) {
nfDialog['min-width'] = dialog.css('min-width');
} else {
nfDialog['min-width'] = nfDialog.width;
}
}
//min-width should always be set in terms of px
if (nfDialog['min-width'].indexOf("%") > 0) {
nfDialog['min-width'] = ($(window).width() * (parseInt(nfDialog['min-width'], 10) / 100)) + 'px';
}
if (!isDefinedAndNotNull(nfDialog.height)) {
nfDialog.height = dialog.css('height');
}
if (!isDefinedAndNotNull(nfDialog['min-height'])) {
if (parseInt(dialog.css('min-height'), 10) > 0) {
nfDialog['min-height'] = dialog.css('min-height');
} else {
nfDialog['min-height'] = nfDialog.height;
}
}
//min-height should always be set in terms of px
if (nfDialog['min-height'].indexOf("%") > 0) {
nfDialog['min-height'] = ($(window).height() * (parseInt(nfDialog['min-height'], 10) / 100)) + 'px';
}
//resize dialog
if ($(window).height() < fullscreenHeight) {
if (nfDialog.responsive.y) {
dialog.css('height', '100%');
dialog.css('min-height', '100%');
}
} else {
//set the dialog min-height
dialog.css('min-height', nfDialog['min-height']);
if (nfDialog.responsive.y) {
//make sure nfDialog.height is in terms of %
if (nfDialog.height.indexOf("px") > 0) {
nfDialog.height = (parseInt(nfDialog.height, 10) / $(window).height() * 100) + '%';
}
dialog.css('height', nfDialog.height);
}
}
if ($(window).width() < fullscreenWidth) {
if (nfDialog.responsive.x) {
dialog.css('width', '100%');
dialog.css('min-width', '100%');
}
} else {
//set the dialog width
dialog.css('min-width', nfDialog['min-width']);
if (nfDialog.responsive.x) {
//make sure nfDialog.width is in terms of %
if (nfDialog.width.indexOf("px") > 0) {
nfDialog.width = (parseInt(nfDialog.width, 10) / $(window).width() * 100) + '%';
}
dialog.css('width', nfDialog.width);
}
}
dialog.center();
//persist data attribute
dialog.data('nfDialog', nfDialog);
}
//apply scrollable style if applicable
if (dialogContent[0].offsetHeight < dialogContent[0].scrollHeight) {
// your element has overflow
if (isDefinedAndNotNull(nfDialog.scrollableContentStyle)) {
dialogContent.addClass(nfDialog.scrollableContentStyle);
}
} else {
// your element doesn't have overflow
if (isDefinedAndNotNull(nfDialog.scrollableContentStyle)) {
dialogContent.removeClass(nfDialog.scrollableContentStyle);
}
}
},
/**
* Shows the dialog.
*/
show: function () {
var dialog = $(this);
var dialogContent = dialog.find('.dialog-content');
var zIndex = dialog.css('z-index');
if (zIndex === 'auto') {
@ -233,7 +440,7 @@
var index;
return isNaN(index = parseInt($(openDialog).css("z-index"), 10)) ? 0 : index;
});
//Add 2 so that we have room for the modalGlass of the new dialog
//Add 2 so that we have room for the glass pane overlay of the new dialog
zIndex = Math.max.apply(null, zVals) + 2;
}
dialog.css('z-index', zIndex);
@ -243,15 +450,15 @@
nfDialog = dialog.data('nf-dialog');
}
// determine if dialog needs a glasspane
// determine if dialog needs a glass pane overlay
var hasGlasspane;
if (isDefinedAndNotNull(nfDialog.glasspane)) {
hasGlasspane = nfDialog.glasspane;
} else {
hasGlasspane = true;
nfDialog.glasspane = hasGlasspane = true;
}
//create glasspane overlay
//create glass pane overlay
if(hasGlasspane && (top === window)) {
// build the dialog modal
var modalGlassMarkup = '<div data-nf-dialog-parent="' + dialog.attr('id') + '" class="modal-glass"></div>';
@ -261,169 +468,21 @@
modalGlass.css('z-index', zIndex - 1).appendTo($('body'));
}
var resize = function () {
//initialize responsive properties
if (!isDefinedAndNotNull(nfDialog.responsive)) {
nfDialog.responsive = {};
if (!isDefinedAndNotNull(nfDialog.responsive.x)) {
nfDialog.responsive.x = true;
}
if (!isDefinedAndNotNull(nfDialog.responsive.y)) {
nfDialog.responsive.y = true;
}
} else {
if (!isDefinedAndNotNull(nfDialog.responsive.x)) {
nfDialog.responsive.x = true;
} else {
nfDialog.responsive.x = (nfDialog.responsive.x == "true" || nfDialog.responsive.x == true) ? true : false;
}
if (!isDefinedAndNotNull(nfDialog.responsive.y)) {
nfDialog.responsive.y = true;
} else {
nfDialog.responsive.y = (nfDialog.responsive.y == "true" || nfDialog.responsive.y == true) ? true : false;
}
}
if (!isDefinedAndNotNull(nfDialog.resizable)) {
nfDialog.resizable = false;
} else {
nfDialog.resizable = (nfDialog.resizable == "true" || nfDialog.resizable == true) ? true : false;
}
if (nfDialog.responsive.y || nfDialog.responsive.x) {
var fullscreenHeight;
var fullscreenWidth;
if (isDefinedAndNotNull(nfDialog.responsive['fullscreen-height'])) {
fullscreenHeight = parseInt(nfDialog.responsive['fullscreen-height'], 10);
} else {
nfDialog.responsive['fullscreen-height'] = dialog.height() + 'px';
fullscreenHeight = parseInt(nfDialog.responsive['fullscreen-height'], 10);
}
if (isDefinedAndNotNull(nfDialog.responsive['fullscreen-width'])) {
fullscreenWidth = parseInt(nfDialog.responsive['fullscreen-width'], 10);
} else {
nfDialog.responsive['fullscreen-width'] = dialog.width() + 'px';
fullscreenWidth = parseInt(nfDialog.responsive['fullscreen-width'], 10);
}
if (!isDefinedAndNotNull(nfDialog.width)) {
nfDialog.width = dialog.css('width');
}
if (!isDefinedAndNotNull(nfDialog['min-width'])) {
if (parseInt(dialog.css('min-width'), 10) > 0) {
nfDialog['min-width'] = dialog.css('min-width');
} else {
nfDialog['min-width'] = nfDialog.width;
}
}
//min-width should always be set in terms of px
if (nfDialog['min-width'].indexOf("%") > 0) {
nfDialog['min-width'] = ($(window).width() * (parseInt(nfDialog['min-width'], 10) / 100)) + 'px';
}
if (!isDefinedAndNotNull(nfDialog.height)) {
nfDialog.height = dialog.css('height');
}
if (!isDefinedAndNotNull(nfDialog['min-height'])) {
if (parseInt(dialog.css('min-height'), 10) > 0) {
nfDialog['min-height'] = dialog.css('min-height');
} else {
nfDialog['min-height'] = nfDialog.height;
}
}
//min-height should always be set in terms of px
if (nfDialog['min-height'].indexOf("%") > 0) {
nfDialog['min-height'] = ($(window).height() * (parseInt(nfDialog['min-height'], 10) / 100)) + 'px';
}
//resize dialog
if ($(window).height() < fullscreenHeight) {
if (nfDialog.responsive.y) {
dialog.css('height', '100%');
dialog.css('min-height', '100%');
}
} else {
//set the dialog min-height
dialog.css('min-height', nfDialog['min-height']);
if (nfDialog.responsive.y) {
//make sure nfDialog.height is in terms of %
if (nfDialog.height.indexOf("px") > 0) {
nfDialog.height = (parseInt(nfDialog.height, 10) / $(window).height() * 100) + '%';
}
dialog.css('height', nfDialog.height);
}
}
if ($(window).width() < fullscreenWidth) {
if (nfDialog.responsive.x) {
dialog.css('width', '100%');
dialog.css('min-width', '100%');
}
} else {
//set the dialog width
dialog.css('min-width', nfDialog['min-width']);
if (nfDialog.responsive.x) {
//make sure nfDialog.width is in terms of %
if (nfDialog.width.indexOf("px") > 0) {
nfDialog.width = (parseInt(nfDialog.width, 10) / $(window).width() * 100) + '%';
}
dialog.css('width', nfDialog.width);
}
}
dialog.center();
//persist data attribute
dialog.data('nfDialog', nfDialog);
}
//resize dialog content
if (!nfDialog.resizable) {
dialogContent.attr('style', 'height:' +
(dialog.outerHeight() -
dialog.find('.dialog-header').height() -
dialog.find('.dialog-buttons').height() -
parseInt(dialogContent.css('padding-top'), 10) -
parseInt(dialogContent.css('padding-bottom'), 10) + 'px'));
if (dialogContent[0].offsetHeight < dialogContent[0].scrollHeight) {
// your element have overflow
dialogContent.addClass('scrollable');
dialog.find('.dialog-buttons').css('background', '#eaeef0');
} else {
// your element doesn't have overflow
dialogContent.removeClass('scrollable');
dialog.find('.dialog-buttons').css('background', '#fff');
}
}
};
// listen for browser resize events to resize and center the dialog
$(window).resize(function () {
resize();
dialog.trigger("dialog:resize");
});
//persist data attribute
dialog.data('nfDialog', nfDialog);
return this.each(function () {
// show the dialog
if (!dialog.is(':visible')) {
// center and show the dialog
dialog.center().show();
dialog.show();
dialog.modal('resize');
dialog.center();
resize();
// invoke the handler
var handler = dialog.data('nf-dialog').open;
if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
handler.call(dialog);
}
}
});
},
@ -435,16 +494,16 @@
return this.each(function () {
var dialog = $(this);
if (dialog.is(':visible')) {
// remove the modal backgroun
// remove the modal glass pane overlay
$('body').find("[data-nf-dialog-parent='" + dialog.attr('id') + "']").remove();
// hide the dialog
dialog.hide();
// invoke the handler
var handler = dialog.data('handler');
if (isDefinedAndNotNull(handler) && typeof handler.close === 'function') {
handler.close.call(dialog);
var handler = dialog.data('nf-dialog').close;
if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
handler.call(dialog);
}
}
});

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
View File

@ -44,10 +44,12 @@ div.add-property-text {
}
div.property-table {
width: 100%;
position: absolute;
top: 43px;
bottom: 0px;
left: 0px;
right: 0px;
min-height: 150px;
overflow: hidden;
height: 90%;
}
.property-table .fa {

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
View File

@ -923,6 +923,7 @@
newControllerServiceDialog.modal({
headerText: 'Add Controller Service',
scrollableContentStyle: 'scrollable',
buttons: [{
buttonText: 'Create',
color: {
@ -1492,6 +1493,7 @@
newPropertyDialog.modal({
headerText: 'Add Property',
scrollableContentStyle: 'scrollable',
buttons: [{
buttonText: 'Ok',
color: {

21
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
View File

@ -64,13 +64,28 @@ div.configuration-tab {
}
div[id$=-tabs-content] {
height: 85%;
overflow: auto;
position: absolute;
top: 33px;
bottom: 0px;
left: 0px;
right: 0px;
}
div[id$=-tab-content] {
height: 100%;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
padding-top: 10px;
}
div[id$=-properties] {
height: 100%;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
padding-top: 10px;
}

17
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
View File

@ -44,8 +44,8 @@
* }],
* select: selectHandler
* }
*
* @argument {object} options
*
* @argument {object} options
*/
$.fn.tabbs = function (options) {
return this.each(function () {
@ -62,7 +62,7 @@
var tabDefinition = this;
// mark the tab content
$('#' + tabDefinition.tabContentId).addClass(tabContentStyle);
$('#' + tabDefinition.tabContentId).addClass(tabContentStyle).hide();
// prep the tab itself
var tab = $('<li></li>').text(tabDefinition.name).addClass(options.tabStyle).click(function () {
@ -70,7 +70,16 @@
$('.' + tabContentStyle).hide();
// show the desired tab
$('#' + tabDefinition.tabContentId).show();
var tabContent = $('#' + tabDefinition.tabContentId).show();
// check if content has overflow
var tabContentContainer = tabContent.parent();
if (tabContentContainer.get(0).offsetHeight < tabContentContainer.get(0).scrollHeight ||
tabContentContainer.get(0).offsetWidth < tabContentContainer.get(0).scrollWidth) {
tabContentContainer.addClass(options.scrollableTabContentStyle);
} else {
tabContentContainer.removeClass(options.scrollableTabContentStyle);
}
// unselect the previously selected tab
tabList.children('.' + options.tabStyle).removeClass(options.selectedTabStyle);

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js
View File

@ -124,14 +124,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
*/
launch: function () {
if (nf.Common.canAccessController()) {
nf.Settings.showSettings().done(function() {
$('#settings-refresh-container').width($('#shell').width());
// add a shell:resize listener
$('#shell').on('shell:resize', function () {
$('#settings-refresh-container').width($('#shell').width());
});
});
nf.Settings.showSettings();
}
}
}
@ -297,6 +290,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
var self = this;
this.getElement().modal({
scrollableContentStyle: 'scrollable',
headerText: 'About Apache NiFi',
buttons: [{
buttonText: 'Ok',

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
View File

@ -58,6 +58,7 @@ nf.ng.Canvas.OperateCtrl = function () {
init: function () {
// configure the create template dialog
this.getElement().modal({
scrollableContentStyle: 'scrollable',
headerText: 'Create Template'
});
},
@ -250,6 +251,7 @@ nf.ng.Canvas.OperateCtrl = function () {
init: function () {
// configure the create fillcolor dialog
this.getElement().modal({
scrollableContentStyle: 'scrollable',
headerText: 'Change Color',
buttons: [{
buttonText: 'Apply',

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js
View File

@ -89,6 +89,7 @@ nf.ng.GroupComponent = function (serviceProvider) {
init: function () {
// configure the new process group dialog
this.getElement().modal({
scrollableContentStyle: 'scrollable',
headerText: 'Add Process Group',
handler: {
close: function () {

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js
View File

@ -89,6 +89,7 @@ nf.ng.InputPortComponent = function (serviceProvider) {
init: function () {
// configure the new port dialog
this.getElement().modal({
scrollableContentStyle: 'scrollable',
headerText: 'Add Port',
handler: {
close: function () {

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js
View File

@ -415,6 +415,7 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
// configure the new processor dialog
this.getElement().modal({
scrollableContentStyle: 'scrollable',
headerText: 'Add Processor'
});
},
@ -561,7 +562,7 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
}]);
// set a new handler for closing the the dialog
this.modal.update('setHandler', {
this.modal.update('setCloseHandler', {
close: function () {
// remove the handler
grid.onDblClick.unsubscribe(gridDoubleClick);

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js
View File

@ -119,6 +119,7 @@ nf.ng.RemoteProcessGroupComponent = function (serviceProvider) {
var defaultYieldDuration = "10 sec";
// configure the new remote process group dialog
this.getElement().modal({
scrollableContentStyle: 'scrollable',
headerText: 'Add Remote Process Group',
handler: {
close: function () {

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-template-component.js
View File

@ -76,6 +76,7 @@ nf.ng.TemplateComponent = function (serviceProvider) {
init: function () {
// configure the instantiate template dialog
this.getElement().modal({
scrollableContentStyle: 'scrollable',
headerText: 'Add Template',
overlayBackgroud: false
});

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
View File

@ -35,6 +35,7 @@ nf.Actions = (function () {
// configure the drop request status dialog
$('#drop-request-status-dialog').modal({
scrollableContentStyle: 'scrollable',
handler: {
close: function () {
// reset the progress bar

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

@ -134,7 +134,7 @@ nf.Canvas = (function () {
cluster: '../nifi-api/controller/cluster'
}
};
/**
* Starts polling.
*
@ -299,42 +299,42 @@ nf.Canvas = (function () {
// handle canvas events
svg.on('mousedown.selection', function () {
canvasClicked = true;
canvasClicked = true;
if (d3.event.button !== 0) {
// prevent further propagation (to parents and others handlers
// on the same element to prevent zoom behavior)
d3.event.stopImmediatePropagation();
return;
}
if (d3.event.button !== 0) {
// prevent further propagation (to parents and others handlers
// on the same element to prevent zoom behavior)
d3.event.stopImmediatePropagation();
return;
}
// show selection box if shift is held down
if (d3.event.shiftKey) {
var position = d3.mouse(canvas.node());
canvas.append('rect')
.attr('rx', 6)
.attr('ry', 6)
.attr('x', position[0])
.attr('y', position[1])
.attr('class', 'selection')
.attr('width', 0)
.attr('height', 0)
.attr('stroke-width', function () {
return 1 / nf.Canvas.View.scale();
})
.attr('stroke-dasharray', function () {
return 4 / nf.Canvas.View.scale();
})
.datum(position);
// show selection box if shift is held down
if (d3.event.shiftKey) {
var position = d3.mouse(canvas.node());
canvas.append('rect')
.attr('rx', 6)
.attr('ry', 6)
.attr('x', position[0])
.attr('y', position[1])
.attr('class', 'selection')
.attr('width', 0)
.attr('height', 0)
.attr('stroke-width', function () {
return 1 / nf.Canvas.View.scale();
})
.attr('stroke-dasharray', function () {
return 4 / nf.Canvas.View.scale();
})
.datum(position);
// prevent further propagation (to parents and others handlers
// on the same element to prevent zoom behavior)
d3.event.stopImmediatePropagation();
// prevent further propagation (to parents and others handlers
// on the same element to prevent zoom behavior)
d3.event.stopImmediatePropagation();
// prevents the browser from changing to a text selection cursor
d3.event.preventDefault();
}
})
// prevents the browser from changing to a text selection cursor
d3.event.preventDefault();
}
})
.on('mousemove.selection', function () {
// update selection box if shift is held down
if (d3.event.shiftKey) {
@ -451,7 +451,7 @@ nf.Canvas = (function () {
});
svg.attr({
'height': canvasContainer.height(),
'width': canvasContainer.width()
'width': $(window).width()
});
//breadcrumbs
@ -478,15 +478,48 @@ nf.Canvas = (function () {
updateGraphSize();
updateFlowStatusContainerSize();
// resize grids when appropriate
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]));
// resize shell when appropriate
var shell = $('#shell-dialog');
if (shell.is(':visible')){
setTimeout(function(shell){
nf.Shell.resizeContent(shell);
if(shell.find('#shell-iframe').is(':visible')) {
nf.Shell.resizeIframe(shell);
}
}, 50, shell);
}
// resize dialogs when appropriate
var dialogs = $('.dialog');
for (var i = 0, len = dialogs.length; i < len; i++) {
if ($(dialogs[i]).is(':visible')){
setTimeout(function(dialog){
dialog.modal('resize');
}, 50, $(dialogs[i]));
}
}
// resize grids when appropriate
var gridElements = $('*[class*="slickgrid_"]');
for (var j = 0, len = gridElements.length; j < len; j++) {
if ($(gridElements[j]).is(':visible')){
setTimeout(function(gridElement){
gridElement.data('gridInstance').resizeCanvas();
}, 50, $(gridElements[j]));
}
}
// toggle tabs .scrollable when appropriate
var tabsContainers = $('.tab-container');
var tabsContents = [];
for (var k = 0, len = tabsContainers.length; k < len; k++) {
if ($(tabsContainers[k]).is(':visible')){
tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
}
}
$.each(tabsContents, function (index, tabsContent) {
nf.Common.toggleScrollable(tabsContent.get(0));
});
}
}).on('keydown', function (evt) {
// if a dialog is open, disable canvas shortcuts
@ -606,7 +639,7 @@ nf.Canvas = (function () {
// update the access policies
accessPolicy = flowResponse.accessPolicy;
// update the breadcrumbs
nf.ng.Bridge.injector.get('breadcrumbsCtrl').resetBreadcrumbs();
nf.ng.Bridge.injector.get('breadcrumbsCtrl').generateBreadcrumbs(breadcrumb);
@ -746,7 +779,7 @@ nf.Canvas = (function () {
userXhr.done(function () {
// load the client id
var clientXhr = nf.Client.init();
// get the controller config to register the status poller
var configXhr = $.ajax({
type: 'GET',
@ -898,10 +931,10 @@ nf.Canvas = (function () {
return accessPolicy.canRead === true;
}
},
/**
* Whether the current user can write in this group.
*
*
* @returns {boolean} can write
*/
canWrite: function () {

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
View File

@ -224,6 +224,7 @@ nf.ComponentState = (function () {
// initialize the processor configuration dialog
$('#component-state-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Component State',
buttons: [{
buttonText: 'Close',

5
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

@ -1123,11 +1123,15 @@ nf.ConnectionConfiguration = (function () {
// initialize the configure connection dialog
$('#connection-configuration').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Configure Connection',
handler: {
close: function () {
// reset the dialog on close
resetDialog();
},
open: function () {
nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
}
}
});
@ -1136,6 +1140,7 @@ nf.ConnectionConfiguration = (function () {
$('#connection-configuration-tabs').tabbs({
tabStyle: 'tab',
selectedTabStyle: 'selected-tab',
scrollableTabContentStyle: 'scrollable',
tabs: [{
name: 'Details',
tabContentId: 'connection-details-tab-content'

7
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
View File

@ -1523,6 +1523,7 @@ nf.ControllerService = (function () {
$('#controller-service-configuration-tabs').tabbs({
tabStyle: 'tab',
selectedTabStyle: 'selected-tab',
scrollableTabContentStyle: 'scrollable',
tabs: [{
name: 'Settings',
tabContentId: 'controller-service-standard-settings-tab-content'
@ -1554,6 +1555,7 @@ nf.ControllerService = (function () {
// initialize the conroller service configuration dialog
$('#controller-service-configuration').modal({
headerText: 'Configure Controller Service',
scrollableContentStyle: 'scrollable',
handler: {
close: function () {
// empty the referencing components list
@ -1573,6 +1575,9 @@ nf.ControllerService = (function () {
// removed the cached controller service details
$('#controller-service-configuration').removeData('controllerServiceDetails');
},
open: function () {
nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
}
}
});
@ -1580,6 +1585,7 @@ nf.ControllerService = (function () {
// initialize the disable service dialog
$('#disable-controller-service-dialog').modal({
headerText: 'Disable Controller Service',
scrollableContentStyle: 'scrollable',
handler: {
close: function () {
var disableDialog = $(this);
@ -1624,6 +1630,7 @@ nf.ControllerService = (function () {
// initialize the enable service dialog
$('#enable-controller-service-dialog').modal({
headerText: 'Enable Controller Service',
scrollableContentStyle: 'scrollable',
handler: {
close: function () {
var enableDialog = $(this);

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
View File

@ -380,6 +380,7 @@ nf.ControllerServices = (function () {
// initialize the controller service dialog
$('#new-controller-service-dialog').modal({
headerText: 'Add Controller Service',
scrollableContentStyle: 'scrollable',
handler: {
close: function () {
// clear the selected row

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
View File

@ -322,6 +322,7 @@ nf.GoTo = (function () {
*/
init: function () {
$('#connections-dialog').modal({
scrollableContentStyle: 'scrollable',
buttons: [{
buttonText: 'Close',
color: {

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

@ -28,6 +28,7 @@ nf.LabelConfiguration = (function () {
init: function () {
// make the new property dialog draggable
$('#label-configuration').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Configure Label',
buttons: [{
buttonText: 'Apply',

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

@ -24,6 +24,7 @@ nf.PortConfiguration = (function () {
*/
var initPortConfigurationDialog = function () {
$('#port-configuration').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Configure Port',
buttons: [{
buttonText: 'Apply',

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js
View File

@ -23,6 +23,7 @@ nf.PortDetails = (function () {
init: function () {
// configure the processor details dialog
$('#port-details').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Port Details',
buttons: [{
buttonText: 'Ok',

7
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js
View File

@ -175,12 +175,6 @@ nf.ProcessGroupConfiguration = (function () {
nf.Shell.showContent('#process-group-configuration').done(function () {
reset();
});
$('#process-group-refresh-container').width($('#shell').width());
// add a shell:resize listener
$('#shell').on('shell:resize', function () {
$('#process-group-refresh-container').width($('#shell').width());
});
// adjust the table size
nf.ProcessGroupConfiguration.resetTableSize();
@ -207,6 +201,7 @@ nf.ProcessGroupConfiguration = (function () {
$('#process-group-configuration-tabs').tabbs({
tabStyle: 'tab',
selectedTabStyle: 'selected-tab',
scrollableTabContentStyle: 'scrollable',
tabs: [{
name: 'General',
tabContentId: 'general-process-group-configuration-tab-content'

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-details.js
View File

@ -23,6 +23,7 @@ nf.ProcessGroupDetails = (function () {
init: function () {
// configure the processor details dialog
$('#process-group-details').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Process Group Details',
buttons: [{
buttonText: 'Ok',

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

@ -456,6 +456,7 @@ nf.ProcessorConfiguration = (function () {
$('#processor-configuration-tabs').tabbs({
tabStyle: 'tab',
selectedTabStyle: 'selected-tab',
scrollableTabContentStyle: 'scrollable',
tabs: [{
name: 'Settings',
tabContentId: 'processor-standard-settings-tab-content'
@ -491,6 +492,7 @@ nf.ProcessorConfiguration = (function () {
// initialize the processor configuration dialog
$('#processor-configuration').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Configure Processor',
handler: {
close: function () {
@ -502,6 +504,9 @@ nf.ProcessorConfiguration = (function () {
// removed the cached processor details
$('#processor-configuration').removeData('processorDetails');
},
open: function () {
nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
}
}
});

9
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
View File

@ -41,6 +41,8 @@ nf.QueueListing = (function () {
// configure the drop request status dialog
$('#listing-request-status-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Queue Listing',
handler: {
close: function () {
// reset the progress bar
@ -189,6 +191,7 @@ nf.QueueListing = (function () {
$('#flowfile-details-tabs').tabbs({
tabStyle: 'tab',
selectedTabStyle: 'selected-tab',
scrollableTabContentStyle: 'scrollable',
tabs: [{
name: 'Details',
tabContentId: 'flowfile-details-tab-content'
@ -199,6 +202,7 @@ nf.QueueListing = (function () {
});
$('#flowfile-details-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'FlowFile',
buttons: [{
buttonText: 'Ok',
@ -219,6 +223,9 @@ nf.QueueListing = (function () {
$('#flowfile-attributes-container').empty();
$('#flowfile-cluster-node-id').text('');
$('#additional-flowfile-details').empty();
},
open: function () {
nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
}
}
});
@ -245,7 +252,7 @@ nf.QueueListing = (function () {
// update the progress bar
var label = $('<div class="progress-label"></div>').text(percentComplete + '%');
if (percentComplete > 0) {
label.css('margin-top', '-19px');
label.css('margin-top', '-24px');
}
progressBar.progressbar('value', percentComplete).append(label);
};

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js
View File

@ -22,6 +22,7 @@ nf.RemoteProcessGroupConfiguration = (function () {
init: function () {
$('#remote-process-group-configuration').modal({
headerText: 'Configure Remote Process Group',
scrollableContentStyle: 'scrollable',
buttons: [{
buttonText: 'Apply',
color: {

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
View File

@ -22,6 +22,7 @@ nf.RemoteProcessGroupDetails = (function () {
init: function () {
$('#remote-process-group-details').modal({
headerText: 'Remote Process Group Details',
scrollableContentStyle: 'scrollable',
buttons: [{
buttonText: 'Ok',
color: {

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js
View File

@ -25,6 +25,7 @@ nf.RemoteProcessGroupPorts = (function () {
var initRemotePortConfigurationDialog = function () {
$('#remote-port-configuration').modal({
headerText: 'Configure Remote Port',
scrollableContentStyle: 'scrollable',
buttons: [{
buttonText: 'Apply',
color: {
@ -146,6 +147,7 @@ nf.RemoteProcessGroupPorts = (function () {
*/
var initRemoteProcessGroupConfigurationDialog = function () {
$('#remote-process-group-ports').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Remote Process Group Ports',
buttons: [{
buttonText: 'Close',

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js
View File

@ -305,6 +305,7 @@ nf.ReportingTask = (function () {
$('#reporting-task-configuration-tabs').tabbs({
tabStyle: 'tab',
selectedTabStyle: 'selected-tab',
scrollableTabContentStyle: 'scrollable',
tabs: [{
name: 'Settings',
tabContentId: 'reporting-task-standard-settings-tab-content'
@ -331,6 +332,7 @@ nf.ReportingTask = (function () {
// initialize the reporting task configuration dialog
$('#reporting-task-configuration').data('mode', config.edit).modal({
scrollableContentStyle: 'scrollable',
headerText: 'Configure Reporting Task',
handler: {
close: function () {
@ -345,6 +347,9 @@ nf.ReportingTask = (function () {
// removed the cached reporting task details
$('#reporting-task-configuration').removeData('reportingTaskDetails');
},
open: function () {
nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
}
}
});

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
View File

@ -530,6 +530,7 @@ nf.Settings = (function () {
// initialize the reporting task dialog
$('#new-reporting-task-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Add Reporting Task',
buttons: [{
buttonText: 'Add',
@ -954,6 +955,7 @@ nf.Settings = (function () {
$('#settings-tabs').tabbs({
tabStyle: 'tab',
selectedTabStyle: 'selected-tab',
scrollableTabContentStyle: 'scrollable',
tabs: [{
name: 'General',
tabContentId: 'general-settings-tab-content'

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

@ -335,6 +335,7 @@ nf.ClusterTable = (function () {
init: function () {
// initialize the user details dialog
$('#node-details-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Node Details',
buttons: [{
buttonText: 'Ok',

36
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js
View File

@ -158,8 +158,40 @@ nf.Counters = (function () {
setBodySize();
}).fail(nf.Common.handleAjaxError);
// listen for browser resize events to reset the body size
$(window).resize(setBodySize);
$(window).on('resize', function (e) {
setBodySize();
// resize dialogs when appropriate
var dialogs = $('.dialog');
for (var i = 0, len = dialogs.length; i < len; i++) {
if ($(dialogs[i]).is(':visible')){
setTimeout(function(dialog){
dialog.modal('resize');
}, 50, $(dialogs[i]));
}
}
// resize grids when appropriate
var gridElements = $('*[class*="slickgrid_"]');
for (var j = 0, len = gridElements.length; j < len; j++) {
if ($(gridElements[j]).is(':visible')){
setTimeout(function(gridElement){
gridElement.data('gridInstance').resizeCanvas();
}, 50, $(gridElements[j]));
}
}
// toggle tabs .scrollable when appropriate
var tabsContainers = $('.tab-container');
var tabsContents = [];
for (var k = 0, len = tabsContainers.length; k < len; k++) {
if ($(tabsContainers[k]).is(':visible')){
tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
}
}
$.each(tabsContents, function (index, tabsContent) {
nf.Common.toggleScrollable(tabsContent.get(0));
});
});
});
});
});

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

@ -40,6 +40,7 @@ nf.HistoryTable = (function () {
*/
var initDetailsDialog = function () {
$('#action-details-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Action Details',
buttons: [{
buttonText: 'Ok',
@ -98,6 +99,7 @@ nf.HistoryTable = (function () {
// configure the filter dialog
$('#history-filter-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Filter History',
buttons: [{
buttonText: 'Filter',
@ -188,6 +190,7 @@ nf.HistoryTable = (function () {
// configure the filter dialog
$('#history-purge-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Purge History',
buttons: [{
buttonText: 'Purge',

36
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js
View File

@ -157,8 +157,40 @@ nf.History = (function () {
setBodySize();
}).fail(nf.Common.handleAjaxError);
// listen for browser resize events to reset the body size
$(window).resize(setBodySize);
$(window).on('resize', function (e) {
setBodySize();
// resize dialogs when appropriate
var dialogs = $('.dialog');
for (var i = 0, len = dialogs.length; i < len; i++) {
if ($(dialogs[i]).is(':visible')){
setTimeout(function(dialog){
dialog.modal('resize');
}, 50, $(dialogs[i]));
}
}
// resize grids when appropriate
var gridElements = $('*[class*="slickgrid_"]');
for (var j = 0, len = gridElements.length; j < len; j++) {
if ($(gridElements[j]).is(':visible')){
setTimeout(function(gridElement){
gridElement.data('gridInstance').resizeCanvas();
}, 50, $(gridElements[j]));
}
}
// toggle tabs .scrollable when appropriate
var tabsContainers = $('.tab-container');
var tabsContents = [];
for (var k = 0, len = tabsContainers.length; k < len; k++) {
if ($(tabsContainers[k]).is(':visible')){
tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
}
}
$.each(tabsContents, function (index, tabsContent) {
nf.Common.toggleScrollable(tabsContent.get(0));
});
});
});
});
}

17
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js
View File

@ -328,6 +328,23 @@ nf.Common = (function () {
return $(selector).addClass(normalStyle);
},
/**
* Determine if an `element` has content overflow and adds the `.scrollable` class if it does.
*
* @param {HTMLElement} element The DOM element to toggle .scrollable upon.
*/
toggleScrollable: function (element) {
if ($(element).is(':visible')){
if (element.offsetHeight < element.scrollHeight ||
element.offsetWidth < element.scrollWidth) {
// your element has overflow
$(element).addClass('scrollable');
} else {
$(element).removeClass('scrollable');
}
}
},
/**
* Method for handling ajax errors.
*

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

@ -293,6 +293,7 @@ nf.ConnectionDetails = (function () {
$('#connection-details-tabs').tabbs({
tabStyle: 'tab',
selectedTabStyle: 'selected-tab',
scrollableTabContentStyle: 'scrollable',
tabs: [{
name: 'Details',
tabContentId: 'read-only-connection-details-tab-content'
@ -305,6 +306,7 @@ nf.ConnectionDetails = (function () {
// configure the connection details dialog
$('#connection-details').modal({
headerText: 'Connection Details',
scrollableContentStyle: 'scrollable',
buttons: [{
buttonText: 'Ok',
color: {
@ -345,6 +347,9 @@ nf.ConnectionDetails = (function () {
$('#read-only-back-pressure-object-threshold').text('');
$('#read-only-back-pressure-data-size-threshold').text('');
$('#read-only-prioritizers').empty();
},
open: function () {
nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
}
}
});

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js
View File

@ -20,6 +20,7 @@
$(document).ready(function () {
// configure the ok dialog
$('#nf-ok-dialog').modal({
scrollableContentStyle: 'scrollable',
handler: {
close: function () {
// clear the content
@ -33,6 +34,7 @@ $(document).ready(function () {
// configure the yes/no dialog
$('#nf-yes-no-dialog').modal({
scrollableContentStyle: 'scrollable',
handler: {
close: function () {
// clear the content and reset the button model

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

@ -51,6 +51,7 @@ nf.ProcessorDetails = (function () {
$('#processor-details-tabs').tabbs({
tabStyle: 'tab',
selectedTabStyle: 'selected-tab',
scrollableTabContentStyle: 'scrollable',
tabs: [{
name: 'Settings',
tabContentId: 'details-standard-settings-tab-content'
@ -84,6 +85,7 @@ nf.ProcessorDetails = (function () {
// configure the processor details dialog
$('#processor-details').modal({
headerText: 'Processor Details',
scrollableContentStyle: 'scrollable',
handler: {
close: function () {
// empty the relationship list
@ -108,6 +110,9 @@ nf.ProcessorDetails = (function () {
// removed the cached processor details
$('#processor-details').removeData('processorDetails');
$('#processor-details').removeData('processorHistory');
},
open: function () {
nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
}
}
});

64
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
View File

@ -20,6 +20,7 @@
$(document).ready(function () {
// configure the dialog
$('#shell-dialog').modal({
scrollableContentStyle: 'scrollable',
header: false,
footer: false
});
@ -49,6 +50,26 @@ nf.Shell = (function () {
var showContentResize = null;
return {
resizeContent: function (shell) {
var contentContainer = shell.find('.shell-content-container');
contentContainer.css({
width: shell.width(),
height: shell.height() - 28 - 40 //subtract shell-close-container and padding
});
shell.trigger("shell:content:resize");
},
// handle resize
resizeIframe: function (shell) {
var shellIframe = shell.find('#shell-iframe');
shellIframe.css({
width: shell.width(),
height: shell.height() - 28 - 40 //subtract shell-close-container and padding
});
shell.trigger("shell:iframe:resize");
},
/**
* Shows a page in the shell.
*
@ -73,9 +94,12 @@ nf.Shell = (function () {
shell.empty();
// register a new close handler
$('#shell-dialog').modal('setHandler', {
$('#shell-dialog').modal('setCloseHandler', {
close: function () {
deferred.resolve();
},
open: function () {
nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
}
});
@ -98,23 +122,6 @@ nf.Shell = (function () {
width: shell.width(),
height: shell.height() - 28 //subtract shell-close-container
}).appendTo(shell);
// remove the window resize listener
if (typeof showPageResize === 'function') {
$(window).off('resize', showPageResize);
}
// handle resize
showPageResize = function () {
shellIframe.css({
width: shell.width(),
height: shell.height() - 28 //subtract shell-close-container
});
shell.trigger("shell:resize");
};
// add a window resize listener
$(window).resize(showPageResize);
}).promise();
},
@ -143,7 +150,7 @@ nf.Shell = (function () {
content.detach();
// register a new close handler
$('#shell-dialog').modal('setHandler', {
$('#shell-dialog').modal('setCloseHandler', {
close: function () {
deferred.resolve();
@ -159,30 +166,13 @@ nf.Shell = (function () {
$('#shell-dialog').modal('show');
// create the content container
var contentContainer = $('<div>').css({
var contentContainer = $('<div>').addClass('shell-content-container').css({
width: shell.width(),
height: shell.height()
}).append(content).appendTo(shell);
// remove the window resize listener
if (typeof showContentResize === 'function') {
$(window).off('resize', showContentResize);
}
// show the content
content.show();
// handle resizes
showContentResize = function () {
contentContainer.css({
width: shell.width(),
height: shell.height()
});
shell.trigger("shell:resize");
};
// add a window resize listener
$(window).resize(showContentResize);
}
}).promise();
}

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
View File

@ -850,7 +850,7 @@ nf.StatusHistory = (function () {
},
start: function (e, ui) {
var helperOffset = ui.helper.offset();
var dialogOuter = ((statusHistoryDialog.outerWidth() - statusHistoryDialog.width()) / 2) + 8; //8 for the box shadow
var dialogOuter = ((statusHistoryDialog.outerWidth() - statusHistoryDialog.width()) / 2);
var dialogContent = statusHistoryDialog.find('.dialog-content');
var dialogContentPaddingRight = ((dialogContent.outerWidth() - dialogContent.width()) / 2);
var chartOuter = chartContainer.outerWidth() - chartContainer.width();
@ -859,9 +859,8 @@ nf.StatusHistory = (function () {
maxWidth = $('body').width() - helperOffset.left - dialogOuter - dialogContentPaddingRight - chartOuter;
// calculate the max height of the component
var dialogContentPaddingBottom = ((dialogContent.outerHeight() - dialogContent.height()) / 2);
var dialogButtonsHeight = statusHistoryDialog.find('.dialog-buttons').height() + 5; //5 for the box shadow
maxHeight = $('body').height() - helperOffset.top - dialogOuter - chartOuter - dialogContentPaddingBottom - dialogButtonsHeight - chartControlContainer.outerHeight(true);
var dialogContentPaddingBottom = dialogContent.outerHeight() - dialogContent.height() - parseInt(dialogContent.css('padding-top'), 10);
maxHeight = $('body').height() - helperOffset.top - dialogOuter - chartOuter - dialogContentPaddingBottom - chartControlContainer.outerHeight(true);
// record the current extent so it can be reset on stop
if (!brush.empty()) {
@ -1077,6 +1076,7 @@ nf.StatusHistory = (function () {
// configure the dialog and make it draggable
$('#status-history-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: "Status History",
buttons: [{
buttonText: 'Close',

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
View File

@ -39,6 +39,7 @@ nf.ProvenanceLineage = (function () {
// initialize the dialog
$('#lineage-query-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Computing FlowFile lineage...',
handler: {
close: function () {

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

@ -185,6 +185,7 @@ nf.ProvenanceTable = (function () {
$('#event-details-tabs').tabbs({
tabStyle: 'tab',
selectedTabStyle: 'selected-tab',
scrollableTabContentStyle: 'scrollable',
tabs: [{
name: 'Details',
tabContentId: 'event-details-tab-content'
@ -198,6 +199,7 @@ nf.ProvenanceTable = (function () {
});
$('#event-details-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Provenance Event',
buttons: [{
buttonText: 'Ok',
@ -221,6 +223,9 @@ nf.ProvenanceTable = (function () {
$('#child-flowfiles-container').empty();
$('#provenance-event-cluster-node-id').text('');
$('#modified-attribute-toggle').removeClass('checkbox-checked').addClass('checkbox-unchecked');
},
open: function () {
nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
}
}
});
@ -359,6 +364,7 @@ nf.ProvenanceTable = (function () {
// configure the search dialog
$('#provenance-search-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Search Events',
buttons: [{
buttonText: 'Search',
@ -460,6 +466,7 @@ nf.ProvenanceTable = (function () {
// initialize the dialog
$('#provenance-query-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Searching provenance events...',
handler: {
close: function () {

36
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js
View File

@ -222,8 +222,40 @@ nf.Provenance = (function () {
setBodySize();
});
// listen for browser resize events to reset the body size
$(window).resize(setBodySize);
$(window).on('resize', function (e) {
setBodySize();
// resize dialogs when appropriate
var dialogs = $('.dialog');
for (var i = 0, len = dialogs.length; i < len; i++) {
if ($(dialogs[i]).is(':visible')){
setTimeout(function(dialog){
dialog.modal('resize');
}, 50, $(dialogs[i]));
}
}
// resize grids when appropriate
var gridElements = $('*[class*="slickgrid_"]');
for (var j = 0, len = gridElements.length; j < len; j++) {
if ($(gridElements[j]).is(':visible')){
setTimeout(function(gridElement){
gridElement.data('gridInstance').resizeCanvas();
}, 50, $(gridElements[j]));
}
}
// toggle tabs .scrollable when appropriate
var tabsContainers = $('.tab-container');
var tabsContents = [];
for (var k = 0, len = tabsContainers.length; k < len; k++) {
if ($(tabsContainers[k]).is(':visible')){
tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
}
}
$.each(tabsContents, function (index, tabsContent) {
nf.Common.toggleScrollable(tabsContent.get(0));
});
});
});
});
}

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js
View File

@ -32,6 +32,7 @@ nf.ClusterSearch = (function () {
init: function () {
// configure the view single node dialog
$('#view-single-node-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Select node',
buttons: [{
buttonText: 'Ok',

12
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

@ -73,6 +73,7 @@ nf.SummaryTable = (function () {
$('#summary-tabs').tabbs({
tabStyle: 'tab',
selectedTabStyle: 'selected-tab',
scrollableTabContentStyle: 'scrollable',
tabs: [{
name: 'Processors',
tabContentId: 'processor-summary-tab-content'
@ -528,6 +529,7 @@ nf.SummaryTable = (function () {
// initialize the cluster processor summary dialog
$('#cluster-processor-summary-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Cluster Processor Summary',
buttons: [{
buttonText: 'Close',
@ -784,6 +786,7 @@ nf.SummaryTable = (function () {
// initialize the cluster connection summary dialog
$('#cluster-connection-summary-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Cluster Connection Summary',
buttons: [{
buttonText: 'Close',
@ -1088,6 +1091,7 @@ nf.SummaryTable = (function () {
// initialize the cluster process group summary dialog
$('#cluster-process-group-summary-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Cluster Process Group Summary',
buttons: [{
buttonText: 'Close',
@ -1331,6 +1335,7 @@ nf.SummaryTable = (function () {
// initialize the cluster input port summary dialog
$('#cluster-input-port-summary-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Cluster Input Port Summary',
buttons: [{
buttonText: 'Close',
@ -1570,6 +1575,7 @@ nf.SummaryTable = (function () {
// initialize the cluster output port summary dialog
$('#cluster-output-port-summary-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Cluster Output Port Summary',
buttons: [{
buttonText: 'Close',
@ -1866,6 +1872,7 @@ nf.SummaryTable = (function () {
// initialize the cluster remote process group summary dialog
$('#cluster-remote-process-group-summary-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'Cluster Remote Process Group Summary',
buttons: [{
buttonText: 'Close',
@ -1969,6 +1976,7 @@ nf.SummaryTable = (function () {
$('#system-diagnostics-tabs').tabbs({
tabStyle: 'tab',
selectedTabStyle: 'selected-tab',
scrollableTabContentStyle: 'scrollable',
tabs: [{
name: 'JVM',
tabContentId: 'jvm-tab-content'
@ -1980,6 +1988,7 @@ nf.SummaryTable = (function () {
// initialize the system diagnostics dialog
$('#system-diagnostics-dialog').modal({
scrollableContentStyle: 'scrollable',
headerText: 'System Diagnostics',
buttons: [{
buttonText: 'Close',
@ -1998,6 +2007,9 @@ nf.SummaryTable = (function () {
close: function () {
// show the summary loading container
$('#summary-loading-container').show();
},
open: function () {
nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
}
}
});

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

@ -183,8 +183,40 @@ nf.Summary = (function () {
setBodySize();
}).fail(nf.Common.handleAjaxError);
// listen for browser resize events to reset the body size
$(window).resize(setBodySize);
$(window).on('resize', function (e) {
setBodySize();
// resize dialogs when appropriate
var dialogs = $('.dialog');
for (var i = 0, len = dialogs.length; i < len; i++) {
if ($(dialogs[i]).is(':visible')){
setTimeout(function(dialog){
dialog.modal('resize');
}, 50, $(dialogs[i]));
}
}
// resize grids when appropriate
var gridElements = $('*[class*="slickgrid_"]');
for (var j = 0, len = gridElements.length; j < len; j++) {
if ($(gridElements[j]).is(':visible')){
setTimeout(function(gridElement){
gridElement.data('gridInstance').resizeCanvas();
}, 50, $(gridElements[j]));
}
}
// toggle tabs .scrollable when appropriate
var tabsContainers = $('.tab-container');
var tabsContents = [];
for (var k = 0, len = tabsContainers.length; k < len; k++) {
if ($(tabsContainers[k]).is(':visible')){
tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
}
}
$.each(tabsContents, function (index, tabsContent) {
nf.Common.toggleScrollable(tabsContent.get(0));
});
});
});
});
});

36
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js
View File

@ -157,8 +157,40 @@ nf.Templates = (function () {
setBodySize();
}).fail(nf.Common.handleAjaxError);
// listen for browser resize events to reset the body size
$(window).resize(setBodySize);
$(window).on('resize', function (e) {
setBodySize();
// resize dialogs when appropriate
var dialogs = $('.dialog');
for (var i = 0, len = dialogs.length; i < len; i++) {
if ($(dialogs[i]).is(':visible')){
setTimeout(function(dialog){
dialog.modal('resize');
}, 50, $(dialogs[i]));
}
}
// resize grids when appropriate
var gridElements = $('*[class*="slickgrid_"]');
for (var j = 0, len = gridElements.length; j < len; j++) {
if ($(gridElements[j]).is(':visible')){
setTimeout(function(gridElement){
gridElement.data('gridInstance').resizeCanvas();
}, 50, $(gridElements[j]));
}
}
// toggle tabs .scrollable when appropriate
var tabsContainers = $('.tab-container');
var tabsContents = [];
for (var k = 0, len = tabsContainers.length; k < len; k++) {
if ($(tabsContainers[k]).is(':visible')){
tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
}
}
$.each(tabsContents, function (index, tabsContent) {
nf.Common.toggleScrollable(tabsContent.get(0));
});
});
});
});
});