NIFI-2468: Improved UI consistency.

- Addressing comments from PR. Moving new service button below the tab pane. (+2 squashed commits)
Squashed commits:
[f746d09] NIFI-2468:
- Addressing numerous inconsistencies throughout the UI (button placement above tables, timestamp styles, etc)
[7d1fb09] addressing some inconsistencies

This closes #794.

Signed-off-by: Andy LoPresto <alopresto@apache.org>
This commit is contained in:
Scott Aslan 2016-08-03 17:19:50 -04:00 committed by Andy LoPresto
parent 7ffa30d21b
commit f2f070c5be
No known key found for this signature in database
GPG Key ID: 3C6EF65B2F7DEF69
37 changed files with 159 additions and 306 deletions

View File

@ -19,8 +19,11 @@ package org.apache.nifi.web.api.entity;
import com.wordnik.swagger.annotations.ApiModelProperty; import com.wordnik.swagger.annotations.ApiModelProperty;
import org.apache.nifi.web.api.dto.ProcessGroupDTO; import org.apache.nifi.web.api.dto.ProcessGroupDTO;
import org.apache.nifi.web.api.dto.status.ProcessGroupStatusDTO; import org.apache.nifi.web.api.dto.status.ProcessGroupStatusDTO;
import org.apache.nifi.web.api.dto.util.TimeAdapter;
import javax.xml.bind.annotation.XmlRootElement; import javax.xml.bind.annotation.XmlRootElement;
import javax.xml.bind.annotation.adapters.XmlJavaTypeAdapter;
import java.util.Date;
/** /**
* A serialized representation of this class can be placed in the entity body of a request or response to or from the API. This particular entity holds a reference to a ProcessGroupDTO. * A serialized representation of this class can be placed in the entity body of a request or response to or from the API. This particular entity holds a reference to a ProcessGroupDTO.
@ -31,6 +34,7 @@ public class ProcessGroupEntity extends ComponentEntity {
private ProcessGroupDTO component; private ProcessGroupDTO component;
private ProcessGroupStatusDTO status; private ProcessGroupStatusDTO status;
private Date currentTime;
private Integer runningCount; private Integer runningCount;
private Integer stoppedCount; private Integer stoppedCount;
private Integer invalidCount; private Integer invalidCount;
@ -179,4 +183,19 @@ public class ProcessGroupEntity extends ComponentEntity {
public void setInactiveRemotePortCount(Integer inactiveRemotePortCount) { public void setInactiveRemotePortCount(Integer inactiveRemotePortCount) {
this.inactiveRemotePortCount = inactiveRemotePortCount; this.inactiveRemotePortCount = inactiveRemotePortCount;
} }
/**
* @return current time on the server
*/
@XmlJavaTypeAdapter(TimeAdapter.class)
@ApiModelProperty(
value = "The current time on the system."
)
public Date getCurrentTime() {
return currentTime;
}
public void setCurrentTime(Date currentTime) {
this.currentTime = currentTime;
}
} }

View File

