NIFI-6126 - throttle requests to refresh the canvas to prevent too many server requests when holding down CTRL-R

* Added lodash utility library to leverage its throttle capability (and many other useful functions in the future).
* Made lodash available in all JSP's so it could be imported into nf-common (or any component for that matter).
* Added a throttle function to nf-common that just wraps _.throttle

This closes #3393
This commit is contained in:
Rob Fellows 2019-03-27 10:41:13 -04:00 committed by Matt Gilman
parent 1b196ea213
commit cb4fdc2ae1
No known key found for this signature in database
GPG Key ID: DF61EC19432AEE37
18 changed files with 193 additions and 9 deletions

View File

@ -2218,4 +2218,52 @@ style license.
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.
This product bundles 'lodash' which is available under an MIT license.
Copyright JS Foundation and other contributors <https://js.foundation/>
Based on Underscore.js, copyright Jeremy Ashkenas,
DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
This software consists of voluntary contributions made by many
individuals. For exact contribution history, see the revision history
available at https://github.com/lodash/lodash
The following license applies to all parts of this software except as
documented below:
====
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
====
Copyright and related rights for sample code are waived via CC0. Sample
code is defined as all source code displayed within the prose of the
documentation.
CC0: http://creativecommons.org/publicdomain/zero/1.0/
====
Files located in the node_modules and vendor directories are externally
maintained libraries used by this software which have their own
licenses; we recommend you read them, as their terms may differ from the
terms above.

View File

@ -804,3 +804,52 @@ For details see http://asm.ow2.org/asmdex-license.html
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
THE POSSIBILITY OF SUCH DAMAGE. THE POSSIBILITY OF SUCH DAMAGE.
This product bundles 'lodash' which is available under an MIT license.
Copyright JS Foundation and other contributors <https://js.foundation/>
Based on Underscore.js, copyright Jeremy Ashkenas,
DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
This software consists of voluntary contributions made by many
individuals. For exact contribution history, see the revision history
available at https://github.com/lodash/lodash
The following license applies to all parts of this software except as
documented below:
====
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
====
Copyright and related rights for sample code are waived via CC0. Sample
code is defined as all source code displayed within the prose of the
documentation.
CC0: http://creativecommons.org/publicdomain/zero/1.0/
====
Files located in the node_modules and vendor directories are externally
maintained libraries used by this software which have their own
licenses; we recommend you read them, as their terms may differ from the
terms above.

View File

@ -235,6 +235,10 @@
<include>url-search-params/build/url-search-params.js</include> <include>url-search-params/build/url-search-params.js</include>
<include>url-search-params/README.md</include> <include>url-search-params/README.md</include>
<include>url-search-params/LICENSE.txt</include> <include>url-search-params/LICENSE.txt</include>
<include>lodash-core/distrib/lodash-core.min.js</include>
<include>lodash-core/distrib/README.md</include>
</includes> </includes>
</resource> </resource>
</resources> </resources>

View File

