mirror of https://github.com/apache/nifi.git
[NIFI-2105] [NIFI-2106] fix status history dialog issues. This closes #673
This commit is contained in:
Scott Aslan
Matt Gilman
parent
e308c6464c
commit
deb2819bfb
|
|
@ -15,7 +15,7 @@
|
|||
limitations under the License.
|
||||
--%>
|
||||
<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
|
||||
<div id="shell-dialog" class="hidden cancellable" data-nf-dialog='{"resizable": "false", "responsive": {"x": "false", "y": "false"}}'>
|
||||
<div id="shell-dialog" class="hidden cancellable" data-nf-dialog='{"responsive": {"x": "false", "y": "false"}}'>
|
||||
<div id="shell-container" class="dialog-content">
|
||||
<div id="shell-close-container">
|
||||
<button id="shell-undock-button" class="undock-normal pointer " title="Open in New Window">
|
||||
|
|
|
|||
|
|
@ -15,18 +15,18 @@
|
|||
limitations under the License.
|
||||
--%>
|
||||
<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
|
||||
<div id="status-history-dialog" class="hidden" data-nf-dialog='{"resizable": "true", "glasspane": "true", "responsive": {"x": "false", "y": "false"}}'>
|
||||
<div id="status-history-dialog" class="hidden large-dialog">
|
||||
<div class="dialog-content">
|
||||
<div id="status-history-details"></div>
|
||||
<div id="status-history-container">
|
||||
<div id="status-history-refresh-container">
|
||||
<button id="status-history-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
|
||||
<div id="status-history-last-refreshed-container" class="last-refreshed-container">
|
||||
Last updated: <span id="status-history-last-refreshed"></span>
|
||||
</div>
|
||||
<div id="status-history-loading-container" class="loading-container"></div>
|
||||
<div id="status-history-metric-combo"></div>
|
||||
<div id="status-history-refresh-container">
|
||||
<button id="status-history-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
|
||||
<div id="status-history-last-refreshed-container" class="last-refreshed-container">
|
||||
Last updated: <span id="status-history-last-refreshed"></span>
|
||||
</div>
|
||||
<div id="status-history-loading-container" class="loading-container"></div>
|
||||
<div id="status-history-metric-combo"></div>
|
||||
</div>
|
||||
<div id="status-history-container">
|
||||
<div id="status-history-chart-container"></div>
|
||||
<div id="status-history-chart-control-container"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,6 @@
|
|||
*/
|
||||
/* status history dialog */
|
||||
|
||||
#status-history-dialog {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
#status-history-containment {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -30,8 +26,10 @@
|
|||
}
|
||||
|
||||
#status-history-refresh-container {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 40%;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
#status-history-loading-container {
|
||||
|
|
@ -58,17 +56,18 @@
|
|||
|
||||
#status-history-metric-combo {
|
||||
float: right;
|
||||
width: 175px;
|
||||
}
|
||||
|
||||
#status-history-container {
|
||||
float: left;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 40%;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
#status-history-chart-container {
|
||||
width: 100%;
|
||||
height: 325px;
|
||||
border: 1px solid #aaa;
|
||||
height: 265px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
|
|
@ -81,8 +80,11 @@
|
|||
}
|
||||
|
||||
#status-history-details {
|
||||
float: left;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 60%;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
div.status-history-detail {
|
||||
|
|
@ -115,12 +117,10 @@ div.detail-item-value {
|
|||
|
||||
#status-history-chart-control-container {
|
||||
height: 125px;
|
||||
border: 1px solid #aaa;
|
||||
background-color: #fff;
|
||||
margin-top: 5px;
|
||||
cursor: default;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.legend-entry {
|
||||
|
|
|
|||
|
|
@ -77,13 +77,11 @@
|
|||
|
||||
.dialog-content {
|
||||
position: absolute;
|
||||
top: 66px;
|
||||
top: 76px;
|
||||
bottom: 52px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
overflow-y: auto;
|
||||
/*padding: 10px 20px 20px 20px;*/
|
||||
/*overflow: auto;*/
|
||||
}
|
||||
|
||||
.dialog-buttons {
|
||||
|
|
|
|||
|
|
@ -79,7 +79,6 @@
|
|||
* "fullscreen-height": "420px", //optional, default is original dialog height (accepts 'px' values)
|
||||
* "fullscreen-width": "470px", //optional, default is original dialog width (accepts 'px' values)
|
||||
* },
|
||||
* "resizeable": "false", //optional, default false
|
||||
* "glasspane": "false" //optional, displays a modal glasspane behind the dialog...default true
|
||||
* }
|
||||
*
|
||||
|
|
@ -323,19 +322,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -229,18 +229,31 @@ nf.StatusHistory = (function () {
|
|||
$('#status-history-dialog').data('status-history', statusHistory);
|
||||
|
||||
// update the chart
|
||||
updateChart(statusHistory);
|
||||
updateChart();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var getChartMaxHeight = function () {
|
||||
return $('body').height() - $('#status-history-chart-control-container').outerHeight() -
|
||||
$('#status-history-refresh-container').outerHeight() -
|
||||
parseInt($('#status-history-chart-control-container').css('margin-top'), 10) -
|
||||
parseInt($('.dialog-content').css('top')) - parseInt($('.dialog-content').css('bottom'));
|
||||
};
|
||||
|
||||
var getChartMaxWidth = function () {
|
||||
return $('body').width() - $('#status-history-details').innerWidth() -
|
||||
parseInt($('#status-history-dialog').css('left'), 10) -
|
||||
parseInt($('.dialog-content').css('left')) - parseInt($('.dialog-content').css('right'));
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the chart with the specified status history and the selected field.
|
||||
*
|
||||
* @param {type} statusHistory
|
||||
*/
|
||||
var updateChart = function (statusHistory) {
|
||||
var updateChart = function () {
|
||||
var statusHistory = $('#status-history-dialog').data('status-history');
|
||||
|
||||
// get the selected descriptor
|
||||
var selectedDescriptor = statusHistory.selectedDescriptor;
|
||||
|
||||
|
|
@ -255,7 +268,7 @@ nf.StatusHistory = (function () {
|
|||
|
||||
var margin = {
|
||||
top: 15,
|
||||
right: 10,
|
||||
right: 20,
|
||||
bottom: 25,
|
||||
left: 75
|
||||
};
|
||||
|
|
@ -349,8 +362,18 @@ nf.StatusHistory = (function () {
|
|||
}
|
||||
|
||||
// calculate the dimensions
|
||||
var width = chartContainer.parent().width() - margin.left - margin.right;
|
||||
var height = chartContainer.height() - margin.top - margin.bottom;
|
||||
var width = chartContainer.parent().outerWidth() - margin.left - margin.right;
|
||||
var height = chartContainer.outerHeight() - margin.top - margin.bottom;
|
||||
|
||||
maxWidth = getChartMaxWidth();
|
||||
if (width > maxWidth) {
|
||||
width = maxWidth;
|
||||
}
|
||||
|
||||
maxHeight = getChartMaxHeight();
|
||||
if (height > maxHeight) {
|
||||
height = maxHeight;
|
||||
}
|
||||
|
||||
// define the x axis for the main chart
|
||||
var x = d3.time.scale()
|
||||
|
|
@ -384,9 +407,8 @@ nf.StatusHistory = (function () {
|
|||
// build the chart svg
|
||||
var chartSvg = d3.select('#status-history-chart-container').append('svg')
|
||||
.attr('style', 'pointer-events: none;')
|
||||
.attr('width', width + margin.left + margin.right)
|
||||
.attr('height', height + margin.top + margin.bottom);
|
||||
|
||||
.attr('width', chartContainer.parent().width())
|
||||
.attr('height', chartContainer.innerHeight());
|
||||
// define a clip the path
|
||||
var clipPath = chartSvg.append('defs').append('clipPath')
|
||||
.attr('id', 'clip')
|
||||
|
|
@ -502,7 +524,7 @@ nf.StatusHistory = (function () {
|
|||
|
||||
// the container for the main chart control
|
||||
var chartControlContainer = $('#status-history-chart-control-container').empty();
|
||||
var controlHeight = chartControlContainer.height() - margin.top - margin.bottom;
|
||||
var controlHeight = chartControlContainer.innerHeight() - margin.top - margin.bottom;
|
||||
|
||||
var xControl = d3.time.scale()
|
||||
.range([0, width]);
|
||||
|
|
@ -534,7 +556,7 @@ nf.StatusHistory = (function () {
|
|||
|
||||
// build the svg
|
||||
var controlChartSvg = d3.select('#status-history-chart-control-container').append('svg')
|
||||
.attr('width', width + margin.left + margin.right)
|
||||
.attr('width', chartContainer.parent().width())
|
||||
.attr('height', controlHeight + margin.top + margin.bottom);
|
||||
|
||||
// build the control chart
|
||||
|
|
@ -841,7 +863,7 @@ nf.StatusHistory = (function () {
|
|||
// handle resizing
|
||||
// ---------------
|
||||
|
||||
var maxWidth, maxHeight, resizeExtent;
|
||||
var maxWidth, maxHeight, resizeExtent, dialog;
|
||||
chartContainer.append('<div class="ui-resizable-handle ui-resizable-se"></div>').resizable({
|
||||
minWidth: 425,
|
||||
minHeight: 150,
|
||||
|
|
@ -849,73 +871,75 @@ nf.StatusHistory = (function () {
|
|||
'se': '.ui-resizable-se'
|
||||
},
|
||||
start: function (e, ui) {
|
||||
var helperOffset = ui.helper.offset();
|
||||
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();
|
||||
|
||||
// calculate the max width of the component
|
||||
maxWidth = $('body').width() - helperOffset.left - dialogOuter - dialogContentPaddingRight - chartOuter;
|
||||
|
||||
// calculate the max height of the component
|
||||
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()) {
|
||||
resizeExtent = brush.extent();
|
||||
}
|
||||
},
|
||||
resize: function (e, ui) {
|
||||
|
||||
// -----------
|
||||
// containment
|
||||
// -----------
|
||||
dialog = $('#status-history-dialog');
|
||||
var nfDialog = {};
|
||||
if (nf.Common.isDefinedAndNotNull(dialog.data('nf-dialog'))) {
|
||||
nfDialog = dialog.data('nf-dialog');
|
||||
}
|
||||
nfDialog['min-width'] = (dialog.width()/$(window).width())*100 + '%';
|
||||
nfDialog['min-height'] = (dialog.height()/$(window).height())*100 + '%';
|
||||
nfDialog.responsive['fullscreen-width'] = dialog.outerWidth() + 'px';
|
||||
nfDialog.responsive['fullscreen-height'] = dialog.outerHeight() + 'px';
|
||||
|
||||
maxWidth = getChartMaxWidth();
|
||||
if (ui.helper.width() > maxWidth) {
|
||||
ui.helper.width(maxWidth);
|
||||
|
||||
nfDialog.responsive['fullscreen-width'] = $(window).width() + 'px';
|
||||
nfDialog['min-width'] = '100%';
|
||||
}
|
||||
|
||||
maxHeight = getChartMaxHeight();
|
||||
if (ui.helper.height() > maxHeight) {
|
||||
ui.helper.height(maxHeight);
|
||||
|
||||
nfDialog.responsive['fullscreen-height'] = $(window).height() + 'px';
|
||||
nfDialog['min-height'] = '100%';
|
||||
}
|
||||
|
||||
// -------------
|
||||
// control chart
|
||||
// -------------
|
||||
nfDialog['min-width'] = (parseInt(nfDialog['min-width'], 10) >= 100) ? '100%': nfDialog['min-width'];
|
||||
nfDialog['min-height'] = (parseInt(nfDialog['min-height'], 10) >= 100) ? '100%': nfDialog['min-height'];
|
||||
|
||||
chartControlContainer.width(chartContainer.width());
|
||||
//persist data attribute
|
||||
dialog.data('nfDialog', nfDialog);
|
||||
|
||||
// ----------------------
|
||||
// status history details
|
||||
// status history dialog
|
||||
// ----------------------
|
||||
|
||||
resizeDetailsContainer();
|
||||
dialog.css('min-width', (chartContainer.outerWidth() + $('#status-history-details').outerWidth() + 40));
|
||||
dialog.css('min-height', (chartContainer.outerHeight() +
|
||||
$('#status-history-refresh-container').outerHeight() + $('#status-history-chart-control-container').outerHeight() +
|
||||
$('.dialog-buttons').outerHeight() + $('.dialog-header').outerHeight() + 40 + 5));
|
||||
|
||||
dialog.center();
|
||||
},
|
||||
stop: function () {
|
||||
|
||||
// ----------------------
|
||||
// status history details
|
||||
// ----------------------
|
||||
|
||||
resizeDetailsContainer();
|
||||
|
||||
// ----------
|
||||
// main chart
|
||||
// ----------
|
||||
|
||||
// determine the new width/height
|
||||
width = chartContainer.width() - margin.left - margin.right;
|
||||
height = chartContainer.height() - margin.top - margin.bottom;
|
||||
width = chartContainer.outerWidth() - margin.left - margin.right;
|
||||
height = chartContainer.outerHeight() - margin.top - margin.bottom;
|
||||
|
||||
// update the range
|
||||
x.range([0, width]);
|
||||
y.range([height, 0]);
|
||||
|
||||
// update the size of the chart
|
||||
chartSvg.attr('width', width + margin.left + margin.right)
|
||||
.attr('height', height + margin.top + margin.bottom);
|
||||
chartSvg.attr('width', chartContainer.parent().width())
|
||||
.attr('height', chartContainer.innerHeight());
|
||||
|
||||
// update the size of the clipper
|
||||
clipPath.attr('width', width)
|
||||
|
|
@ -936,7 +960,7 @@ nf.StatusHistory = (function () {
|
|||
yControl.range([controlHeight, 0]);
|
||||
|
||||
// update the size of the control chart
|
||||
controlChartSvg.attr('width', width + margin.left + margin.right)
|
||||
controlChartSvg.attr('width', chartContainer.parent().width())
|
||||
.attr('height', controlHeight + margin.top + margin.bottom);
|
||||
|
||||
// update the chart lines
|
||||
|
|
@ -961,11 +985,15 @@ nf.StatusHistory = (function () {
|
|||
|
||||
// reset the resize extent
|
||||
resizeExtent = null;
|
||||
|
||||
// resize chart container
|
||||
chartContainer.width(Math.round( chartContainer.parent().width()));
|
||||
chartControlContainer.width(Math.round( chartContainer.parent().width()));
|
||||
|
||||
// toggle scrollable style
|
||||
nf.Common.toggleScrollable(dialog.find('.dialog-content').get(0));
|
||||
}
|
||||
});
|
||||
|
||||
// set the initial size of the details container
|
||||
resizeDetailsContainer();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -1010,17 +1038,6 @@ nf.StatusHistory = (function () {
|
|||
return totalValue / snapshotCount;
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the size of the details container
|
||||
*/
|
||||
var resizeDetailsContainer = function () {
|
||||
var detailsContainer = $('#status-history-details');
|
||||
var detailsVerticalOffset = detailsContainer.outerWidth() - detailsContainer.width();
|
||||
|
||||
// update the height but account for the offset (border/padding/etc)
|
||||
$('#status-history-details').height($('#status-history-container').height() - detailsVerticalOffset);
|
||||
};
|
||||
|
||||
/**
|
||||
* Builds a details container.
|
||||
*
|
||||
|
|
@ -1107,9 +1124,6 @@ nf.StatusHistory = (function () {
|
|||
instances = null;
|
||||
}
|
||||
}
|
||||
}).draggable({
|
||||
cancel: '#status-history-chart-container, #status-history-chart-control-container, div.status-history-detail, div.button, div.combo, div.summary-refresh',
|
||||
containment: 'parent'
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue