mirror of https://github.com/apache/nifi.git
[NIFI-2205] Update Cluster Shell
[NIFI-2217] fix single node and cluster link [NIFI-2219] Fix styles on provenance cluster search combo [NIFI-2180] Fix settings shell table text alignment for run status [NIFI-2140] Update preview image for Change Color dialog [NIFI-2131] update progress bars/percent complete to use angular material progress linear directive [NIFI-2099] add header text to all ok and yes/no dialogs [NIFI-2233] fix invalid/warning icon shifts position as tasks are added [NIFI-2131] update progress bars/percent complete [NIFI-2140] Update preview image for label. This closes #627
This commit is contained in:
Scott Aslan
Matt Gilman
parent
e0c96794fa
commit
8db89c8c0b
|
|
@ -434,6 +434,10 @@
|
|||
<include>${staging.dir}/js/nf/nf-dialog.js</include>
|
||||
<include>${staging.dir}/js/nf/nf-storage.js</include>
|
||||
<include>${staging.dir}/js/nf/nf-ajax-setup.js</include>
|
||||
<include>${staging.dir}/js/nf/nf-ng-bridge.js</include>
|
||||
<include>${staging.dir}/js/nf/nf-ng-service-provider.js</include>
|
||||
<include>${staging.dir}/js/nf/nf-ng-app-config.js</include>
|
||||
<include>${staging.dir}/js/nf/nf-ng-app-controller.js</include>
|
||||
<include>${staging.dir}/js/nf/provenance/nf-provenance.js</include>
|
||||
<include>${staging.dir}/js/nf/provenance/nf-provenance-table.js</include>
|
||||
<include>${staging.dir}/js/nf/provenance/nf-provenance-lineage.js</include>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,11 @@ nf.provenance.script.tags=<script type="text/javascript" src="js/nf/nf-common.js
|
|||
<script type="text/javascript" src="js/nf/nf-ajax-setup.js?${project.version}"></script>\n\
|
||||
<script type="text/javascript" src="js/nf/provenance/nf-provenance.js?${project.version}"></script>\n\
|
||||
<script type="text/javascript" src="js/nf/provenance/nf-provenance-table.js?${project.version}"></script>\n\
|
||||
<script type="text/javascript" src="js/nf/provenance/nf-provenance-lineage.js?${project.version}"></script>
|
||||
<script type="text/javascript" src="js/nf/provenance/nf-provenance-lineage.js?${project.version}"></script>\n\
|
||||
<script type="text/javascript" src="js/nf/nf-ng-bridge.js?${project.version}"></script>\n\
|
||||
<script type="text/javascript" src="js/nf/nf-ng-service-provider.js?${project.version}"></script>\n\
|
||||
<script type="text/javascript" src="js/nf/nf-ng-app-controller.js?${project.version}"></script>\n\
|
||||
<script type="text/javascript" src="js/nf/nf-ng-app-config.js?${project.version}"></script>
|
||||
nf.provenance.style.tags=<link rel="stylesheet" href="css/reset.css?${project.version}" type="text/css" />\n\
|
||||
<link rel="stylesheet" href="css/main.css?${project.version}" type="text/css" />\n\
|
||||
<link rel="stylesheet" href="css/banner.css?${project.version}" type="text/css" />\n\
|
||||
|
|
|
|||
|
|
@ -54,10 +54,18 @@
|
|||
<script type="text/javascript" src="js/jquery/slickgrid/slick.dataview.js"></script>
|
||||
<script type="text/javascript" src="js/jquery/slickgrid/slick.core.js"></script>
|
||||
<script type="text/javascript" src="js/jquery/slickgrid/slick.grid.js"></script>
|
||||
<script type="text/javascript" src="assets/angular/angular.min.js"></script>
|
||||
<script type="text/javascript" src="assets/angular-messages/angular-messages.min.js"></script>
|
||||
<script type="text/javascript" src="assets/angular-resource/angular-resource.min.js"></script>
|
||||
<script type="text/javascript" src="assets/angular-route/angular-route.min.js"></script>
|
||||
<script type="text/javascript" src="assets/angular-aria/angular-aria.min.js"></script>
|
||||
<script type="text/javascript" src="assets/angular-animate/angular-animate.min.js"></script>
|
||||
<script type="text/javascript" src="assets/angular-material/angular-material.min.js"></script>
|
||||
<script type="text/javascript" src="js/nf/nf-namespace.js?${project.version}"></script>
|
||||
<script type="text/javascript" src="js/nf/nf-ng-namespace.js?${project.version}"></script>
|
||||
${nf.provenance.script.tags}
|
||||
</head>
|
||||
<body>
|
||||
<body ng-controller="ngProvenanceAppCtrl">
|
||||
<jsp:include page="/WEB-INF/partials/message-pane.jsp"/>
|
||||
<jsp:include page="/WEB-INF/partials/banners-utility.jsp"/>
|
||||
<jsp:include page="/WEB-INF/partials/ok-dialog.jsp"/>
|
||||
|
|
|
|||
|
|
@ -28,15 +28,7 @@
|
|||
</div>
|
||||
<div class="setting-name" style="margin-top: 10px;">Preview</div>
|
||||
<div class="setting-field">
|
||||
<div id="fill-color-processor-preview">
|
||||
<div id="fill-color-processor-preview-name">Processor</div>
|
||||
<div id="fill-color-processor-preview-icon"></div>
|
||||
<div class="clear"></div>
|
||||
<div id="fill-color-processor-preview-stats">
|
||||
<div id="fill-color-processor-preview-stats-label"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="fill-color-processor-preview" class="icon icon-processor"></div>
|
||||
<div id="fill-color-label-preview">
|
||||
<div id="fill-color-label-preview-value">Label</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<div id="cluster">
|
||||
<div id="cluster-header-and-filter">
|
||||
<div id="cluster-header-text">NiFi Cluster</div>
|
||||
<div id="cluster-filter-controls" class="filter-controls">
|
||||
<div id="cluster-filter-controls">
|
||||
<div id="cluster-filter-stats" class="filter-status">
|
||||
Displaying <span id="displayed-nodes"></span> of <span id="total-nodes"></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,12 +22,15 @@
|
|||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 90%;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#cluster-header-and-filter {
|
||||
height: 98px;
|
||||
}
|
||||
|
||||
#cluster-header-text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
|
@ -40,6 +43,7 @@
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#cluster-loading-container {
|
||||
|
|
@ -59,44 +63,14 @@
|
|||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#refresh-button {
|
||||
height: 24px;
|
||||
width: 26px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* filter controls */
|
||||
|
||||
#cluster-filter-controls {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#cluster-filter-container {
|
||||
height: 32px;
|
||||
width: 318px;
|
||||
}
|
||||
|
||||
#cluster-filter {
|
||||
width: 173px;
|
||||
margin-right: 3px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
input.cluster-filter-list {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
#cluster-filter-type {
|
||||
width: 120px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* counters table */
|
||||
|
||||
#cluster-table {
|
||||
overflow: hidden;
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 98px;
|
||||
left: 0px;
|
||||
bottom: 47px;
|
||||
right: 0px;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@
|
|||
bottom: 0px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,44 +33,7 @@
|
|||
}
|
||||
|
||||
#fill-color-processor-preview {
|
||||
width: 173px;
|
||||
height: 56px;
|
||||
font-weight: bold;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
#fill-color-processor-preview-name {
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#fill-color-processor-preview-icon {
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
float: right;
|
||||
background-image: url(../images/iconSmallProcessor.png);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
#fill-color-processor-preview-stats {
|
||||
margin-top: 1px;
|
||||
margin-left: 5px;
|
||||
float: left;
|
||||
border: 1px solid #6f97ac;
|
||||
background-color: #ffffff;
|
||||
height: 30px;
|
||||
width: 161px;
|
||||
}
|
||||
|
||||
#fill-color-processor-preview-stats-label {
|
||||
float: left;
|
||||
background: linear-gradient(to bottom, #30505c, #6f97ac);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#30505c, endColorstr=#6f97ac);
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
#fill-color-label-preview {
|
||||
|
|
|
|||
|
|
@ -173,12 +173,6 @@ div.searchable-field-value {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#provenance-search-location {
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
width: 424px;
|
||||
}
|
||||
|
||||
/* event details dialog */
|
||||
|
||||
div.flowfile-container {
|
||||
|
|
|
|||
|
|
@ -61,22 +61,17 @@
|
|||
padding-top: 10px;
|
||||
}
|
||||
|
||||
div.status-text {
|
||||
padding-left: 4px;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* view options */
|
||||
|
||||
#view-options-container {
|
||||
display: none;
|
||||
float: right;
|
||||
margin-top: 12px;
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* view single node dialog */
|
||||
|
|
|
|||
|
|
@ -156,4 +156,12 @@ classes should alter those!
|
|||
border-right: 1px solid #c7d2d7;
|
||||
border-bottom: 1px solid #c7d2d7;
|
||||
padding: 0px 2px 6px 10px;
|
||||
}
|
||||
|
||||
div.status-text {
|
||||
padding-left: 4px;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -385,7 +385,8 @@ nf.ng.Canvas.OperateCtrl = function () {
|
|||
$('#fill-color-value').val(hex);
|
||||
|
||||
// always update the preview
|
||||
$('#fill-color-processor-preview, #fill-color-label-preview').css({
|
||||
$('#fill-color-processor-preview').css('color', hex);
|
||||
$('#fill-color-label-preview').css({
|
||||
'border-color': hex,
|
||||
'background': 'linear-gradient(to bottom, #ffffff, ' + hex + ')',
|
||||
'filter': 'progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#ffffff, endColorstr=' + hex + ')'
|
||||
|
|
|
|||
|
|
@ -30,21 +30,11 @@ nf.Actions = (function () {
|
|||
* Initializes the drop request status dialog.
|
||||
*/
|
||||
var initializeDropRequestStatusDialog = function () {
|
||||
// initialize the drop requst progress bar
|
||||
var dropRequestProgressBar = $('#drop-request-percent-complete').progressbar();
|
||||
|
||||
// configure the drop request status dialog
|
||||
$('#drop-request-status-dialog').modal({
|
||||
scrollableContentStyle: 'scrollable',
|
||||
handler: {
|
||||
close: function () {
|
||||
// reset the progress bar
|
||||
dropRequestProgressBar.find('div.progress-label').remove();
|
||||
|
||||
// update the progress bar
|
||||
var label = $('<div class="progress-label"></div>').text('0%');
|
||||
dropRequestProgressBar.progressbar('value', 0).append(label);
|
||||
|
||||
// clear the current button model
|
||||
$('#drop-request-status-dialog').modal('setButtonModel', []);
|
||||
}
|
||||
|
|
@ -918,13 +908,12 @@ nf.Actions = (function () {
|
|||
// remove existing labels
|
||||
var progressBar = $('#drop-request-percent-complete');
|
||||
progressBar.find('div.progress-label').remove();
|
||||
progressBar.find('md-progress-linear').remove();
|
||||
|
||||
// update the progress bar
|
||||
var label = $('<div class="progress-label"></div>').text(percentComplete + '%');
|
||||
if (percentComplete > 0) {
|
||||
label.css('margin-top', '-19px');
|
||||
}
|
||||
progressBar.progressbar('value', percentComplete).append(label);
|
||||
(nf.ng.Bridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + percentComplete + '" class="md-hue-2" md-mode="determinate" aria-label="Drop request percent complete"></md-progress-linear>'))(nf.ng.Bridge.rootScope)).appendTo(progressBar);
|
||||
progressBar.append(label);
|
||||
};
|
||||
|
||||
// update the button model of the drop request status dialog
|
||||
|
|
|
|||
|
|
@ -1260,7 +1260,10 @@ nf.CanvasUtils = (function () {
|
|||
|
||||
// if the group id is null, we're already in the top most group
|
||||
if (groupId === null) {
|
||||
nf.Dialog.showOkDialog('Components are already in the topmost group.');
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Process Group',
|
||||
dialogContent: 'Components are already in the topmost group.'
|
||||
});
|
||||
} else {
|
||||
moveComponents(components, groupId);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -270,6 +270,7 @@ nf.ComponentState = (function () {
|
|||
}).fail(nf.Common.handleAjaxError);
|
||||
} else {
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Component State',
|
||||
dialogContent: 'This component has no state to clear.'
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@ nf.ConnectionConfiguration = (function () {
|
|||
} else {
|
||||
// inform users that no relationships were selected
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Connection Configuration',
|
||||
dialogContent: 'The connection must have at least one relationship selected.'
|
||||
});
|
||||
}
|
||||
|
|
@ -106,6 +107,7 @@ nf.ConnectionConfiguration = (function () {
|
|||
} else {
|
||||
// there are no relationships for this processor
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Connection Configuration',
|
||||
dialogContent: '\'' + nf.Common.escapeHtml(processor.name) + '\' does not support any relationships.'
|
||||
});
|
||||
|
||||
|
|
@ -320,6 +322,7 @@ nf.ConnectionConfiguration = (function () {
|
|||
} else {
|
||||
// there are no output ports for this process group
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Connection Configuration',
|
||||
dialogContent: '\'' + nf.Common.escapeHtml(processGroup.name) + '\' does not have any output ports.'
|
||||
});
|
||||
|
||||
|
|
@ -398,6 +401,7 @@ nf.ConnectionConfiguration = (function () {
|
|||
} else {
|
||||
// there are no relationships for this processor
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Connection Configuration',
|
||||
dialogContent: '\'' + nf.Common.escapeHtml(remoteProcessGroup.name) + '\' does not have any output ports.'
|
||||
});
|
||||
|
||||
|
|
@ -545,6 +549,7 @@ nf.ConnectionConfiguration = (function () {
|
|||
} else {
|
||||
// there are no relationships for this processor
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Connection Configuration',
|
||||
dialogContent: '\'' + nf.Common.escapeHtml(processGroup.name) + '\' does not have any input ports.'
|
||||
});
|
||||
|
||||
|
|
@ -622,6 +627,7 @@ nf.ConnectionConfiguration = (function () {
|
|||
} else {
|
||||
// there are no relationships for this processor
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Connection Configuration',
|
||||
dialogContent: '\'' + nf.Common.escapeHtml(remoteProcessGroup.name) + '\' does not have any input ports.'
|
||||
});
|
||||
|
||||
|
|
@ -987,6 +993,7 @@ nf.ConnectionConfiguration = (function () {
|
|||
}).fail(function (xhr, status, error) {
|
||||
if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Connection Configuration',
|
||||
dialogContent: nf.Common.escapeHtml(xhr.responseText),
|
||||
});
|
||||
} else {
|
||||
|
|
@ -1043,8 +1050,8 @@ nf.ConnectionConfiguration = (function () {
|
|||
|
||||
if (errors.length > 0) {
|
||||
nf.Dialog.showOkDialog({
|
||||
dialogContent: nf.Common.formatUnorderedList(errors),
|
||||
headerText: 'Configuration Error'
|
||||
headerText: 'Connection Configuration',
|
||||
dialogContent: nf.Common.formatUnorderedList(errors)
|
||||
});
|
||||
return false;
|
||||
} else {
|
||||
|
|
@ -1354,6 +1361,7 @@ nf.ConnectionConfiguration = (function () {
|
|||
} else {
|
||||
// inform users that no relationships were selected and the source is a processor
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Connection Configuration',
|
||||
dialogContent: 'The connection must have at least one relationship selected.'
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1198,6 +1198,7 @@ nf.Connection = (function () {
|
|||
}).fail(function (xhr, status, error) {
|
||||
if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Connection',
|
||||
dialogContent: nf.Common.escapeHtml(xhr.responseText)
|
||||
});
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ nf.ControllerService = (function () {
|
|||
|
||||
nf.Dialog.showOkDialog({
|
||||
dialogContent: content,
|
||||
headerText: 'Configuration Error'
|
||||
headerText: 'Controller Service'
|
||||
});
|
||||
} else {
|
||||
nf.Common.handleAjaxError(xhr, status, error);
|
||||
|
|
@ -1238,7 +1238,7 @@ nf.ControllerService = (function () {
|
|||
// inform the user if the action was canceled
|
||||
if (canceled === true && $('#nf-ok-dialog').not(':visible')) {
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Action Canceled',
|
||||
headerText: 'Controller Service',
|
||||
dialogContent: 'The request to disable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.'
|
||||
});
|
||||
}
|
||||
|
|
@ -1275,6 +1275,7 @@ nf.ControllerService = (function () {
|
|||
// ensure appropriate access
|
||||
if (scope === config.serviceAndReferencingComponents && hasUnauthorized) {
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Controller Service',
|
||||
dialogContent: 'Unable to enable due to unauthorized referencing components.'
|
||||
});
|
||||
return;
|
||||
|
|
@ -1381,7 +1382,7 @@ nf.ControllerService = (function () {
|
|||
// inform the user if the action was canceled
|
||||
if (canceled === true && $('#nf-ok-dialog').not(':visible')) {
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Action Canceled',
|
||||
headerText: 'Controller Service',
|
||||
dialogContent: 'The request to enable has been canceled. Parts of this request may have already completed. Please verify the state of this service and all referencing components.'
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -546,8 +546,8 @@ nf.ControllerServices = (function () {
|
|||
}
|
||||
|
||||
// format the markup
|
||||
var formattedValue = '<div class="' + icon + '" style="margin-top: 5px;"></div>';
|
||||
return formattedValue + '<div class="status-text" style="margin-top: 2px; margin-left: 4px; float: left;">' + label + '</div>';
|
||||
var formattedValue = '<div layout="row"><div class="' + icon + '" style="margin-top: 5px;"></div>';
|
||||
return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + label + '</div></div>';
|
||||
};
|
||||
|
||||
var controllerServiceActionFormatter = function (row, cell, value, columnDef, dataContext) {
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ nf.CustomUi = {
|
|||
});
|
||||
}).fail(function () {
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Configuration',
|
||||
headerText: 'Advanced Configuration',
|
||||
dialogContent: 'Unable to generate access token for accessing the advanced configuration dialog.'
|
||||
});
|
||||
deferred.resolve();
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@ nf.Draggable = (function () {
|
|||
}).fail(function (xhr, status, error) {
|
||||
if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Component Position',
|
||||
dialogContent: nf.Common.escapeHtml(xhr.responseText)
|
||||
});
|
||||
} else {
|
||||
|
|
@ -129,6 +130,7 @@ nf.Draggable = (function () {
|
|||
}).fail(function (xhr, status, error) {
|
||||
if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Component Position',
|
||||
dialogContent: nf.Common.escapeHtml(xhr.responseText)
|
||||
});
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ nf.PortConfiguration = (function () {
|
|||
|
||||
nf.Dialog.showOkDialog({
|
||||
dialogContent: content,
|
||||
headerText: 'Configuration Error'
|
||||
headerText: 'Port Configuration'
|
||||
});
|
||||
} else {
|
||||
// close the details panel
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@ nf.ProcessGroupConfiguration = (function () {
|
|||
|
||||
// show the result dialog
|
||||
nf.Dialog.showOkDialog({
|
||||
headerText: 'Process Group Configuration',
|
||||
dialogContent: 'Process group configuration successfully saved.'
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ nf.ProcessorConfiguration = (function () {
|
|||
|
||||
nf.Dialog.showOkDialog({
|
||||
dialogContent: content,
|
||||
headerText: 'Configuration Error'
|
||||
headerText: 'Processor Configuration'
|
||||
});
|
||||
} else {
|
||||
nf.Common.handleAjaxError(xhr, status, error);
|
||||
|
|
@ -358,7 +358,7 @@ nf.ProcessorConfiguration = (function () {
|
|||
if (errors.length > 0) {
|
||||
nf.Dialog.showOkDialog({
|
||||
dialogContent: nf.Common.formatUnorderedList(errors),
|
||||
headerText: 'Configuration Error'
|
||||
headerText: 'Processor Configuration'
|
||||
});
|
||||
return false;
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -36,22 +36,12 @@ nf.QueueListing = (function () {
|
|||
* Initializes the listing request status dialog.
|
||||
*/
|
||||
var initializeListingRequestStatusDialog = function () {
|
||||
// initialize the listing request progress bar
|
||||
var listingRequestProgressBar = $('#listing-request-percent-complete').progressbar();
|
||||
|
||||
// configure the drop request status dialog
|
||||
$('#listing-request-status-dialog').modal({
|
||||
scrollableContentStyle: 'scrollable',
|
||||
headerText: 'Queue Listing',
|
||||
handler: {
|
||||
close: function () {
|
||||
// reset the progress bar
|
||||
listingRequestProgressBar.find('div.progress-label').remove();
|
||||
|
||||
// update the progress bar
|
||||
var label = $('<div class="progress-label"></div>').text('0%');
|
||||
listingRequestProgressBar.progressbar('value', 0).append(label);
|
||||
|
||||
// clear the current button model
|
||||
$('#listing-request-status-dialog').modal('setButtonModel', []);
|
||||
}
|
||||
|
|
@ -248,13 +238,12 @@ nf.QueueListing = (function () {
|
|||
// remove existing labels
|
||||
var progressBar = $('#listing-request-percent-complete');
|
||||
progressBar.find('div.progress-label').remove();
|
||||
progressBar.find('md-progress-linear').remove();
|
||||
|
||||
// update the progress bar
|
||||
// update the progress
|
||||
var label = $('<div class="progress-label"></div>').text(percentComplete + '%');
|
||||
if (percentComplete > 0) {
|
||||
label.css('margin-top', '-24px');
|
||||
}
|
||||
progressBar.progressbar('value', percentComplete).append(label);
|
||||
(nf.ng.Bridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + percentComplete + '" class="md-hue-2" md-mode="determinate" aria-label="Searching Queue"></md-progress-linear>'))(nf.ng.Bridge.rootScope)).appendTo(progressBar);
|
||||
progressBar.append(label);
|
||||
};
|
||||
|
||||
// update the button model of the drop request status dialog
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ nf.RemoteProcessGroupConfiguration = (function () {
|
|||
|
||||
nf.Dialog.showOkDialog({
|
||||
dialogContent: content,
|
||||
headerText: 'Configuration'
|
||||
headerText: 'Remote Process Group Configuration'
|
||||
});
|
||||
} else {
|
||||
nf.Common.handleAjaxError(xhr, status, error);
|
||||
|
|
|
|||
|
|
@ -596,7 +596,7 @@ nf.Settings = (function () {
|
|||
var markup = '<div title="View Details" class="pointer view-reporting-task fa fa-info-circle" style="margin-top: 5px; float: left;" ></div>';
|
||||
|
||||
// always include a button to view the usage
|
||||
markup += '<div title="Usage" class="pointer reporting-task-usage fa fa-book" style="margin-left: 3px; margin-top: 5px;"></div>';
|
||||
markup += '<div title="Usage" class="pointer reporting-task-usage fa fa-book" style="margin-left: 6px; margin-top: 5px; float: left;"></div>';
|
||||
|
||||
var hasErrors = !nf.Common.isEmpty(dataContext.component.validationErrors);
|
||||
var hasBulletins = !nf.Common.isEmpty(dataContext.bulletins);
|
||||
|
|
@ -622,16 +622,20 @@ nf.Settings = (function () {
|
|||
}
|
||||
|
||||
// determine the appropriate label
|
||||
var label;
|
||||
var icon = '', label = '';
|
||||
if (!nf.Common.isEmpty(dataContext.component.validationErrors)) {
|
||||
label = 'Invalid';
|
||||
icon = 'invalid fa fa-warning';
|
||||
} else {
|
||||
if (dataContext.component.state === 'STOPPED') {
|
||||
label = 'Stopped';
|
||||
icon = 'fa fa-stop';
|
||||
} else if (dataContext.component.state === 'RUNNING') {
|
||||
label = 'Running';
|
||||
icon = 'fa fa-play';
|
||||
} else {
|
||||
label = 'Disabled';
|
||||
icon = 'icon icon-enable-false';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -642,8 +646,8 @@ nf.Settings = (function () {
|
|||
}
|
||||
|
||||
// format the markup
|
||||
var formattedValue = '<div class="' + nf.Common.escapeHtml(label.toLowerCase()) + '" style="margin-top: 3px;"></div>';
|
||||
return formattedValue + '<div class="status-text" style="margin-top: 2px; margin-left: 4px; float: left;">' + nf.Common.escapeHtml(label) + '</div><div style="float: left; margin-left: 4px;">' + nf.Common.escapeHtml(activeThreadCount) + '</div>';
|
||||
var formattedValue = '<div layout="row"><div class="' + icon + '" style="margin-top: 3px;"></div>';
|
||||
return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + nf.Common.escapeHtml(label) + '</div><div style="float: left; margin-left: 4px;">' + nf.Common.escapeHtml(activeThreadCount) + '</div></div>';
|
||||
};
|
||||
|
||||
var reportingTaskActionFormatter = function (row, cell, value, columnDef, dataContext) {
|
||||
|
|
|
|||
|
|
@ -20,12 +20,6 @@
|
|||
$(document).ready(function () {
|
||||
// initialize the counters page
|
||||
nf.Cluster.init();
|
||||
|
||||
//alter styles if we're not in the shell
|
||||
if (top === window) {
|
||||
$('#cluster').css('margin', 40);
|
||||
$('#cluster-refresh-container').css('margin', 40);
|
||||
}
|
||||
});
|
||||
|
||||
nf.Cluster = (function () {
|
||||
|
|
@ -129,8 +123,22 @@ nf.Cluster = (function () {
|
|||
nf.ClusterTable.loadClusterTable().done(function () {
|
||||
// once the table is initialized, finish initializing the page
|
||||
initializeClusterPage().done(function () {
|
||||
// configure the initial grid height
|
||||
nf.ClusterTable.resetTableSize();
|
||||
var setBodySize = function () {
|
||||
//alter styles if we're not in the shell
|
||||
if (top === window) {
|
||||
$('body').css({
|
||||
'height': $(window).height() + 'px',
|
||||
'width': $(window).width() + 'px'
|
||||
});
|
||||
|
||||
$('#cluster').css('margin', 40);
|
||||
$('#cluster-table').css('bottom', 127);
|
||||
$('#cluster-refresh-container').css('margin', 40);
|
||||
}
|
||||
|
||||
// configure the initial grid height
|
||||
nf.ClusterTable.resetTableSize();
|
||||
};
|
||||
|
||||
// get the about details
|
||||
$.ajax({
|
||||
|
|
@ -145,6 +153,41 @@ nf.Cluster = (function () {
|
|||
document.title = countersTitle;
|
||||
$('#counters-header-text').text(countersTitle);
|
||||
}).fail(nf.Common.handleAjaxError);
|
||||
|
||||
$(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));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -34,24 +34,10 @@ nf.ProvenanceLineage = (function () {
|
|||
* Initializes the lineage query dialog.
|
||||
*/
|
||||
var initLineageQueryDialog = function () {
|
||||
// initialize the progress bar
|
||||
$('#lineage-percent-complete').progressbar();
|
||||
|
||||
// initialize the dialog
|
||||
$('#lineage-query-dialog').modal({
|
||||
scrollableContentStyle: 'scrollable',
|
||||
headerText: 'Computing FlowFile lineage...',
|
||||
handler: {
|
||||
close: function () {
|
||||
// reset the progress bar
|
||||
var lineageProgressBar = $('#lineage-percent-complete');
|
||||
lineageProgressBar.find('div.progress-label').remove();
|
||||
|
||||
// update the progress bar
|
||||
var label = $('<div class="progress-label"></div>').text('0%');
|
||||
lineageProgressBar.progressbar('value', 0).append(label);
|
||||
}
|
||||
}
|
||||
headerText: 'Computing FlowFile lineage...'
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -461,24 +461,10 @@ nf.ProvenanceTable = (function () {
|
|||
* Initializes the provenance query dialog.
|
||||
*/
|
||||
var initProvenanceQueryDialog = function () {
|
||||
// initialize the progress bar
|
||||
$('#provenance-percent-complete').progressbar();
|
||||
|
||||
// initialize the dialog
|
||||
$('#provenance-query-dialog').modal({
|
||||
scrollableContentStyle: 'scrollable',
|
||||
headerText: 'Searching provenance events...',
|
||||
handler: {
|
||||
close: function () {
|
||||
// reset the progress bar
|
||||
var provenanceProgressBar = $('#provenance-percent-complete');
|
||||
provenanceProgressBar.find('div.progress-label').remove();
|
||||
|
||||
// update the progress bar
|
||||
var label = $('<div class="progress-label"></div>').text('0%');
|
||||
provenanceProgressBar.progressbar('value', 0).append(label);
|
||||
}
|
||||
}
|
||||
headerText: 'Searching provenance events...'
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -1088,13 +1074,12 @@ nf.ProvenanceTable = (function () {
|
|||
updateProgress: function (progressBar, value) {
|
||||
// remove existing labels
|
||||
progressBar.find('div.progress-label').remove();
|
||||
progressBar.find('md-progress-linear').remove();
|
||||
|
||||
// update the progress bar
|
||||
var label = $('<div class="progress-label"></div>').text(value + '%');
|
||||
if (value > 0) {
|
||||
label.css('margin-top', '-19px');
|
||||
}
|
||||
progressBar.progressbar('value', value).append(label);
|
||||
(nf.ng.Bridge.injector.get('$compile')($('<md-progress-linear ng-cloak ng-value="' + value + '" class="md-hue-2" md-mode="determinate" aria-label="Progress"></md-progress-linear>'))(nf.ng.Bridge.rootScope)).appendTo(progressBar);
|
||||
progressBar.append(label);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -18,6 +18,26 @@
|
|||
/* global nf, top */
|
||||
|
||||
$(document).ready(function () {
|
||||
//Create Angular App
|
||||
var app = angular.module('ngProvenanceApp', ['ngResource', 'ngRoute', 'ngMaterial', 'ngMessages']);
|
||||
|
||||
//Define Dependency Injection Annotations
|
||||
nf.ng.AppConfig.$inject = ['$mdThemingProvider', '$compileProvider'];
|
||||
nf.ng.AppCtrl.$inject = ['$scope', 'serviceProvider'];
|
||||
nf.ng.ServiceProvider.$inject = [];
|
||||
|
||||
//Configure Angular App
|
||||
app.config(nf.ng.AppConfig);
|
||||
|
||||
//Define Angular App Controllers
|
||||
app.controller('ngProvenanceAppCtrl', nf.ng.AppCtrl);
|
||||
|
||||
//Define Angular App Services
|
||||
app.service('serviceProvider', nf.ng.ServiceProvider);
|
||||
|
||||
//Manually Boostrap Angular App
|
||||
nf.ng.Bridge.injector = angular.bootstrap($('body'), ['ngProvenanceApp'], { strictDi: true });
|
||||
|
||||
// initialize the status page
|
||||
nf.Provenance.init();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -293,8 +293,8 @@ nf.SummaryTable = (function () {
|
|||
default:
|
||||
classes += '';
|
||||
}
|
||||
var formattedValue = '<div class="' + classes + '"></div>';
|
||||
return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + nf.Common.escapeHtml(value) + '</div><div style="float: left; margin-left: 4px;">' + nf.Common.escapeHtml(activeThreadCount) + '</div>';
|
||||
var formattedValue = '<div layout="row"><div class="' + classes + '"></div>';
|
||||
return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + nf.Common.escapeHtml(value) + '</div><div style="float: left; margin-left: 4px;">' + nf.Common.escapeHtml(activeThreadCount) + '</div></div>';
|
||||
};
|
||||
|
||||
// define the input, read, written, and output columns (reused between both tables)
|
||||
|
|
@ -2287,7 +2287,7 @@ nf.SummaryTable = (function () {
|
|||
}
|
||||
storage.appendTo(storageUsageContainer);
|
||||
|
||||
(nf.ng.Bridge.injector.get('$compile')($('<md-progress-linear class="md-hue-2" value="' + (used/total)*100 + '" aria-label="FlowFile Repository Storage Usage"></md-progress-linear>'))(nf.ng.Bridge.rootScope)).appendTo(storageUsageContainer);
|
||||
(nf.ng.Bridge.injector.get('$compile')($('<md-progress-linear class="md-hue-2" md-mode="determinate" value="' + (used/total)*100 + '" aria-label="FlowFile Repository Storage Usage"></md-progress-linear>'))(nf.ng.Bridge.rootScope)).appendTo(storageUsageContainer);
|
||||
|
||||
var usageDetails = $('<div class="storage-usage-details"></div>').text(' (' + storageUsage.usedSpace + ' of ' + storageUsage.totalSpace + ')').prepend($('<b></b>').text(Math.round((used/total)*100) + '%'));
|
||||
$('<div class="storage-usage-header"></div>').append(usageDetails).append('<div class="clear"></div>').appendTo(storageUsageContainer);
|
||||
|
|
|
|||
Loading…
Reference in New Issue