@ -110,6 +110,7 @@ public final class EntityFactory {
final ProcessGroupEntity entity = new ProcessGroupEntity(); final ProcessGroupEntity entity = new ProcessGroupEntity();
entity.setRevision(revision); entity.setRevision(revision);
entity.setCurrentTime(new Date());
if (dto != null) { if (dto != null) {
entity.setPermissions(permissions); entity.setPermissions(permissions);
entity.setStatus(status); entity.setStatus(status);

View File

@ -38,7 +38,7 @@
Displaying&nbsp;<span id="displayed-component-state-entries"></span>&nbsp;of&nbsp;<span id="total-component-state-entries"></span> Displaying&nbsp;<span id="displayed-component-state-entries"></span>&nbsp;of&nbsp;<span id="total-component-state-entries"></span>
</div> </div>
<div id="component-state-filter-container"> <div id="component-state-filter-container">
<input type="text" id="component-state-filter"/> <input type="text" id="component-state-filter" placeholder="Filter"/>
</div> </div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>

View File

@ -26,7 +26,7 @@
Displaying&nbsp;<span id="displayed-controller-service-types"></span>&nbsp;of&nbsp;<span id="total-controller-service-types"></span> Displaying&nbsp;<span id="displayed-controller-service-types"></span>&nbsp;of&nbsp;<span id="total-controller-service-types"></span>
</div> </div>
<div id="controller-service-type-filter-container"> <div id="controller-service-type-filter-container">
<input type="text" id="controller-service-type-filter"/> <input type="text" id="controller-service-type-filter" placeholder="Filter"/>
</div> </div>
</div> </div>
</div> </div>

View File

@ -27,7 +27,7 @@
id="total-processor-types"></span> id="total-processor-types"></span>
</div> </div>
<div id="processor-type-filter-container"> <div id="processor-type-filter-container">
<input type="text" placeholder="Filter processor list" id="processor-type-filter"/> <input type="text" placeholder="Filter" id="processor-type-filter"/>
</div> </div>
</div> </div>
</div> </div>

View File

@ -26,7 +26,7 @@
Displaying&nbsp;<span id="displayed-reporting-task-types"></span>&nbsp;of&nbsp;<span id="total-reporting-task-types"></span> Displaying&nbsp;<span id="displayed-reporting-task-types"></span>&nbsp;of&nbsp;<span id="total-reporting-task-types"></span>
</div> </div>
<div id="controller-service-type-filter-container"> <div id="controller-service-type-filter-container">
<input type="text" id="reporting-task-type-filter"/> <input type="text" id="reporting-task-type-filter" placeholder="Filter"/>
</div> </div>
</div> </div>
</div> </div>

View File

@ -20,10 +20,10 @@
<div class="settings-container"> <div class="settings-container">
<div> <div>
<div id="process-group-configuration-tabs" class="settings-tabs tab-container"></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 class="clear"></div>
</div> </div>
<div id="process-group-configuration-tabs-content"> <div id="process-group-configuration-tabs-content">
<button id="add-process-group-configuration-controller-service" class="add-button fa fa-plus" title="Create a new controller service"></button>
<div id="general-process-group-configuration-tab-content" class="configuration-tab"> <div id="general-process-group-configuration-tab-content" class="configuration-tab">
<div id="general-process-group-configuration"> <div id="general-process-group-configuration">
<div class="setting"> <div class="setting">

View File

@ -20,10 +20,10 @@
<div class="settings-container"> <div class="settings-container">
<div> <div>
<div id="settings-tabs" class="settings-tabs tab-container"></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 class="clear"></div>
</div> </div>
<div id="settings-tabs-content"> <div id="settings-tabs-content">
<button id="new-service-or-task" class="add-button fa fa-plus" title="Create a new controller service" style="display: block;"></button>
<div id="general-settings-tab-content" class="configuration-tab"> <div id="general-settings-tab-content" class="configuration-tab">
<div id="general-settings"> <div id="general-settings">
<div class="setting"> <div class="setting">
@ -56,10 +56,10 @@
</div> </div>
</div> </div>
</div> </div>
<div id="controller-services-tab-content" class="configuration-tab"> <div id="controller-services-tab-content" class="configuration-tab controller-settings-table">
<div id="controller-services-table" class="settings-table"></div> <div id="controller-services-table" class="settings-table"></div>
</div> </div>
<div id="reporting-tasks-tab-content" class="configuration-tab"> <div id="reporting-tasks-tab-content" class="configuration-tab controller-settings-table">
<div id="reporting-tasks-table" class="settings-table"></div> <div id="reporting-tasks-table" class="settings-table"></div>
</div> </div>
</div> </div>

View File

@ -23,7 +23,7 @@
Displaying&nbsp;<span id="displayed-nodes"></span>&nbsp;of&nbsp;<span id="total-nodes"></span> Displaying&nbsp;<span id="displayed-nodes"></span>&nbsp;of&nbsp;<span id="total-nodes"></span>
</div> </div>
<div id="cluster-filter-container" class="filter-container"> <div id="cluster-filter-container" class="filter-container">
<input type="text" id="cluster-filter" class="filter"/> <input type="text" id="cluster-filter" class="filter" placeholder="Filter"/>
<div id="cluster-filter-type" class="filter-type"></div> <div id="cluster-filter-type" class="filter-type"></div>
</div> </div>
</div> </div>

View File

@ -31,13 +31,13 @@
Oldest event available:&nbsp;<span id="oldest-event" class="value-color"></span> Oldest event available:&nbsp;<span id="oldest-event" class="value-color"></span>
</div> </div>
<div id="provenance-filter-container" class="filter-container"> <div id="provenance-filter-container" class="filter-container">
<input type="text" id="provenance-filter" class="filter"/> <input type="text" placeholder="Filter" id="provenance-filter" class="filter"/>
<div id="provenance-filter-type" class="filter-type"></div> <div id="provenance-filter-type" class="filter-type"></div>
</div> </div>
</div> </div>
<div id="provenance-search-container"> <div id="provenance-search-container">
<div id="provenance-search-overview"> <div id="provenance-search-overview">
<span id="provenance-query-message"></span> <span id="provenance-query-message">&nbsp;</span>
<span id="clear-provenance-search" class="link">Clear search</span> <span id="clear-provenance-search" class="link">Clear search</span>
</div> </div>
<button id="provenance-search-button" class="fa fa-search"></button> <button id="provenance-search-button" class="fa fa-search"></button>

View File

@ -25,7 +25,7 @@
Displaying&nbsp;<span id="displayed-templates"></span>&nbsp;of&nbsp;<span id="total-templates"></span> Displaying&nbsp;<span id="displayed-templates"></span>&nbsp;of&nbsp;<span id="total-templates"></span>
</div> </div>
<div id="templates-filter-container" class="filter-container"> <div id="templates-filter-container" class="filter-container">
<input type="text" id="templates-filter" class="filter"/> <input type="text" id="templates-filter" class="filter" placeholder="Filter"/>
<div id="templates-filter-type" class="filter-type"></div> <div id="templates-filter-type" class="filter-type"></div>
</div> </div>
</div> </div>

View File

@ -168,10 +168,6 @@ ul.links span.header-link-over {
white-space: normal; white-space: normal;
} }
input.filter-list {
color: #888;
}
.table-cell { .table-cell {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -189,8 +185,22 @@ label {
margin-bottom: 2px; margin-bottom: 2px;
} }
input::placeholder { /* placeholder styles */
color: #728e9b; /*base-color*/
*::placeholder {
color: #728e9b;
}
*::-webkit-input-placeholder {
color: #728e9b;
}
*:-moz-placeholder {
color: #728e9b;
}
*::-moz-placeholder {
color: #728e9b;
}
*:-ms-input-placeholder {
color: #728e9b;
} }
input[type=text], input[type=password], textarea { input[type=text], input[type=password], textarea {
@ -369,6 +379,7 @@ button.fa {
color: #004849; color: #004849;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
line-height: 23px;
} }
button.icon { button.icon {
@ -530,6 +541,7 @@ md-progress-linear > div {
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
font-family: Roboto Slab; font-family: Roboto Slab;
text-transform: capitalize;
padding-bottom: 4px; padding-bottom: 4px;
color: #262626; color: #262626;
} }
@ -549,6 +561,7 @@ md-progress-linear > div {
width: 100%; width: 100%;
color: #775351; color: #775351;
font-size: 13px; font-size: 13px;
font-weight: 500;
} }
.setting-header{ .setting-header{

View File

@ -51,7 +51,7 @@
} }
#history-last-refreshed { #history-last-refreshed {
font-weight: bold; font-weight: 500;
} }
#history-header { #history-header {
@ -87,6 +87,7 @@
#history-purge-button { #history-purge-button {
float: right; float: right;
padding-left: 4px;
} }
@ -145,7 +146,7 @@ div.history-details-name {
#history-table { #history-table {
position: absolute; position: absolute;
top: 62px; top: 66px;
left: 0px; left: 0px;
bottom: 47px; bottom: 47px;
right: 0px; right: 0px;

View File

@ -33,8 +33,14 @@
margin-bottom: 24px; margin-bottom: 24px;
} }
#delete-policy-button {
margin-top: -4px;
}
#new-policy-user-button { #new-policy-user-button {
margin-top: -4px;
margin-right: 5px; margin-right: 5px;
padding-left: 5px;
} }
button.policy-button { button.policy-button {
@ -178,7 +184,8 @@ div.policy-selected-component-type {
} }
#policy-last-refreshed { #policy-last-refreshed {
font-weight: bold; color: #775351;
font-weight: 500;
} }
/* /*

View File

@ -26,10 +26,7 @@
} }
#add-process-group-configuration-controller-service { #add-process-group-configuration-controller-service {
margin-top: 4px; float: right;
position: absolute;
top: 0px;
right: 0px;
} }
/* settings tabs */ /* settings tabs */
@ -64,14 +61,13 @@
} }
#process-group-configuration-last-refreshed { #process-group-configuration-last-refreshed {
font-weight: bold; color: #775351;
font-weight: 500;
} }
/* general */ /* general */
#general-process-group-configuration input, #general-process-group-configuration textarea { #general-process-group-configuration input, #general-process-group-configuration textarea {
font-size: 11px !important;
font-family: Verdana;
width: 350px; width: 350px;
vertical-align: middle; vertical-align: middle;
} }
@ -79,3 +75,7 @@
#process-group-comments { #process-group-comments {
height: 100px; height: 100px;
} }
#process-group-controller-services-tab-content {
top: 32px;
}

View File

@ -57,7 +57,7 @@
} }
#provenance-last-refreshed { #provenance-last-refreshed {
font-weight: bold; font-weight: 500;
} }
#provenance-header { #provenance-header {
@ -75,10 +75,6 @@ div.provenance-panel {
/* filter controls */ /* filter controls */
#provenance-filter-controls {
float: right;
}
#provenance-filter-container { #provenance-filter-container {
height: 24px; height: 24px;
width: 100%; width: 100%;
@ -90,10 +86,6 @@ div.provenance-panel {
float: left; float: left;
} }
input.provenance-filter-list {
color: #888;
}
#provenance-filter-type { #provenance-filter-type {
float: left; float: left;
} }
@ -108,10 +100,9 @@ input.provenance-filter-list {
/* provenance search controls */ /* provenance search controls */
#provenance-search-container { #provenance-search-container {
float: right; position: absolute;
position: relative; right: 0;
top: 38px; top: 38px;
height: 0px;
} }
#provenance-search-button { #provenance-search-button {

View File

@ -41,9 +41,7 @@ div.settings-container {
} }
#new-service-or-task { #new-service-or-task {
position: absolute; float: right;
top: 0px;
right: 0px;
} }
#settings-refresh-container { #settings-refresh-container {
@ -60,7 +58,7 @@ div.settings-tabs {
} }
#settings-tabs-content { #settings-tabs-content {
top: 53px; top: 43px;
bottom: 48px; bottom: 48px;
} }
@ -93,14 +91,12 @@ div.settings-refresh-button {
} }
#settings-last-refreshed { #settings-last-refreshed {
font-weight: bold; font-weight: 500;
} }
/* general */ /* general */
#general-settings input { #general-settings input {
font-size: 11px !important;
font-family: Verdana;
width: 350px; width: 350px;
vertical-align: middle; vertical-align: middle;
} }
@ -116,3 +112,7 @@ div.settings-buttons {
div.settings-buttons div.button { div.settings-buttons div.button {
float: left; float: left;
} }
div.controller-settings-table {
top: 32px;
}

View File

@ -42,7 +42,8 @@
} }
#status-history-last-refreshed { #status-history-last-refreshed {
font-weight: bold; color:#775351;
font-weight:500;
} }
#status-history-loading-container { #status-history-loading-container {

View File

@ -57,7 +57,7 @@
} }
#templates-last-refreshed { #templates-last-refreshed {
font-weight: bold; font-weight: 500;
} }
#templates-header { #templates-header {
@ -77,10 +77,6 @@
float: left; float: left;
} }
input.templates-filter-list {
color: #888;
}
#templates-filter-type { #templates-filter-type {
float: left; float: left;
} }

View File

@ -56,7 +56,8 @@
} }
#users-last-refreshed { #users-last-refreshed {
font-weight: bold; color: #775351;
font-weight: 500;
} }
#users-header { #users-header {
@ -65,7 +66,7 @@
#new-user-button { #new-user-button {
float: right; float: right;
margin-top: 4px; padding-left: 5px;
} }
/* users table */ /* users table */

View File

@ -64,6 +64,7 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 80%; width: 80%;
font-weight: normal;
} }
div.selected-disabled-option { div.selected-disabled-option {

View File

@ -45,7 +45,7 @@ div.add-property-text {
div.property-table { div.property-table {
position: absolute; position: absolute;
top: 43px; top: 42px;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;

View File

@ -58,9 +58,6 @@ nf.ng.BulletinBoardCtrl = function (serviceProvider) {
banners: '../nifi-api/flow/banners', banners: '../nifi-api/flow/banners',
about: '../nifi-api/flow/about', about: '../nifi-api/flow/about',
bulletinBoard: '../nifi-api/flow/bulletin-board' bulletinBoard: '../nifi-api/flow/bulletin-board'
},
styles: {
filterList: 'bulletin-board-filter-list'
} }
}; };
@ -77,17 +74,6 @@ nf.ng.BulletinBoardCtrl = function (serviceProvider) {
$('#bulletin-board-container').empty(); $('#bulletin-board-container').empty();
}); });
// define the function for filtering the list
$('#bulletin-board-filter').focus(function () {
if ($(this).hasClass(config.styles.filterList)) {
$(this).removeClass(config.styles.filterList).val('');
}
}).blur(function () {
if ($(this).val() === '') {
$(this).addClass(config.styles.filterList);
}
}).addClass(config.styles.filterList);
// filter type // filter type
$('#bulletin-board-filter-type').combo({ $('#bulletin-board-filter-type').combo({
options: [{ options: [{
@ -314,26 +300,23 @@ nf.ng.BulletinBoardCtrl = function (serviceProvider) {
var bulletinContainer = $('#bulletin-board-container'); var bulletinContainer = $('#bulletin-board-container');
// get the filter text // get the filter text
var filterField = $('#bulletin-board-filter'); var filter = $('#bulletin-board-filter').val();
if (!filterField.hasClass(config.styles.filterList)) { if (filter !== '') {
var filter = filterField.val(); // determine which field to filter on
if (filter !== '') { var filterOption = $('#bulletin-board-filter-type').combo('getSelectedOption');
// determine which field to filter on data[filterOption.value] = filter;
var filterOption = $('#bulletin-board-filter-type').combo('getSelectedOption');
data[filterOption.value] = filter;
// append filtering message if necessary // append filtering message if necessary
if (filterText !== filter || filterType !== filterOption.text) { if (filterText !== filter || filterType !== filterOption.text) {
var filterContent = $('<div class="bulletin-action"></div>').text('Filter ' + filterOption.text + ' matching \'' + filter + '\''); var filterContent = $('<div class="bulletin-action"></div>').text('Filter ' + filterOption.text + ' matching \'' + filter + '\'');
appendAndScroll(bulletinContainer, filterContent.get(0)); appendAndScroll(bulletinContainer, filterContent.get(0));
filterText = filter; filterText = filter;
filterType = filterOption.text; filterType = filterOption.text;
}
} else if (filterText !== null) {
appendAndScroll(bulletinContainer, '<div class="bulletin-action">Filter removed</div>');
filterText = null;
filterType = null;
} }
} else if (filterText !== null) {
appendAndScroll(bulletinContainer, '<div class="bulletin-action">Filter removed</div>');
filterText = null;
filterType = null;
} }
return $.ajax({ return $.ajax({

View File

@ -59,9 +59,6 @@ nf.ng.Canvas.ToolboxCtrl = function (processorComponent,
template: 'Template', template: 'Template',
label: 'Label' label: 'Label'
}, },
styles: {
filterList: 'filter-list'
},
urls: { urls: {
api: '../nifi-api', api: '../nifi-api',
controller: '../nifi-api/controller', controller: '../nifi-api/controller',

View File

@ -160,12 +160,7 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
* accounts for that. * accounts for that.
*/ */
var getFilterText = function () { var getFilterText = function () {
var filterText = ''; return $('#processor-type-filter').val();
var filterField = $('#processor-type-filter');
if (!filterField.hasClass(serviceProvider.headerCtrl.toolboxCtrl.config.styles.filterList)) {
filterText = filterField.val();
}
return filterText;
}; };
/** /**
@ -176,7 +171,7 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
$('#processor-tag-cloud').tagcloud('clearSelectedTags'); $('#processor-tag-cloud').tagcloud('clearSelectedTags');
// clear any filter strings // clear any filter strings
$('#processor-type-filter').addClass(serviceProvider.headerCtrl.toolboxCtrl.config.styles.filterList); $('#processor-type-filter').val('');
// reapply the filter // reapply the filter
applyFilter(); applyFilter();
@ -260,17 +255,6 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
* Initialize the filter. * Initialize the filter.
*/ */
init: function () { init: function () {
// define the function for filtering the list
$('#processor-type-filter').focus(function () {
if ($(this).hasClass(serviceProvider.headerCtrl.toolboxCtrl.config.styles.filterList)) {
$(this).removeClass(serviceProvider.headerCtrl.toolboxCtrl.config.styles.filterList).val('');
}
}).blur(function () {
if ($(this).val() === '') {
$(this).addClass(serviceProvider.headerCtrl.toolboxCtrl.config.styles.filterList);
}
}).addClass(serviceProvider.headerCtrl.toolboxCtrl.config.styles.filterList);
// initialize the processor type table // initialize the processor type table
var processorTypesColumns = [ var processorTypesColumns = [
{id: 'type', name: 'Type', field: 'label', sortable: true, resizable: true}, {id: 'type', name: 'Type', field: 'label', sortable: true, resizable: true},

View File

@ -57,12 +57,10 @@ nf.Actions = (function () {
dataType: 'json', dataType: 'json',
contentType: 'application/json' contentType: 'application/json'
}).fail(function (xhr, status, error) { }).fail(function (xhr, status, error) {
if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) { nf.Dialog.showOkDialog({
nf.Dialog.showOkDialog({ headerText: 'Update Resource',
headerText: 'Update Resource', dialogContent: nf.Common.escapeHtml(xhr.responseText)
dialogContent: nf.Common.escapeHtml(xhr.responseText) });
});
}
}); });
}; };

View File

@ -22,13 +22,6 @@
*/ */
nf.ComponentState = (function () { nf.ComponentState = (function () {
var config = {
filterText: 'Filter',
styles: {
filterList: 'filter-list'
}
};
/** /**
* Filters the component state table. * Filters the component state table.
*/ */
@ -105,12 +98,7 @@ nf.ComponentState = (function () {
* accounts for that. * accounts for that.
*/ */
var getFilterText = function () { var getFilterText = function () {
var filterText = ''; return $('#component-state-filter').val();
var filterField = $('#component-state-filter');
if (!filterField.hasClass(config.styles.filterList)) {
filterText = filterField.val();
}
return filterText;
}; };
/** /**
@ -195,7 +183,7 @@ nf.ComponentState = (function () {
$('#component-state-description').text(''); $('#component-state-description').text('');
// clear any filter strings // clear any filter strings
$('#component-state-filter').addClass(config.styles.filterList).val(config.filterText); $('#component-state-filter').val('');
// reset clear link // reset clear link
$('#clear-link').removeClass('disabled').attr('title', ''); $('#clear-link').removeClass('disabled').attr('title', '');
@ -210,17 +198,9 @@ nf.ComponentState = (function () {
return { return {
init: function () { init: function () {
// intialize the component state filter // intialize the component state filter
$('#component-state-filter').on('focus', function () { $('#component-state-filter').on('keyup', function () {
if ($(this).hasClass(config.styles.filterList)) {
$(this).removeClass(config.styles.filterList).val('');
}
}).on('blur', function () {
if ($(this).val() === '') {
$(this).addClass(config.styles.filterList).val(config.filterText);
}
}).on('keyup', function () {
applyFilter(); applyFilter();
}).addClass(config.styles.filterList).val(config.filterText); });
// initialize the processor configuration dialog // initialize the processor configuration dialog
$('#component-state-dialog').modal({ $('#component-state-dialog').modal({

View File

@ -23,10 +23,6 @@ nf.ControllerServices = (function () {
var initialized = false; var initialized = false;
var config = { var config = {
filterText: 'Filter',
styles: {
filterList: 'filter-list'
},
urls: { urls: {
api: '../nifi-api', api: '../nifi-api',
controllerServiceTypes: '../nifi-api/flow/controller-service-types' controllerServiceTypes: '../nifi-api/flow/controller-service-types'
@ -49,12 +45,7 @@ nf.ControllerServices = (function () {
* accounts for that. * accounts for that.
*/ */
var getControllerServiceTypeFilterText = function () { var getControllerServiceTypeFilterText = function () {
var filterText = ''; return $('#controller-service-type-filter').val();
var filterField = $('#controller-service-type-filter');
if (!filterField.hasClass(config.styles.filterList)) {
filterText = filterField.val();
}
return filterText;
}; };
/** /**
@ -261,17 +252,6 @@ nf.ControllerServices = (function () {
* Initializes the new controller service dialog. * Initializes the new controller service dialog.
*/ */
var initNewControllerServiceDialog = function () { var initNewControllerServiceDialog = function () {
// define the function for filtering the list
$('#controller-service-type-filter').focus(function () {
if ($(this).hasClass(config.styles.filterList)) {
$(this).removeClass(config.styles.filterList).val('');
}
}).blur(function () {
if ($(this).val() === '') {
$(this).addClass(config.styles.filterList).val(config.filterText);
}
}).addClass(config.styles.filterList).val(config.filterText);
// initialize the processor type table // initialize the processor type table
var controllerServiceTypesColumns = [ var controllerServiceTypesColumns = [
{id: 'type', name: 'Type', field: 'label', sortable: false, resizable: true}, {id: 'type', name: 'Type', field: 'label', sortable: false, resizable: true},
@ -387,7 +367,7 @@ nf.ControllerServices = (function () {
clearSelectedControllerService(); clearSelectedControllerService();
// clear any filter strings // clear any filter strings
$('#controller-service-type-filter').addClass(config.styles.filterList).val(config.filterText); $('#controller-service-type-filter').val('');
// clear the tagcloud // clear the tagcloud
$('#controller-service-tag-cloud').tagcloud('clearSelectedTags'); $('#controller-service-tag-cloud').tagcloud('clearSelectedTags');

View File

@ -20,10 +20,6 @@
nf.ProcessGroupConfiguration = (function () { nf.ProcessGroupConfiguration = (function () {
var config = { var config = {
filterText: 'Filter',
styles: {
filterList: 'filter-list'
},
urls: { urls: {
api: '../nifi-api' api: '../nifi-api'
} }
@ -123,6 +119,12 @@ nf.ProcessGroupConfiguration = (function () {
url: config.urls.api + '/process-groups/' + encodeURIComponent(groupId), url: config.urls.api + '/process-groups/' + encodeURIComponent(groupId),
dataType: 'json' dataType: 'json'
}).done(function (response) { }).done(function (response) {
// store the process group
$('#process-group-configuration').data('process-group', response);
// update the current time
$('#process-group-configuration-last-refreshed').text(response.currentTime);
if (response.permissions.canWrite) { if (response.permissions.canWrite) {
var processGroup = response.component; var processGroup = response.component;
@ -177,6 +179,9 @@ nf.ProcessGroupConfiguration = (function () {
reset(); reset();
}); });
//reset content to account for possible policy changes
$('#process-group-configuration-tabs').find('.selected-tab').click();
// adjust the table size // adjust the table size
nf.ProcessGroupConfiguration.resetTableSize(); nf.ProcessGroupConfiguration.resetTableSize();
}; };
@ -185,6 +190,8 @@ nf.ProcessGroupConfiguration = (function () {
* Resets the process group configuration dialog. * Resets the process group configuration dialog.
*/ */
var reset = function () { var reset = function () {
$('#process-group-configuration').removeData('process-group');
// reset button state // reset button state
$('#process-group-configuration-save').mouseout(); $('#process-group-configuration-save').mouseout();
@ -211,20 +218,28 @@ nf.ProcessGroupConfiguration = (function () {
tabContentId: 'process-group-controller-services-tab-content' tabContentId: 'process-group-controller-services-tab-content'
}], }],
select: function () { select: function () {
var processGroup = $('#process-group-configuration').data('process-group');
var canWrite = nf.Common.isDefinedAndNotNull(processGroup) ? processGroup.permissions.canWrite : false;
var tab = $(this).text(); var tab = $(this).text();
if (tab === 'General') { if (tab === 'General') {
$('#add-process-group-configuration-controller-service').hide(); $('#add-process-group-configuration-controller-service').hide();
$('#process-group-configuration-save').show();
if (canWrite) {
$('#process-group-configuration-save').show();
} else {
$('#process-group-configuration-save').hide();
}
} else { } else {
$('#add-process-group-configuration-controller-service').show();
$('#process-group-configuration-save').hide(); $('#process-group-configuration-save').hide();
// update the tooltip on the button if (canWrite) {
$('#add-process-group-configuration-controller-service').attr('title', function () { $('#add-process-group-configuration-controller-service').show();
if (tab === 'Controller Services') { $('#process-group-controller-services-tab-content').css('top', '32px');
return 'Create a new controller service'; } else {
} $('#add-process-group-configuration-controller-service').hide();
}); $('#process-group-controller-services-tab-content').css('top', '0');
}
// resize the table // resize the table
nf.ProcessGroupConfiguration.resetTableSize(); nf.ProcessGroupConfiguration.resetTableSize();

View File

@ -20,10 +20,6 @@
nf.Settings = (function () { nf.Settings = (function () {
var config = { var config = {
filterText: 'Filter',
styles: {
filterList: 'filter-list'
},
urls: { urls: {
api: '../nifi-api', api: '../nifi-api',
controllerConfig: '../nifi-api/controller/config', controllerConfig: '../nifi-api/controller/config',
@ -256,12 +252,7 @@ nf.Settings = (function () {
* accounts for that. * accounts for that.
*/ */
var getReportingTaskTypeFilterText = function () { var getReportingTaskTypeFilterText = function () {
var filterText = ''; return $('#reporting-task-type-filter').val();
var filterField = $('#reporting-task-type-filter');
if (!filterField.hasClass(config.styles.filterList)) {
filterText = filterField.val();
}
return filterText;
}; };
/** /**
@ -419,15 +410,7 @@ nf.Settings = (function () {
} else { } else {
applyReportingTaskTypeFilter(); applyReportingTaskTypeFilter();
} }
}).focus(function () { });
if ($(this).hasClass(config.styles.filterList)) {
$(this).removeClass(config.styles.filterList).val('');
}
}).blur(function () {
if ($(this).val() === '') {
$(this).addClass(config.styles.filterList).val(config.filterText);
}
}).addClass(config.styles.filterList).val(config.filterText);
// initialize the processor type table // initialize the processor type table
var reportingTaskTypesColumns = [ var reportingTaskTypesColumns = [
@ -574,7 +557,7 @@ nf.Settings = (function () {
clearSelectedReportingTask(); clearSelectedReportingTask();
// clear any filter strings // clear any filter strings
$('#reporting-task-type-filter').addClass(config.styles.filterList).val(config.filterText); $('#reporting-task-type-filter').val('');
// clear the tagcloud // clear the tagcloud
$('#reporting-task-tag-cloud').tagcloud('clearSelectedTags'); $('#reporting-task-tag-cloud').tagcloud('clearSelectedTags');
@ -1002,6 +985,7 @@ nf.Settings = (function () {
} else { } else {
if (nf.Common.canModifyController()) { if (nf.Common.canModifyController()) {
$('#new-service-or-task').show(); $('#new-service-or-task').show();
$('div.controller-settings-table').css('top', '32px');
// update the tooltip on the button // update the tooltip on the button
$('#new-service-or-task').attr('title', function () { $('#new-service-or-task').attr('title', function () {
@ -1015,6 +999,7 @@ nf.Settings = (function () {
}); });
} else { } else {
$('#new-service-or-task').hide(); $('#new-service-or-task').hide();
$('div.controller-settings-table').css('top', '0');
} }
// resize the table // resize the table

View File

@ -25,10 +25,6 @@ nf.ClusterTable = (function () {
var config = { var config = {
primaryNode: 'Primary Node', primaryNode: 'Primary Node',
clusterCoorindator: 'Cluster Coordinator', clusterCoorindator: 'Cluster Coordinator',
filterText: 'Filter',
styles: {
filterList: 'cluster-filter-list'
},
urls: { urls: {
cluster: '../nifi-api/controller/cluster', cluster: '../nifi-api/controller/cluster',
nodes: '../nifi-api/controller/cluster/nodes' nodes: '../nifi-api/controller/cluster/nodes'
@ -244,12 +240,7 @@ nf.ClusterTable = (function () {
* accounts for that. * accounts for that.
*/ */
var getFilterText = function () { var getFilterText = function () {
var filterText = ''; return $('#cluster-filter').val();
var filterField = $('#cluster-filter');
if (!filterField.hasClass(config.styles.filterList)) {
filterText = filterField.val();
}
return filterText;
}; };
/** /**
@ -365,15 +356,7 @@ nf.ClusterTable = (function () {
// define the function for filtering the list // define the function for filtering the list
$('#cluster-filter').keyup(function () { $('#cluster-filter').keyup(function () {
applyFilter(); applyFilter();
}).focus(function () { });
if ($(this).hasClass(config.styles.filterList)) {
$(this).removeClass(config.styles.filterList).val('');
}
}).blur(function () {
if ($(this).val() === '') {
$(this).addClass(config.styles.filterList).val(config.filterText);
}
}).addClass(config.styles.filterList).val(config.filterText);
// filter type // filter type
$('#cluster-filter-type').combo({ $('#cluster-filter-type').combo({

View File

@ -23,9 +23,6 @@ nf.CountersTable = (function () {
* Configuration object used to hold a number of configuration items. * Configuration object used to hold a number of configuration items.
*/ */
var config = { var config = {
styles: {
filterList: 'counters-filter-list'
},
urls: { urls: {
counters: '../nifi-api/counters' counters: '../nifi-api/counters'
} }
@ -61,12 +58,7 @@ nf.CountersTable = (function () {
* accounts for that. * accounts for that.
*/ */
var getFilterText = function () { var getFilterText = function () {
var filterText = ''; return $('#counters-filter').val();
var filterField = $('#counters-filter');
if (!filterField.hasClass(config.styles.filterList)) {
filterText = filterField.val();
}
return filterText;
}; };
/** /**
@ -141,15 +133,7 @@ nf.CountersTable = (function () {
// define the function for filtering the list // define the function for filtering the list
$('#counters-filter').keyup(function () { $('#counters-filter').keyup(function () {
applyFilter(); applyFilter();
}).focus(function () { });
if ($(this).hasClass(config.styles.filterList)) {
$(this).removeClass(config.styles.filterList).val('');
}
}).blur(function () {
if ($(this).val() === '') {
$(this).addClass(config.styles.filterList);
}
}).addClass(config.styles.filterList);
// filter type // filter type
$('#counters-filter-type').combo({ $('#counters-filter-type').combo({

View File

@ -25,9 +25,7 @@ nf.HistoryTable = (function () {
var config = { var config = {
defaultStartTime: '00:00:00', defaultStartTime: '00:00:00',
defaultEndTime: '23:59:59', defaultEndTime: '23:59:59',
filterText: 'Filter',
styles: { styles: {
filterList: 'filter-list',
hidden: 'hidden' hidden: 'hidden'
}, },
urls: { urls: {

View File

@ -27,9 +27,7 @@ nf.ng.ProvenanceTable = function (provenanceLineageCtrl) {
maxResults: 1000, maxResults: 1000,
defaultStartTime: '00:00:00', defaultStartTime: '00:00:00',
defaultEndTime: '23:59:59', defaultEndTime: '23:59:59',
filterText: 'Filter',
styles: { styles: {
filterList: 'provenance-filter-list',
hidden: 'hidden' hidden: 'hidden'
}, },
urls: { urls: {
@ -519,15 +517,7 @@ nf.ng.ProvenanceTable = function (provenanceLineageCtrl) {
// define the function for filtering the list // define the function for filtering the list
$('#provenance-filter').keyup(function () { $('#provenance-filter').keyup(function () {
applyFilter(); applyFilter();
}).focus(function () { });
if ($(this).hasClass(config.styles.filterList)) {
$(this).removeClass(config.styles.filterList).val('');
}
}).blur(function () {
if ($(this).val() === '') {
$(this).addClass(config.styles.filterList).val(config.filterText);
}
}).addClass(config.styles.filterList).val(config.filterText);
// filter options // filter options
var filterOptions = [{ var filterOptions = [{
@ -797,12 +787,7 @@ nf.ng.ProvenanceTable = function (provenanceLineageCtrl) {
* accounts for that. * accounts for that.
*/ */
var getFilterText = function () { var getFilterText = function () {
var filterText = ''; return $('#provenance-filter').val();
var filterField = $('#provenance-filter');
if (!filterField.hasClass(config.styles.filterList)) {
filterText = filterField.val();
}
return filterText;
}; };
/** /**

View File

@ -22,9 +22,6 @@ nf.SummaryTable = (function () {
* Configuration object used to hold a number of configuration items. * Configuration object used to hold a number of configuration items.
*/ */
var config = { var config = {
styles: {
filterList: 'summary-filter-list'
},
urls: { urls: {
api: '../nifi-api', api: '../nifi-api',
status: '../nifi-api/flow/process-groups/root/status', status: '../nifi-api/flow/process-groups/root/status',
@ -59,15 +56,7 @@ nf.SummaryTable = (function () {
// define the function for filtering the list // define the function for filtering the list
$('#summary-filter').keyup(function () { $('#summary-filter').keyup(function () {
applyFilter(); applyFilter();
}).focus(function () { });
if ($(this).hasClass(config.styles.filterList)) {
$(this).removeClass(config.styles.filterList);
}
}).blur(function () {
if ($(this).val() === '') {
$(this).addClass(config.styles.filterList);
}
}).addClass(config.styles.filterList);
// initialize the summary tabs // initialize the summary tabs
$('#summary-tabs').tabbs({ $('#summary-tabs').tabbs({
@ -236,7 +225,7 @@ nf.SummaryTable = (function () {
} }
// reset the filter // reset the filter
$('#summary-filter').addClass(config.styles.filterList); $('#summary-filter').val('');
applyFilter(); applyFilter();
} }
}); });
@ -2299,12 +2288,7 @@ nf.SummaryTable = (function () {
* accounts for that. * accounts for that.
*/ */
var getFilterText = function () { var getFilterText = function () {
var filterText = ''; return $('#summary-filter').val();
var filterField = $('#summary-filter');
if (!filterField.hasClass(config.styles.filterList)) {
filterText = filterField.val();
}
return filterText;
}; };
/** /**

View File

@ -23,10 +23,6 @@ nf.TemplatesTable = (function () {
* Configuration object used to hold a number of configuration items. * Configuration object used to hold a number of configuration items.
*/ */
var config = { var config = {
filterText: 'Filter',
styles: {
filterList: 'templates-filter-list'
},
urls: { urls: {
templates: '../nifi-api/flow/templates', templates: '../nifi-api/flow/templates',
downloadToken: '../nifi-api/access/download-token' downloadToken: '../nifi-api/access/download-token'
@ -126,12 +122,7 @@ nf.TemplatesTable = (function () {
* accounts for that. * accounts for that.
*/ */
var getFilterText = function () { var getFilterText = function () {
var filterText = ''; return $('#templates-filter').val();
var filterField = $('#templates-filter');
if (!filterField.hasClass(config.styles.filterList)) {
filterText = filterField.val();
}
return filterText;
}; };
/** /**
@ -214,15 +205,7 @@ nf.TemplatesTable = (function () {
// define the function for filtering the list // define the function for filtering the list
$('#templates-filter').keyup(function () { $('#templates-filter').keyup(function () {
applyFilter(); applyFilter();
}).focus(function () { });
if ($(this).hasClass(config.styles.filterList)) {
$(this).removeClass(config.styles.filterList).val('');
}
}).blur(function () {
if ($(this).val() === '') {
$(this).addClass(config.styles.filterList).val(config.filterText);
}
}).addClass(config.styles.filterList).val(config.filterText);
// filter type // filter type
$('#templates-filter-type').combo({ $('#templates-filter-type').combo({

View File

@ -23,10 +23,6 @@ nf.UsersTable = (function () {
* Configuration object used to hold a number of configuration items. * Configuration object used to hold a number of configuration items.
*/ */
var config = { var config = {
filterText: 'Filter',
styles: {
filterList: 'users-filter-list'
},
urls: { urls: {
users: '../nifi-api/tenants/users', users: '../nifi-api/tenants/users',
userGroups: '../nifi-api/tenants/user-groups' userGroups: '../nifi-api/tenants/user-groups'
@ -480,15 +476,7 @@ nf.UsersTable = (function () {
// define the function for filtering the list // define the function for filtering the list
$('#users-filter').keyup(function () { $('#users-filter').keyup(function () {
applyFilter(); applyFilter();
}).focus(function () { });
if ($(this).hasClass(config.styles.filterList)) {
$(this).removeClass(config.styles.filterList).val('');
}
}).blur(function () {
if ($(this).val() === '') {
$(this).addClass(config.styles.filterList).val(config.filterText);
}
}).addClass(config.styles.filterList).val(config.filterText);
// filter type // filter type
$('#users-filter-type').combo({ $('#users-filter-type').combo({
@ -654,12 +642,7 @@ nf.UsersTable = (function () {
* accounts for that. * accounts for that.
*/ */
var getFilterText = function () { var getFilterText = function () {
var filterText = ''; return $('#users-filter').val();
var filterField = $('#users-filter');
if (!filterField.hasClass(config.styles.filterList)) {
filterText = filterField.val();
}
return filterText;
}; };
/** /**