added dashboard option to control sync/async
Costa Tsaousis (ktsaou) committed
Oct 1, 2016 at 20:29 UTC
d3e8fb04955b90aeb2678454e96d3c7d771027ba
2 files changed
+65
-22
web/dashboard.js
+54
-19
@@ -328,7 +328,9 @@
328
pan_and_zoom_factor_multiplier_shift: 3.0,
329
pan_and_zoom_factor_multiplier_alt: 4.0,
330
331
- abort_ajax_on_scroll: false,
331
+ abort_ajax_on_scroll: false, // kill pending ajax page scroll
332
+ async_on_scroll: true, // sync/async onscroll handler
333
+ onscroll_worker_duration_threshold: 30, // time in ms, to consider slow the onscroll handler
334
335
setOptionCallback: function() { ; }
336
},
@@ -507,6 +509,8 @@
509
NETDATA.onscroll_updater_running = false;
510
NETDATA.onscroll_updater_last_run = 0;
511
NETDATA.onscroll_updater_watchdog = null;
512
+ NETDATA.onscroll_updater_max_duration = 0;
513
+ NETDATA.onscroll_updater_above_threshold_count = 0;
514
NETDATA.onscroll_updater = function() {
515
NETDATA.onscroll_updater_running = true;
516
NETDATA.onscroll_updater_count++;
@@ -514,30 +518,16 @@
518
519
var targets = NETDATA.options.targets;
520
var len = targets.length;
517
- while (len--)
518
- targets[len].isVisible();
519
-
520
- var end = new Date().getTime();
521
- // console.log('scroll No ' + NETDATA.onscroll_updater_count + ' calculation took ' + (end - start).toString() + ' ms');
522
- NETDATA.onscroll_updater_last_run = start;
523
- NETDATA.onscroll_updater_running = false;
524
- };
525
-
526
- NETDATA.onscroll = function() {
527
- // console.log('onscroll');
528
-
529
- NETDATA.options.last_page_scroll = new Date().getTime();
530
- NETDATA.options.auto_refresher_stop_until = 0;
531
-
532
- if(NETDATA.options.targets === null) return;
521
522
// when the user scrolls he sees that we have
523
// hidden all the not-visible charts
524
// using this little function we try to switch
525
// the charts back to visible quickly
526
+
527
+
528
if(NETDATA.options.abort_ajax_on_scroll === true) {
539
- var targets = NETDATA.options.targets;
540
- var len = targets.length;
529
+ // we have to cancel pending requests too
530
+
531
while (len--) {
532
if (targets[len]._updating === true) {
533
if (typeof targets[len].xhr !== 'undefined') {
@@ -550,6 +540,47 @@
540
}
541
}
542
else {
543
+ // just find which chart is visible
544
+
545
+ while (len--)
546
+ targets[len].isVisible();
547
+ }
548
+
549
+ var end = new Date().getTime();
550
+ // console.log('scroll No ' + NETDATA.onscroll_updater_count + ' calculation took ' + (end - start).toString() + ' ms');
551
+
552
+ if(NETDATA.options.current.async_on_scroll === false) {
553
+ var dt = end - start;
554
+ if(dt > NETDATA.onscroll_updater_max_duration) {
555
+ // console.log('max onscroll event handler duration increased to ' + dt);
556
+ NETDATA.onscroll_updater_max_duration = dt;
557
+ }
558
+
559
+ if(dt > NETDATA.options.current.onscroll_worker_duration_threshold) {
560
+ // console.log('slow: ' + dt);
561
+ NETDATA.onscroll_updater_above_threshold_count++;
562
+
563
+ if(NETDATA.onscroll_updater_above_threshold_count > 2 && NETDATA.onscroll_updater_above_threshold_count * 100 / NETDATA.onscroll_updater_count > 2) {
564
+ NETDATA.options.current.async_on_scroll = true;
565
+ console.log('NETDATA: your browser is slow - enabling asynchronous onscroll event handler.');
566
+ }
567
+ }
568
+ }
569
+
570
+ NETDATA.onscroll_updater_last_run = start;
571
+ NETDATA.onscroll_updater_running = false;
572
+ };
573
+
574
+ NETDATA.onscroll = function() {
575
+ // console.log('onscroll');
576
+
577
+ NETDATA.options.last_page_scroll = new Date().getTime();
578
+ NETDATA.options.auto_refresher_stop_until = 0;
579
+
580
+ if(NETDATA.options.targets === null) return;
581
+
582
+ if(NETDATA.options.current.async_on_scroll === true) {
583
+ // async
584
if(NETDATA.onscroll_updater_running === false) {
585
NETDATA.onscroll_updater_running = true;
586
setTimeout(NETDATA.onscroll_updater, 0);
@@ -568,6 +599,10 @@
599
}, 200);
600
}
601
}
602
+ else {
603
+ // sync
604
+ NETDATA.onscroll_updater();
605
+ }
606
};
607
608
window.onresize = NETDATA.onresize;
web/index.html
+11
-3
@@ -2042,6 +2042,7 @@
2042
2043
sync_option('eliminate_zero_dimensions');
2044
sync_option('destroy_on_hide');
2045
+ sync_option('async_on_scroll');
2046
sync_option('parallel_refresher');
2047
sync_option('concurrent_refreshes');
2048
sync_option('sync_selection');
@@ -2064,6 +2065,7 @@
2065
// handle options changes
2066
$('#eliminate_zero_dimensions').change(function() { NETDATA.setOption('eliminate_zero_dimensions', $(this).prop('checked')); });
2067
$('#destroy_on_hide').change(function() { NETDATA.setOption('destroy_on_hide', $(this).prop('checked')); });
2068
+ $('#async_on_scroll').change(function() { NETDATA.setOption('async_on_scroll', $(this).prop('checked')); });
2069
$('#parallel_refresher').change(function() { NETDATA.setOption('parallel_refresher', $(this).prop('checked')); });
2070
$('#concurrent_refreshes').change(function() { NETDATA.setOption('concurrent_refreshes', $(this).prop('checked')); });
2071
$('#sync_selection').change(function() { NETDATA.setOption('sync_selection', $(this).prop('checked')); });
@@ -2145,7 +2147,7 @@
2147
// parallel javascript downloader in netdata
2148
var netdataPrepCallback = function() {
2149
NETDATA.requiredJs.push({
2148
- url: NETDATA.serverDefault + 'dashboard_info.js?v57',
2150
+ url: NETDATA.serverDefault + 'dashboard_info.js?v58',
2151
isAlreadyLoaded: function() { return false; }
2152
});
2153
@@ -2558,7 +2560,13 @@
2560
<tr class="option-row">
2561
<td class="option-control"><input id="destroy_on_hide" type="checkbox" data-toggle="toggle" data-on="Destroy" data-off="Hide" data-width="110px"></td>
2562
<td class="option-info"><strong>How to handle hidden charts?</strong><br/>
2561
- <small>When set to <b>Destroy</b>, charts that are not in the current viewport of the browser (are above, or below the visible area of the page), will be destroyed and re-created if and when they become visible again. When set to <b>Hide</b>, the not-visible charts will be just hidden, to simplify the DOM and speed up your browser. Set it to <b>Destroy</b>, to lower the memory requirements of your browser. Set it to <b>Hide</b> for smoother page scrolling.</small>
2563
+ <small>When set to <b>Destroy</b>, charts that are not in the current viewport of the browser (are above, or below the visible area of the page), will be destroyed and re-created if and when they become visible again. When set to <b>Hide</b>, the not-visible charts will be just hidden, to simplify the DOM and speed up your browser. Set it to <b>Destroy</b>, to lower the memory requirements of your browser. Set it to <b>Hide</b> for faster restoration of charts on page scrolling.</small>
2564
+ </td>
2565
+ </tr>
2566
+ <tr class="option-row">
2567
+ <td class="option-control"><input id="async_on_scroll" type="checkbox" data-toggle="toggle" data-on="Async" data-off="Sync" data-width="110px"></td>
2568
+ <td class="option-info"><strong>Page scroll handling?</strong><br/>
2569
+ <small>When set to <b>Sync</b>, charts will be examined for their visibility synchronously. On slow computers this may impact the smoothness of page scrolling. To work asynchronously set it to <b>Async</b>. When set to <b>Sync</b>, the performance of page scrolling is monitored and this setting switches automatically to <b>Async</b> if the browser is found slow. Set it to <b>Sync</b> for best visual experience. Set it to <b>Async</b> for smoother page scrolling.</small>
2570
</td>
2571
</tr>
2572
</table>
@@ -2769,4 +2777,4 @@
2777
</div>
2778
</body>
2779
</html>
2772
-<script async type="text/javascript" src="dashboard.js?v57"></script>
2780
+<script async type="text/javascript" src="dashboard.js?v58"></script>