You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by mc...@apache.org on 2016/07/19 11:34:13 UTC
nifi git commit: [NIFI-2105] [NIFI-2106] fix status history dialog
issues. This closes #673
Repository: nifi
Updated Branches:
refs/heads/master e308c6464 -> deb2819bf
[NIFI-2105] [NIFI-2106] fix status history dialog issues. This closes #673
Project: http://git-wip-us.apache.org/repos/asf/nifi/repo
Commit: http://git-wip-us.apache.org/repos/asf/nifi/commit/deb2819b
Tree: http://git-wip-us.apache.org/repos/asf/nifi/tree/deb2819b
Diff: http://git-wip-us.apache.org/repos/asf/nifi/diff/deb2819b
Branch: refs/heads/master
Commit: deb2819bfbd77557a6ee70186bd4d875144ecb13
Parents: e308c64
Author: Scott Aslan <ja...@hortonworks.com>
Authored: Mon Jul 18 18:37:53 2016 -0400
Committer: Matt Gilman <ma...@gmail.com>
Committed: Tue Jul 19 07:33:34 2016 -0400
----------------------------------------------------------------------
.../webapp/WEB-INF/partials/canvas/shell.jsp | 2 +-
.../WEB-INF/partials/status-history-dialog.jsp | 18 +--
.../src/main/webapp/css/status-history.css | 30 ++--
.../webapp/js/jquery/modal/jquery.modal.css | 4 +-
.../main/webapp/js/jquery/modal/jquery.modal.js | 14 --
.../src/main/webapp/js/nf/nf-status-history.js | 136 ++++++++++---------
6 files changed, 101 insertions(+), 103 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/nifi/blob/deb2819b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/shell.jsp
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/shell.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/shell.jsp
index 4673178..371754c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/shell.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/shell.jsp
@@ -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">
http://git-wip-us.apache.org/repos/asf/nifi/blob/deb2819b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/status-history-dialog.jsp
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/status-history-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/status-history-dialog.jsp
index 1cd4a6f..4b227d0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/status-history-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/status-history-dialog.jsp
@@ -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>
http://git-wip-us.apache.org/repos/asf/nifi/blob/deb2819b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/status-history.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/status-history.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/status-history.css
index 8643a9a..27d1869 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/status-history.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/status-history.css
@@ -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 {
http://git-wip-us.apache.org/repos/asf/nifi/blob/deb2819b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
index d4ad1a6..2af4522 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
@@ -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 {
http://git-wip-us.apache.org/repos/asf/nifi/blob/deb2819b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
index 779849f..af05da5 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
@@ -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;
http://git-wip-us.apache.org/repos/asf/nifi/blob/deb2819b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
index 8729958..88aa631 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
@@ -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();
};
/**
@@ -1011,17 +1039,6 @@ nf.StatusHistory = (function () {
};
/**
- * 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.
*
* @param {type} label
@@ -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'
});
},