Skip to content

Commit

Permalink
NIFI-5661: Adding Load Balance config UI
Browse files Browse the repository at this point in the history 
Incorporated review comments.
Move combo options to a common place.

This closes apache#3046
  • Loading branch information
@ijokarumawak @mcgilman
ijokarumawak authored and mcgilman committed Oct 11, 2018
1 parent a6f7222 commit 8a751e8
Show file tree
Hide file tree
Showing 8 changed files with 341 additions and 46 deletions.
59 changes: 47 additions & 12 deletions ...nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/connection-configuration.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,22 +42,57 @@
<input type="text" id="flow-file-expiration" name="flow-file-expiration" class="setting-input"/>
</div>
</div>
<div class="setting">
<div class="setting-name">
Back pressure object threshold
<div class="fa fa-question-circle" alt="Info" title="The maximum number of objects that can be queued before back pressure is applied."></div>
<div class="multi-column-settings">
<div class="setting">
<div class="setting-name">
Back Pressure<br/>Object threshold
<div class="fa fa-question-circle" alt="Info" title="The maximum number of objects that can be queued before back pressure is applied."></div>
</div>
<div class="setting-field">
<input type="text" id="back-pressure-object-threshold" name="back-pressure-object-threshold" class="setting-input"/>
</div>
</div>
<div class="setting-field">
<input type="text" id="back-pressure-object-threshold" name="back-pressure-object-threshold" class="setting-input"/>
<div class="separator">&nbsp;</div>
<div class="setting">
<div class="setting-name">
&nbsp;<br/>Size threshold
<div class="fa fa-question-circle" alt="Info" title="The maximum data size of objects that can be queued before back pressure is applied."></div>
</div>
<div class="setting-field">
<input type="text" id="back-pressure-data-size-threshold" name="back-pressure-data-size-threshold" class="setting-input"/>
</div>
</div>
</div>
<div class="setting">
<div class="setting-name">
Back pressure data size threshold
<div class="fa fa-question-circle" alt="Info" title="The maximum data size of objects that can be queued before back pressure is applied."></div>
<div id="load-balance-settings">
<div class="multi-column-settings">
<div class="setting">
<div class="setting-name">
Load Balance Strategy
<div class="fa fa-question-circle" alt="Info" title="How to load balance the data in this Connection across the nodes in the cluster."></div>
</div>
<div class="setting-field">
<div id="load-balance-strategy-combo"></div>
</div>
</div>
<div id="load-balance-partition-attribute-setting-separator" class="separator">&nbsp;</div>
<div id="load-balance-partition-attribute-setting" class="setting">
<div class="setting-name">
Attribute Name
<div class="fa fa-question-circle" alt="Info" title="The FlowFile Attribute to use for determining which node a FlowFile will go to."></div>
</div>
<div class="setting-field">
<input type="text" id="load-balance-partition-attribute" name="load-balance-partition-attribute" class="setting-input"/>
</div>
</div>
</div>
<div class="setting-field">
<input type="text" id="back-pressure-data-size-threshold" name="back-pressure-data-size-threshold" class="setting-input"/>
<div id="load-balance-compression-setting" class="setting">
<div class="setting-name">
Load Balance Compression
<div class="fa fa-question-circle" alt="Info" title="Whether or not data should be compressed when being transferred between nodes in the cluster."></div>
</div>
<div class="setting-field">
<div id="load-balance-compression-combo"></div>
</div>
</div>
</div>
</div>
Expand Down
67 changes: 51 additions & 16 deletions ...fi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/connection-details.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,25 +83,60 @@
</div>
<div class="clear"></div>
</div>
<div class="setting">
<div class="setting-name">
Back pressure object threshold
<div class="fa fa-question-circle" alt="Info" title="The maximum number of objects that can be queued before back pressure is applied."></div>
<div class="multi-column-settings">
<div class="setting">
<div class="setting-name">
Back Pressure<br/>Object threshold
<div class="fa fa-question-circle" alt="Info" title="The maximum number of objects that can be queued before back pressure is applied."></div>
</div>
<div class="setting-field">
<span id="read-only-back-pressure-object-threshold"></span>
</div>
<div class="clear"></div>
</div>
<div class="separator">&nbsp;</div>
<div class="setting">
<div class="setting-name">
&nbsp;<br/>Size threshold
<div class="fa fa-question-circle" alt="Info" title="The maximum data size of objects that can be queued before back pressure is applied."></div>
</div>
<div class="setting-field">
<span id="read-only-back-pressure-data-size-threshold"></span>
</div>
<div class="clear"></div>
</div>
<div class="setting-field">
<span id="read-only-back-pressure-object-threshold"></span>
</div>
<div class="clear"></div>
</div>
<div class="setting">
<div class="setting-name">
Back pressure data size threshold
<div class="fa fa-question-circle" alt="Info" title="The maximum data size of objects that can be queued before back pressure is applied."></div>
<div id="read-only-load-balance-settings">
<div class="multi-column-settings">
<div class="setting">
<div class="setting-name">
Load Balance Strategy
<div class="fa fa-question-circle" alt="Info" title="How to load balance the data in this Connection across the nodes in the cluster."></div>
</div>
<div class="setting-field">
<div id="read-only-load-balance-strategy"></div>
</div>
</div>
<div class="separator">&nbsp;</div>
<div id="read-only-load-balance-partition-attribute-setting" class="setting">
<div class="setting-name">
Attribute Name
<div class="fa fa-question-circle" alt="Info" title="The FlowFile Attribute to use for determining which node a FlowFile will go to."></div>
</div>
<div class="setting-field">
<span id="read-only-load-balance-partition-attribute"></span>
</div>
</div>
</div>
<div id="read-only-load-balance-compression-setting" class="setting">
<div class="setting-name">
Load Balance Compression
<div class="fa fa-question-circle" alt="Info" title="Whether or not data should be compressed when being transferred between nodes in the cluster."></div>
</div>
<div class="setting-field">
<div id="read-only-load-balance-compression"></div>
</div>
</div>
<div class="setting-field">
<span id="read-only-back-pressure-data-size-threshold"></span>
</div>
<div class="clear"></div>
</div>
</div>
<div class="spacer">&nbsp;</div>
Expand Down
16 changes: 14 additions & 2 deletions ...ork-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
z-index: 1301;
display: none;
width: 700px;
height: 400px;
height: 500px;
}

#connection-details div.configuration-tab {
Expand All @@ -40,4 +40,16 @@
#connection-details div.relationship-name {
display: inline-block;
line-height: normal;
}
}

.multi-column-settings {
display: flex;
}

.multi-column-settings .setting {
flex-grow: 1;
}

.multi-column-settings .separator {
min-width: 5px;
}
16 changes: 14 additions & 2 deletions ...s/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -320,13 +320,25 @@ g.connection path.connection-path.unauthorized {
stroke-dasharray: 3,3;
}

text.connection-from-run-status, text.connection-to-run-status, text.expiration-icon {
text.connection-from-run-status, text.connection-to-run-status, text.expiration-icon, text.load-balance-icon {
fill: #728e9b;
font-family: FontAwesome;
font-size: 10px;
font-size: 12px;
text-shadow: 0 0 4px rgba(255,255,255,1);
}

text.load-balance-icon-active {
fill: #44a3cf
}

text.load-balance-icon-184 {
transform-origin: 189px 10px 0;
}

text.load-balance-icon-200 {
transform-origin: 205px 10px 0;
}

text.connection-from-run-status.is-missing-port, text.connection-to-run-status.is-missing-port {
fill: #cf9f5d;
}
Expand Down
62 changes: 58 additions & 4 deletions ...ramework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,22 @@
'd3',
'nf.ErrorHandler',
'nf.Common',
'nf.ClusterSummary',
'nf.Dialog',
'nf.Storage',
'nf.Client',
'nf.CanvasUtils',
'nf.Connection'],
function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfStorage, nfClient, nfCanvasUtils, nfConnection) {
return (nf.ConnectionConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfDialog, nfStorage, nfClient, nfCanvasUtils, nfConnection));
function ($, d3, nfErrorHandler, nfCommon, nfClusterSummary, nfDialog, nfStorage, nfClient, nfCanvasUtils, nfConnection) {
return (nf.ConnectionConfiguration = factory($, d3, nfErrorHandler, nfCommon, nfClusterSummary, nfDialog, nfStorage, nfClient, nfCanvasUtils, nfConnection));
});
} else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = (nf.ConnectionConfiguration =
factory(require('jquery'),
require('d3'),
require('nf.ErrorHandler'),
require('nf.Common'),
require('nf.ClusterSummary'),
require('nf.Dialog'),
require('nf.Storage'),
require('nf.Client'),
Expand All @@ -47,13 +49,14 @@
root.d3,
root.nf.ErrorHandler,
root.nf.Common,
root.nf.ClusterSummary,
root.nf.Dialog,
root.nf.Storage,
root.nf.Client,
root.nf.CanvasUtils,
root.nf.Connection);
}
}(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfStorage, nfClient, nfCanvasUtils, nfConnection) {
}(this, function ($, d3, nfErrorHandler, nfCommon, nfClusterSummary, nfDialog, nfStorage, nfClient, nfCanvasUtils, nfConnection) {
'use strict';

var nfBirdseye;
Expand Down Expand Up @@ -1007,6 +1010,10 @@
var backPressureObjectThreshold = $('#back-pressure-object-threshold').val();
var backPressureDataSizeThreshold = $('#back-pressure-data-size-threshold').val();
var prioritizers = $('#prioritizer-selected').sortable('toArray');
var loadBalanceStrategy = $('#load-balance-strategy-combo').combo('getSelectedOption').value;
var shouldLoadBalance = 'DO_NOT_LOAD_BALANCE' !== loadBalanceStrategy;
var loadBalancePartitionAttribute = shouldLoadBalance && 'PARTITION_BY_ATTRIBUTE' === loadBalanceStrategy ? $('#load-balance-partition-attribute').val() : '';
var loadBalanceCompression = shouldLoadBalance ? $('#load-balance-compression-combo').combo('getSelectedOption').value : 'DO_NOT_COMPRESS';

if (validateSettings()) {
var d = nfConnection.get(connectionId);
Expand All @@ -1025,7 +1032,10 @@
'flowFileExpiration': flowFileExpiration,
'backPressureDataSizeThreshold': backPressureDataSizeThreshold,
'backPressureObjectThreshold': backPressureObjectThreshold,
'prioritizers': prioritizers
'prioritizers': prioritizers,
'loadBalanceStrategy': loadBalanceStrategy,
'loadBalancePartitionAttribute': loadBalancePartitionAttribute,
'loadBalanceCompression': loadBalanceCompression
}
};

Expand Down Expand Up @@ -1099,6 +1109,10 @@
if (nfCommon.isBlank($('#back-pressure-data-size-threshold').val())) {
errors.push('Back pressure data size threshold must be specified');
}
if ($('#load-balance-strategy-combo').combo('getSelectedOption').value === 'PARTITION_BY_ATTRIBUTE'
&& nfCommon.isBlank($('#load-balance-partition-attribute').val())) {
errors.push('Cannot set Load Balance Strategy to "Partition by attribute" without providing a partitioning "Attribute Name"');
}

if (errors.length > 0) {
nfDialog.showOkDialog({
Expand Down Expand Up @@ -1222,6 +1236,32 @@
}]
});

// initialize the load balance strategy combo
$('#load-balance-strategy-combo').combo({
options: nfCommon.loadBalanceStrategyOptions,
select: function (selectedOption) {
// Show the appropriate configurations
if (selectedOption.value === 'PARTITION_BY_ATTRIBUTE') {
$('#load-balance-partition-attribute-setting-separator').show();
$('#load-balance-partition-attribute-setting').show();
} else {
$('#load-balance-partition-attribute-setting-separator').hide();
$('#load-balance-partition-attribute-setting').hide();
}
if (selectedOption.value === 'DO_NOT_LOAD_BALANCE') {
$('#load-balance-compression-setting').hide();
} else {
$('#load-balance-compression-setting').show();
}
}
});


// initialize the load balance compression combo
$('#load-balance-compression-combo').combo({
options: nfCommon.loadBalanceCompressionOptions
});

// load the processor prioritizers
$.ajax({
type: 'GET',
Expand Down Expand Up @@ -1393,6 +1433,20 @@
$('#back-pressure-object-threshold').val(connection.backPressureObjectThreshold);
$('#back-pressure-data-size-threshold').val(connection.backPressureDataSizeThreshold);

// select the load balance combos
if (nfClusterSummary.isConnectedToCluster()) {
$('#load-balance-strategy-combo').combo('setSelectedOption', {
value: connection.loadBalanceStrategy
});
$('#load-balance-compression-combo').combo('setSelectedOption', {
value: connection.loadBalanceCompression
});
$('#load-balance-partition-attribute').val(connection.loadBalancePartitionAttribute);
$('#load-balance-settings').show();
} else {
$('#load-balance-settings').hide();
}

// format the connection id
nfCommon.populateField('connection-id', connection.id);

Expand Down
Loading

0 comments on commit 8a751e8

Please sign in to comment.