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

[NIFI-2599] Enhance Status History Dialog. This closes #894

This commit is contained in:
Scott Aslan 2016-08-23 10:40:23 -04:00 committed by Matt Gilman
parent 23350543ff
commit 3f60eac544
6 changed files with 670 additions and 700 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/status-history-dialog.jsp
View File

@ -16,16 +16,16 @@
--%>
<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<div id="status-history-dialog" class="hidden large-dialog">
<div class="dialog-content">
<div id="status-history-details"></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:&nbsp;<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 class="dialog-content">
<div id="status-history-details"></div>
<div id="status-history-metric-combo"></div>
<div id="status-history-container">
<div id="status-history-chart-container"></div>
<div id="status-history-chart-control-container"></div>

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

@ -190,7 +190,7 @@ md-toolbar.md-small .md-toolbar-tools {
font-style: normal;
font-weight: normal;
font-size: 12px;
max-width: 250px;
max-width: 130px;
text-overflow: ellipsis;
line-height: normal;
overflow: hidden;

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

@ -27,9 +27,9 @@
#status-history-refresh-container {
position: absolute;
top: 0px;
left: 40%;
right: 0px;
left: 20px;
bottom: 20px;
z-index: 1;
}
#status-history-loading-container {
@ -57,6 +57,7 @@
#status-history-metric-combo {
float: right;
width: 250px;
}
#status-history-container {
@ -68,7 +69,6 @@
}
#status-history-chart-container {
height: 265px;
background-color: #fff;
overflow: hidden;
cursor: default;
@ -86,6 +86,11 @@
left: 0px;
right: 60%;
bottom: 0px;
overflow-y: auto;
}
#status-history-dialog > .dialog-content {
overflow: visible;
}
div.status-history-detail {
@ -132,7 +137,6 @@ div.legend-entry {
div.legend-label {
font-weight: bold;
width: 240px;
overflow: hidden;
white-space: nowrap;
line-height: normal;

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

@ -463,13 +463,13 @@
nfDialog.glasspane = glasspane = 'transparent';
}
if (!$('body').find("[data-nf-dialog-parent='" + dialog.attr('id') + "']").is(':visible')) {
//create glass pane overlay
var modalGlassMarkup = '<div data-nf-dialog-parent="' +
dialog.attr('id') + '" class="modal-glass" style="background-color: ' + glasspane + ';"></div>';
var modalGlass = $(modalGlassMarkup);
modalGlass.css('z-index', zIndex - 1).appendTo($('body'));
$('<div></div>').attr('data-nf-dialog-parent', dialog.attr('id')).addClass("modal-glass").css({
"background-color": glasspane,
"z-index": zIndex - 1
}).appendTo($('body'));
}
//persist data attribute
dialog.data('nfDialog', nfDialog);

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

@ -233,6 +233,13 @@ nf.StatusHistory = (function () {
}
}
});
$('#status-history-dialog').modal('show');
};
var getChartMinHeight = function () {
return $('#status-history-chart-container').parent().outerHeight() - $('#status-history-chart-control-container').outerHeight() -
parseInt($('#status-history-chart-control-container').css('margin-top'), 10);
};
var getChartMaxHeight = function () {
@ -252,7 +259,11 @@ nf.StatusHistory = (function () {
* Updates the chart with the specified status history and the selected field.
*/
var updateChart = function () {
var statusHistory = $('#status-history-dialog').data('status-history');
var statusHistoryDialog = $('#status-history-dialog');
if (statusHistoryDialog.is(':visible')) {
var statusHistory = statusHistoryDialog.data('status-history');
// get the selected descriptor
var selectedDescriptor = statusHistory.selectedDescriptor;
@ -348,24 +359,21 @@ nf.StatusHistory = (function () {
// main chart
// ----------
var statusHistoryDialog = $('#status-history-dialog');
// show/center the dialog if necessary
if (!statusHistoryDialog.is(':visible')) {
statusHistoryDialog.modal('show');
}
// the container for the main chart
var chartContainer = $('#status-history-chart-container').empty();
if (chartContainer.hasClass('ui-resizable')) {
chartContainer.resizable('destroy');
chartContainer.removeAttr( "style" );
}
// calculate the dimensions
var width = chartContainer.parent().outerWidth() - margin.left - margin.right;
chartContainer.height(getChartMinHeight());
// determine the new width/height
var width = chartContainer.outerWidth() - margin.left - margin.right;
var height = chartContainer.outerHeight() - margin.top - margin.bottom;
maxWidth = getChartMaxWidth();
maxWidth = $('#status-history-container').width();
if (width > maxWidth) {
width = maxWidth;
}
@ -394,6 +402,7 @@ nf.StatusHistory = (function () {
.tickFormat(formatters[selectedDescriptor.formatter])
.orient('left');
// status line
var line = d3.svg.line()
.interpolate('monotone')
@ -518,6 +527,17 @@ nf.StatusHistory = (function () {
});
});
// update the size of the chart
chartSvg.attr('width', chartContainer.parent().width())
.attr('height', chartContainer.innerHeight());
// update the size of the clipper
clipPath.attr('width', width)
.attr('height', height);
// update the position of the x axis
chart.select('.x.axis').attr('transform', 'translate(0, ' + height + ')');
// -------------
// control chart
// -------------
@ -863,7 +883,7 @@ nf.StatusHistory = (function () {
// handle resizing
// ---------------
var maxWidth, maxHeight, resizeExtent, dialog;
var maxWidth, maxHeight, minHeight, resizeExtent, dialog;
chartContainer.append('<div class="ui-resizable-handle ui-resizable-se"></div>').resizable({
minWidth: 425,
minHeight: 150,
@ -885,8 +905,8 @@ nf.StatusHistory = (function () {
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['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';
@ -906,8 +926,13 @@ nf.StatusHistory = (function () {
nfDialog['min-height'] = '100%';
}
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'];
minHeight = getChartMinHeight();
if (ui.helper.height() < minHeight) {
ui.helper.height(minHeight);
}
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'];
//persist data attribute
dialog.data('nfDialog', nfDialog);
@ -923,77 +948,9 @@ nf.StatusHistory = (function () {
dialog.center();
},
stop: function () {
// ----------
// main chart
// ----------
// determine the new width/height
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', chartContainer.parent().width())
.attr('height', chartContainer.innerHeight());
// update the size of the clipper
clipPath.attr('width', width)
.attr('height', height);
// update the position of the x axis
chart.select('.x.axis').attr('transform', 'translate(0, ' + height + ')');
// -------------
// control chart
// -------------
// determine the new width/height
controlHeight = chartControlContainer.height() - margin.top - margin.bottom;
// update the range
xControl.range([0, width]);
yControl.range([controlHeight, 0]);
// update the size of the control chart
controlChartSvg.attr('width', chartContainer.parent().width())
.attr('height', controlHeight + margin.top + margin.bottom);
// update the chart lines
controlStatus.selectAll('.chart-line').attr('d', function (d) {
return controlLine(d.values);
stop: updateChart
});
// update the axes
control.select('.x.axis').call(xControlAxis);
control.select('.y.axis').call(yControlAxis);
// restore the extent if necessary
if (nf.Common.isDefinedAndNotNull(resizeExtent)) {
brush.extent(resizeExtent);
}
// update the brush
control.select('.brush').call(brush);
// invoking the brush will trigger appropriate redrawing of the main chart
brushed();
// 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));
}
});
};
/**
@ -1122,9 +1079,17 @@ nf.StatusHistory = (function () {
brushExtent = null;
descriptor = null;
instances = null;
}
},
open: updateChart
}
});
$(window).on('resize', function (e) {
if (e.target === window) {
updateChart();
}
nf.Common.toggleScrollable($('#status-history-details').get(0));
})
},
/**

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

@ -276,6 +276,7 @@ nf.SummaryTable = (function () {
break;
case 'disabled':
classes += ' icon icon-enable-false';
break;
case 'invalid':
classes += ' fa fa-warning';
break;