@ -427,6 +427,11 @@
"nomnom": "1.8.1" "nomnom": "1.8.1"
} }
}, },
"lodash-core": {
"version": "4.17.11",
"resolved": "https://registry.npmjs.org/lodash-core/-/lodash-core-4.17.11.tgz",
"integrity": "sha512-8ilprNE67U1REh0wQHL0z37qXdsxuFXjvxehg79Mh/MQgNJ+C1muXtysSKpt9sCxXZUSiwifEC82Vtzf2GSSKQ=="
},
"nomnom": { "nomnom": {
"version": "1.8.1", "version": "1.8.1",
"resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.8.1.tgz", "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.8.1.tgz",

View File

@ -34,6 +34,7 @@
"jquery": "3.1.1", "jquery": "3.1.1",
"reset.css": "2.0.2", "reset.css": "2.0.2",
"jquery-form": "3.50.0", "jquery-form": "3.50.0",
"lodash-core": "4.17.11",
"url-search-params": "0.6.1", "url-search-params": "0.6.1",
"jsonlint": "1.6.2", "jsonlint": "1.6.2",
"qtip2": "3.0.3", "qtip2": "3.0.3",

View File

@ -721,3 +721,53 @@ This product bundles 'jsonlint' which is available under an MIT license.
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE. THE SOFTWARE.
This product bundles 'lodash' which is available under an MIT license.
Copyright JS Foundation and other contributors <https://js.foundation/>
Based on Underscore.js, copyright Jeremy Ashkenas,
DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
This software consists of voluntary contributions made by many
individuals. For exact contribution history, see the revision history
available at https://github.com/lodash/lodash
The following license applies to all parts of this software except as
documented below:
====
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
====
Copyright and related rights for sample code are waived via CC0. Sample
code is defined as all source code displayed within the prose of the
documentation.
CC0: http://creativecommons.org/publicdomain/zero/1.0/
====
Files located in the node_modules and vendor directories are externally
maintained libraries used by this software which have their own
licenses; we recommend you read them, as their terms may differ from the
terms above.

View File

@ -38,6 +38,7 @@
<script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script> <script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script>
<script type="text/javascript" src="js/jquery/jquery.each.js"></script> <script type="text/javascript" src="js/jquery/jquery.each.js"></script>
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script> <script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/lodash-core/distrib/lodash-core.min.js"></script>
<script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script> <script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script>
<script type="text/javascript" src="assets/angular/angular.min.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-messages/angular-messages.min.js"></script>

View File

@ -60,6 +60,7 @@
<script type="text/javascript" src="js/jquery/combo/jquery.combo.js?${project.version}"></script> <script type="text/javascript" src="js/jquery/combo/jquery.combo.js?${project.version}"></script>
<script type="text/javascript" src="js/jquery/modal/jquery.modal.js?${project.version}"></script> <script type="text/javascript" src="js/jquery/modal/jquery.modal.js?${project.version}"></script>
<script type="text/javascript" src="assets/jquery-minicolors/jquery.minicolors.min.js"></script> <script type="text/javascript" src="assets/jquery-minicolors/jquery.minicolors.min.js"></script>
<script type="text/javascript" src="assets/lodash-core/distrib/lodash-core.min.js"></script>
<script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script> <script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script>
<script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script> <script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script>
<script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script> <script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script>

View File

@ -42,6 +42,7 @@
<script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script> <script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script>
<script type="text/javascript" src="js/jquery/jquery.each.js"></script> <script type="text/javascript" src="js/jquery/jquery.each.js"></script>
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script> <script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/lodash-core/distrib/lodash-core.min.js"></script>
<script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script> <script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script>
<script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script> <script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script>
<script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script> <script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script>

View File

@ -40,6 +40,7 @@
<script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script> <script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script>
<script type="text/javascript" src="js/jquery/jquery.each.js"></script> <script type="text/javascript" src="js/jquery/jquery.each.js"></script>
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script> <script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/lodash-core/distrib/lodash-core.min.js"></script>
<script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script> <script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script>
<script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script> <script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script>
<script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script> <script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script>

View File

@ -40,6 +40,7 @@
<script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script> <script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script>
<script type="text/javascript" src="js/jquery/jquery.each.js"></script> <script type="text/javascript" src="js/jquery/jquery.each.js"></script>
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script> <script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/lodash-core/distrib/lodash-core.min.js"></script>
<script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script> <script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script>
<script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script> <script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script>
<script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script> <script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script>

View File

@ -39,6 +39,7 @@
<script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script> <script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script>
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script> <script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/nf/nf-namespace.js?${project.version}"></script> <script type="text/javascript" src="js/nf/nf-namespace.js?${project.version}"></script>
<script type="text/javascript" src="assets/lodash-core/distrib/lodash-core.min.js"></script>
${nf.login.script.tags} ${nf.login.script.tags}
</head> </head>
<body class="login-body"> <body class="login-body">

View File

@ -44,6 +44,7 @@
<script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script> <script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script>
<script type="text/javascript" src="js/jquery/jquery.each.js"></script> <script type="text/javascript" src="js/jquery/jquery.each.js"></script>
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script> <script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/lodash-core/distrib/lodash-core.min.js"></script>
<script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script> <script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script>
<script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script> <script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script>
<script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script> <script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script>

View File

@ -49,6 +49,7 @@
<script type="text/javascript" src="js/jquery/modal/jquery.modal.js?${project.version}"></script> <script type="text/javascript" src="js/jquery/modal/jquery.modal.js?${project.version}"></script>
<script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script> <script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script>
<script type="text/javascript" src="js/jquery/jquery.each.js"></script> <script type="text/javascript" src="js/jquery/jquery.each.js"></script>
<script type="text/javascript" src="assets/lodash-core/distrib/lodash-core.min.js"></script>
<script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script> <script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script>
<script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script> <script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script>
<script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script> <script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script>

View File

@ -40,6 +40,7 @@
<script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script> <script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script>
<script type="text/javascript" src="js/jquery/jquery.each.js"></script> <script type="text/javascript" src="js/jquery/jquery.each.js"></script>
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script> <script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/lodash-core/distrib/lodash-core.min.js"></script>
<script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script> <script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script>
<script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script> <script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script>
<script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script> <script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script>

View File

@ -42,6 +42,7 @@
<script type="text/javascript" src="js/jquery/modal/jquery.modal.js?${project.version}"></script> <script type="text/javascript" src="js/jquery/modal/jquery.modal.js?${project.version}"></script>
<script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script> <script type="text/javascript" src="js/jquery/jquery.ellipsis.js"></script>
<script type="text/javascript" src="js/jquery/jquery.each.js"></script> <script type="text/javascript" src="js/jquery/jquery.each.js"></script>
<script type="text/javascript" src="assets/lodash-core/distrib/lodash-core.min.js"></script>
<script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script> <script type="text/javascript" src="assets/qtip2/dist/jquery.qtip.min.js"></script>
<script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script> <script type="text/javascript" src="assets/slickgrid/lib/jquery.event.drag-2.3.0.js"></script>
<script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script> <script type="text/javascript" src="assets/slickgrid/plugins/slick.cellrangeselector.js"></script>

View File

@ -651,6 +651,9 @@
}); });
}); });
// don't let the reload action get called more than once every second
var throttledCanvasReload = nfCommon.throttle(nfActions.reload, 1000);
// listen for browser resize events to reset the graph size // listen for browser resize events to reset the graph size
$(window).on('resize', function (e) { $(window).on('resize', function (e) {
if (e.target === window) { if (e.target === window) {
@ -708,7 +711,7 @@
nfCommon.toggleScrollable(tabsContent.get(0)); nfCommon.toggleScrollable(tabsContent.get(0));
}); });
} }
}).on('keyup', function (evt) { }).on('keydown', function (evt) {
// if a dialog is open, disable canvas shortcuts // if a dialog is open, disable canvas shortcuts
if ($('.dialog').is(':visible') || $('#search-field').is(':focus')) { if ($('.dialog').is(':visible') || $('#search-field').is(':focus')) {
return; return;
@ -726,7 +729,7 @@
return; return;
} }
// ctrl-r // ctrl-r
nfActions.reload(); throttledCanvasReload();
// default prevented in nf-universal-capture.js // default prevented in nf-universal-capture.js
} else if (evt.keyCode === 65) { } else if (evt.keyCode === 65) {

View File

@ -22,20 +22,23 @@
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
define(['jquery', define(['jquery',
'd3', 'd3',
'nf.Storage'], 'nf.Storage',
function ($, d3, nfStorage) { 'lodash-core'],
return (nf.Common = factory($, d3, nfStorage)); function ($, d3, nfStorage, _) {
return (nf.Common = factory($, d3, nfStorage, _));
}); });
} else if (typeof exports === 'object' && typeof module === 'object') { } else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = (nf.Common = factory(require('jquery'), module.exports = (nf.Common = factory(require('jquery'),
require('d3'), require('d3'),
require('nf.Storage'))); require('nf.Storage'),
require('lodash-core')));
} else { } else {
nf.Common = factory(root.$, nf.Common = factory(root.$,
root.d3, root.d3,
root.nf.Storage); root.nf.Storage,
root._);
} }
}(this, function ($, d3, nfStorage) { }(this, function ($, d3, nfStorage, _) {
'use strict'; 'use strict';
$(document).ready(function () { $(document).ready(function () {
@ -1700,6 +1703,17 @@
return option.value === value; return option.value === value;
}); });
return nfCommon.isDefinedAndNotNull(matchedOption) ? matchedOption.text : undefined; return nfCommon.isDefinedAndNotNull(matchedOption) ? matchedOption.text : undefined;
},
/**
* Creates a throttled function that invokes at most once every wait milliseconds.
*
* @param func The function to throttle.
* @param wait The number of milliseconds to throttle invocations to.
* @returns {function} The throttled version of the function.
*/
throttle: function (func, wait) {
return _.throttle(func, wait);
} }
}; };