dashboard scroll improvement and more
Costa Tsaousis (ktsaou) committed
Nov 27, 2017 at 01:56 UTC
ab73c1230acfef649e6c146b339f2b87194bb98e
2 files changed
+350
-182
web/dashboard.js
+208
-106
@@ -422,6 +422,77 @@ var NETDATA = window.NETDATA || {};
422
};
423
424
425
+ // ----------------------------------------------------------------------------------------------------------------
426
+ // faster / more accurate setTimeout() replacement
427
+ // https://gist.github.com/joelambert/1002116#file-requesttimeout-js
428
+
429
+ // requestAnimationFrame() shim by Paul Irish
430
+ // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
431
+ window.requestAnimFrame = (function() {
432
+ return window.requestAnimationFrame ||
433
+ window.webkitRequestAnimationFrame ||
434
+ window.mozRequestAnimationFrame ||
435
+ window.oRequestAnimationFrame ||
436
+ window.msRequestAnimationFrame ||
437
+ function (/* function */ callback, /* DOMElement */ element) {
438
+ window.setTimeout(callback, 1000 / 60);
439
+ };
440
+ })();
441
+
442
+ /**
443
+ * Behaves the same as setTimeout except uses requestAnimationFrame() where possible for better performance
444
+ * @param {function} fn The callback function
445
+ * @param {int} delay The delay in milliseconds
446
+ */
447
+
448
+ window.requestTimeout = function(fn, delay) {
449
+
450
+ if (!window.requestAnimationFrame &&
451
+ !window.webkitRequestAnimationFrame &&
452
+ !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
453
+ !window.oRequestAnimationFrame &&
454
+ !window.msRequestAnimationFrame)
455
+ return window.setTimeout(fn, delay);
456
+
457
+ var start = Date.now(),
458
+ handle = new Object();
459
+
460
+ function loop() {
461
+ var current = Date.now(),
462
+ delta = current - start;
463
+
464
+ if(delta >= delay) {
465
+ //var t1 = Date.now();
466
+ fn.call();
467
+ //var t2 = Date.now();
468
+
469
+ //if(t2 - t1 > 1000 / 60)
470
+ // console.log('slow function ' + (t2 - t1).toString() + ' ms');
471
+ }
472
+ else {
473
+ handle.value = window.requestAnimFrame(loop);
474
+ }
475
+ };
476
+
477
+ handle.value = window.requestAnimFrame(loop);
478
+ return handle;
479
+ };
480
+
481
+ /**
482
+ * Behaves the same as clearTimeout except uses cancelRequestAnimationFrame() where possible for better performance
483
+ * @param {int|object} fn The callback function
484
+ */
485
+ window.clearRequestTimeout = function(handle) {
486
+ window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
487
+ window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) :
488
+ window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) : /* Support for legacy API */
489
+ window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
490
+ window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
491
+ window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) :
492
+ clearTimeout(handle);
493
+ };
494
+
495
+
496
// ----------------------------------------------------------------------------------------------------------------
497
// local storage options
498
@@ -621,18 +692,30 @@ var NETDATA = window.NETDATA || {};
692
}
693
};
694
624
- NETDATA.onscroll_updater_timeout_id = 0;
625
- NETDATA.onscroll_updater_enabled = true;
626
- NETDATA.onscroll_updater = function() {
627
- if(NETDATA.onscroll_updater_enabled === false)
628
- return;
695
+ NETDATA.onscroll_start_delay = function() {
696
+ NETDATA.options.last_page_scroll = Date.now();
697
630
- //console.log('onscroll_updater() begin');
698
+ if(NETDATA.options.current.async_on_scroll === true)
699
+ NETDATA.options.on_scroll_refresher_stop_until = NETDATA.options.last_page_scroll + 5000;
700
+ };
701
632
- NETDATA.globalSelectionSync.stop();
702
+ NETDATA.onscroll_end_delay = function() {
703
+ if(NETDATA.options.current.async_on_scroll === true) {
704
+ NETDATA.options.on_scroll_refresher_stop_until =
705
+ Date.now()
706
+ + ((NETDATA.options.current.async_on_scroll === true) ? NETDATA.options.current.onscroll_worker_duration_threshold : 0);
707
+ }
708
+ };
709
+
710
+ NETDATA.onscroll_updater_timeout_id = undefined;
711
+ NETDATA.onscroll_updater = function() {
712
+ if(NETDATA.options.targets === null) return;
713
+
714
+ //var start = Date.now();
715
634
- var start = Date.now();
716
+ // console.log('onscroll_updater() begin');
717
718
+ NETDATA.globalSelectionSync.stop();
719
720
// when the user scrolls he sees that we have
721
// hidden all the not-visible charts
@@ -642,23 +725,19 @@ var NETDATA = window.NETDATA || {};
725
if(NETDATA.options.abort_ajax_on_scroll === true)
726
NETDATA.abort_all_refreshes();
727
645
- var targets = NETDATA.options.targets;
646
- var len = targets.length;
728
+ if(NETDATA.options.current.parallel_refresher === false) {
729
+ var targets = NETDATA.options.targets;
730
+ var len = targets.length;
731
648
- function onscroll_updater_chart_is_visible() {
649
- if(len--) {
732
+ while (len--)
733
targets[len].isVisible();
651
- NETDATA.onscroll_updater_timeout_id = setTimeout(onscroll_updater_chart_is_visible, 0);
652
- }
653
- else
654
- NETDATA.onscroll_updater_timeout_id = 0;
734
}
656
- onscroll_updater_chart_is_visible();
735
658
- var end = Date.now();
736
+ //var end = Date.now();
737
+ //var dt = end - start;
738
+ // console.log('count = ' + targets.length + ', average = ' + Math.round(dt / targets.length).toString() + ', dt = ' + dt);
739
660
- NETDATA.onscroll_updater_timeout_id = 0;
661
- //console.log('onscroll_updater() done in ' + (end - start).toString() + ' ms');
740
+ NETDATA.onscroll_end_delay();
741
};
742
743
NETDATA.scrollUp = false;
@@ -666,19 +745,16 @@ var NETDATA = window.NETDATA || {};
745
NETDATA.onscroll = function() {
746
//console.log('onscroll() begin');
747
748
+ NETDATA.onscroll_start_delay();
749
NETDATA.chartRefresherReschedule();
750
+
751
NETDATA.scrollUp = (window.scrollY > NETDATA.scrollY);
752
NETDATA.scrollY = window.scrollY;
753
673
- NETDATA.options.last_page_scroll = Date.now();
674
- NETDATA.options.on_scroll_refresher_stop_until = NETDATA.options.last_page_scroll + ((NETDATA.options.current.async_on_scroll === true)?NETDATA.options.current.onscroll_worker_duration_threshold:0);
675
-
676
- if(NETDATA.options.targets === null) return;
677
-
678
- if(NETDATA.onscroll_updater_timeout_id !== 0)
679
- clearTimeout(NETDATA.onscroll_updater_timeout_id);
754
+ if(NETDATA.onscroll_updater_timeout_id)
755
+ window.clearRequestTimeout(NETDATA.onscroll_updater_timeout_id);
756
681
- NETDATA.onscroll_updater_timeout_id = setTimeout(NETDATA.onscroll_updater, 0);
757
+ NETDATA.onscroll_updater_timeout_id = window.requestTimeout(NETDATA.onscroll_updater, 0);
758
//console.log('onscroll() end');
759
};
760
@@ -1389,9 +1465,6 @@ var NETDATA = window.NETDATA || {};
1465
this.view_after = null;
1466
this.view_before = null;
1467
1392
- if(NETDATA.globalPanAndZoom.isActive() === true)
1393
- NETDATA.globalPanAndZoom.clearMaster();
1394
-
1468
if(typeof this.callback === 'function')
1469
this.callback(false, 0, 0);
1470
},
@@ -2033,7 +2106,7 @@ var NETDATA = window.NETDATA || {};
2106
dont_sync_before: 0,
2107
last_t: 0,
2108
slaves: [],
2036
- timeout_id: null,
2109
+ timeout_id: undefined,
2110
2111
globalReset: function() {
2112
this.stop();
@@ -2041,7 +2114,7 @@ var NETDATA = window.NETDATA || {};
2114
this.dont_sync_before = 0;
2115
this.last_t = 0;
2116
this.slaves = [];
2044
- this.timeout_id = null;
2117
+ this.timeout_id = undefined;
2118
},
2119
2120
active: function() {
@@ -2131,7 +2204,7 @@ var NETDATA = window.NETDATA || {};
2204
while (len--)
2205
NETDATA.globalSelectionSync.slaves[len].setSelection(t);
2206
2134
- this.timeout_id = null;
2207
+ this.timeout_id = undefined;
2208
}
2209
},
2210
@@ -2149,10 +2222,10 @@ var NETDATA = window.NETDATA || {};
2222
2223
this.last_t = t;
2224
2152
- if (this.timeout_id !== null)
2153
- clearTimeout(this.timeout_id);
2225
+ if (this.timeout_id)
2226
+ window.clearRequestTimeout(this.timeout_id);
2227
2155
- this.timeout_id = setTimeout(this.__syncSlaves, 0);
2228
+ this.timeout_id = window.requestTimeout(this.__syncSlaves, 0);
2229
}
2230
}
2231
};
@@ -2575,13 +2648,19 @@ var NETDATA = window.NETDATA || {};
2648
2649
if(that.chart_created === true) {
2650
if(NETDATA.options.current.show_help === true) {
2578
- $(that.element_legend_childs.toolbox_left).popover('hide');
2579
- $(that.element_legend_childs.toolbox_reset).popover('hide');
2580
- $(that.element_legend_childs.toolbox_right).popover('hide');
2581
- $(that.element_legend_childs.toolbox_zoomin).popover('hide');
2582
- $(that.element_legend_childs.toolbox_zoomout).popover('hide');
2583
- $(that.element_legend_childs.resize_handler).popover('hide');
2584
- $(that.element_legend_childs.content).popover('hide');
2651
+ if(that.element_legend_childs.toolbox !== null) {
2652
+ $(that.element_legend_childs.toolbox_left).popover('hide');
2653
+ $(that.element_legend_childs.toolbox_reset).popover('hide');
2654
+ $(that.element_legend_childs.toolbox_right).popover('hide');
2655
+ $(that.element_legend_childs.toolbox_zoomin).popover('hide');
2656
+ $(that.element_legend_childs.toolbox_zoomout).popover('hide');
2657
+ }
2658
+
2659
+ if(that.element_legend_childs.resize_handler !== null)
2660
+ $(that.element_legend_childs.resize_handler).popover('hide');
2661
+
2662
+ if(that.element_legend_childs.content !== null)
2663
+ $(that.element_legend_childs.content).popover('hide');
2664
}
2665
2666
if(NETDATA.options.current.destroy_on_hide === true) {
@@ -2595,6 +2674,8 @@ var NETDATA = window.NETDATA || {};
2674
2675
showRendering();
2676
that.element_chart.style.display = 'none';
2677
+ that.element.style.willChange = 'auto';
2678
+ that.element.style.transform = '';
2679
if(that.element_legend !== null) that.element_legend.style.display = 'none';
2680
if(that.element_legend_childs.toolbox !== null) that.element_legend_childs.toolbox.style.display = 'none';
2681
if(that.element_legend_childs.resize_handler !== null) that.element_legend_childs.resize_handler.style.display = 'none';
@@ -2627,6 +2708,8 @@ var NETDATA = window.NETDATA || {};
2708
}
2709
else {
2710
// that.log('unhideChart()');
2711
+ that.element.style.willChange = 'transform';
2712
+ that.element.style.transform = 'translateZ(0)';
2713
that.tm.last_unhidden = Date.now();
2714
that.element_chart.style.display = '';
2715
if(that.element_legend !== null) that.element_legend.style.display = '';
@@ -3140,7 +3223,7 @@ var NETDATA = window.NETDATA || {};
3223
return ret;
3224
};
3225
3143
- this.updateChartPanOrZoomAsyncTimeOutId = null;
3226
+ this.updateChartPanOrZoomAsyncTimeOutId = undefined;
3227
this.updateChartPanOrZoomAsync = function(after, before, callback) {
3228
NETDATA.globalPanAndZoom.delay();
3229
NETDATA.globalSelectionSync.delay();
@@ -3152,11 +3235,11 @@ var NETDATA = window.NETDATA || {};
3235
NETDATA.globalSelectionSync.setMaster(this);
3236
}
3237
3155
- if(this.updateChartPanOrZoomAsyncTimeOutId !== null)
3156
- clearTimeout(this.updateChartPanOrZoomAsyncTimeOutId);
3238
+ if(this.updateChartPanOrZoomAsyncTimeOutId)
3239
+ window.clearRequestTimeout(this.updateChartPanOrZoomAsyncTimeOutId);
3240
3158
- setTimeout(function() {
3159
- that.updateChartPanOrZoomAsyncTimeOutId = null;
3241
+ window.requestTimeout(function() {
3242
+ that.updateChartPanOrZoomAsyncTimeOutId = undefined;
3243
that.updateChartPanOrZoom(after, before, callback);
3244
}, 0);
3245
};
@@ -4644,12 +4727,12 @@ var NETDATA = window.NETDATA || {};
4727
state.updateChart(function() {
4728
state.running = false;
4729
4647
- if(typeof callback !== 'undefined')
4730
+ if(typeof callback === 'function')
4731
return callback();
4732
});
4733
}
4734
else {
4652
- if(typeof callback !== 'undefined')
4735
+ if(typeof callback === 'function')
4736
return callback();
4737
}
4738
};
@@ -4976,17 +5059,20 @@ var NETDATA = window.NETDATA || {};
5059
if(NETDATA.options.debug.main_loop === true)
5060
console.log('fast rendering...');
5061
4979
- setTimeout(function() {
4980
- state.autoRefresh(function () {
4981
- NETDATA.chartRefresherNoParallel(++index, callback);
4982
- });
4983
- }, 0);
5062
+ if(state.isVisible() === true)
5063
+ window.requestTimeout(function() {
5064
+ state.autoRefresh(function () {
5065
+ NETDATA.chartRefresherNoParallel(++index, callback);
5066
+ });
5067
+ }, 0);
5068
+ else
5069
+ NETDATA.chartRefresherNoParallel(++index, callback);
5070
}
5071
else {
5072
if(NETDATA.options.debug.main_loop === true) console.log('waiting for next refresh...');
5073
NETDATA.options.auto_refresher_fast_weight = 0;
5074
4989
- setTimeout(function() {
5075
+ window.requestTimeout(function() {
5076
state.autoRefresh(function() {
5077
NETDATA.chartRefresherNoParallel(++index, callback);
5078
});
@@ -5001,12 +5087,13 @@ var NETDATA = window.NETDATA || {};
5087
5088
// the default refresher
5089
NETDATA.chartRefresherLastRun = 0;
5004
- NETDATA.chartRefresherTimeoutId = 0;
5090
+ NETDATA.chartRefresherTimeoutId = undefined;
5091
5092
NETDATA.chartRefresherReschedule = function() {
5093
if(NETDATA.options.current.async_on_scroll === true) {
5008
- clearTimeout(NETDATA.chartRefresherTimeoutId);
5009
- NETDATA.chartRefresherTimeoutId = setTimeout(NETDATA.chartRefresher, NETDATA.options.current.onscroll_worker_duration_threshold);
5094
+ if(NETDATA.chartRefresherTimeoutId)
5095
+ window.clearRequestTimeout(NETDATA.chartRefresherTimeoutId);
5096
+ NETDATA.chartRefresherTimeoutId = window.requestTimeout(NETDATA.chartRefresher, NETDATA.options.current.onscroll_worker_duration_threshold);
5097
//console.log('chartRefresherReschedule()');
5098
}
5099
};
@@ -5017,25 +5104,33 @@ var NETDATA = window.NETDATA || {};
5104
NETDATA.chartRefresherLastRun = now;
5105
5106
if( now < NETDATA.options.on_scroll_refresher_stop_until ) {
5020
- NETDATA.chartRefresherTimeoutId = setTimeout(NETDATA.chartRefresher,
5021
- NETDATA.chartRefresherWaitTime());
5107
+ NETDATA.chartRefresherTimeoutId = window.requestTimeout(
5108
+ NETDATA.chartRefresher,
5109
+ NETDATA.chartRefresherWaitTime()
5110
+ );
5111
+
5112
//console.log('chartRefresher() end1 will run in ' + NETDATA.chartRefresherWaitTime().toString() + ' ms');
5113
return;
5114
}
5115
5116
if(NETDATA.options.pause === true) {
5117
// console.log('auto-refresher is paused');
5028
- NETDATA.chartRefresherTimeoutId = setTimeout(NETDATA.chartRefresher,
5029
- NETDATA.chartRefresherWaitTime());
5118
+ NETDATA.chartRefresherTimeoutId = window.requestTimeout(
5119
+ NETDATA.chartRefresher,
5120
+ NETDATA.chartRefresherWaitTime()
5121
+ );
5122
+
5123
//console.log('chartRefresher() end2 will run in ' + NETDATA.chartRefresherWaitTime().toString() + ' ms');
5124
return;
5125
}
5126
5127
if(typeof NETDATA.options.pauseCallback === 'function') {
5128
// console.log('auto-refresher is calling pauseCallback');
5129
+
5130
NETDATA.options.pause = true;
5131
NETDATA.options.pauseCallback();
5132
NETDATA.chartRefresher();
5133
+
5134
//console.log('chartRefresher() end3 (nested)');
5135
return;
5136
}
@@ -5043,9 +5138,10 @@ var NETDATA = window.NETDATA || {};
5138
if(NETDATA.options.current.parallel_refresher === false) {
5139
// console.log('auto-refresher is calling chartRefresherNoParallel(0)');
5140
NETDATA.chartRefresherNoParallel(0, function() {
5046
- NETDATA.chartRefresherTimeoutId = setTimeout(function() {
5047
- NETDATA.chartRefresher();
5048
- }, NETDATA.options.current.idle_between_loops);
5141
+ NETDATA.chartRefresherTimeoutId = window.requestTimeout(
5142
+ NETDATA.chartRefresher,
5143
+ NETDATA.options.current.idle_between_loops
5144
+ );
5145
});
5146
//console.log('chartRefresher() end4 (no parallel, nested)');
5147
return;
@@ -5060,46 +5156,52 @@ var NETDATA = window.NETDATA || {};
5156
return;
5157
}
5158
5063
- var parallel = [];
5064
- var targets = NETDATA.options.targets;
5065
- var len = targets.length;
5066
- var state;
5067
- while(len--) {
5068
- state = targets[len];
5069
- if(state.isVisible() === false || state.running === true)
5070
- continue;
5071
-
5072
- if(state.library.initialized === false) {
5073
- if(state.library.enabled === true) {
5074
- state.library.initialize(NETDATA.chartRefresher);
5075
- //console.log('chartRefresher() end6 (library init)');
5076
- return;
5077
- }
5078
- else {
5079
- state.error('chart library "' + state.library_name + '" is not enabled.');
5159
+ if(NETDATA.globalSelectionSync.active() === false) {
5160
+ var parallel = [];
5161
+ var targets = NETDATA.options.targets;
5162
+ var len = targets.length;
5163
+ var state;
5164
+ while(len--) {
5165
+ state = targets[len];
5166
+ if(state.isVisible() === false || state.running === true)
5167
+ continue;
5168
+
5169
+ if(state.library.initialized === false) {
5170
+ if(state.library.enabled === true) {
5171
+ state.library.initialize(NETDATA.chartRefresher);
5172
+ //console.log('chartRefresher() end6 (library init)');
5173
+ return;
5174
+ }
5175
+ else {
5176
+ state.error('chart library "' + state.library_name + '" is not enabled.');
5177
+ }
5178
}
5179
+
5180
+ if(NETDATA.scrollUp === true)
5181
+ parallel.unshift(state);
5182
+ else
5183
+ parallel.push(state);
5184
}
5185
5083
- if(NETDATA.scrollUp === true)
5084
- parallel.unshift(state);
5085
- else
5086
- parallel.push(state);
5087
- }
5186
+ len = parallel.length;
5187
+ while (len--) {
5188
+ state = parallel[len];
5189
+ // console.log('auto-refresher executing in parallel for ' + parallel.length.toString() + ' charts');
5190
+ // this will execute the jobs in parallel
5191
5089
- len = parallel.length;
5090
- while(len--) {
5091
- state = parallel[len];
5092
- // console.log('auto-refresher executing in parallel for ' + parallel.length.toString() + ' charts');
5093
- // this will execute the jobs in parallel
5094
- setTimeout(state.autoRefresh, 0);
5192
+ if (state.running === false)
5193
+ window.requestTimeout(state.autoRefresh, 0);
5194
+ }
5195
+ //else {
5196
+ // console.log('auto-refresher nothing to do');
5197
+ //}
5198
}
5096
- //else {
5097
- // console.log('auto-refresher nothing to do');
5098
- //}
5199
5200
// run the next refresh iteration
5101
- NETDATA.chartRefresherTimeoutId = setTimeout(NETDATA.chartRefresher,
5102
- NETDATA.chartRefresherWaitTime());
5201
+ NETDATA.chartRefresherTimeoutId = window.requestTimeout(
5202
+ NETDATA.chartRefresher,
5203
+ NETDATA.chartRefresherWaitTime()
5204
+ );
5205
5206
//console.log('chartRefresher() completed in ' + (Date.now() - now).toString() + ' ms');
5207
};
@@ -6778,8 +6880,8 @@ var NETDATA = window.NETDATA || {};
6880
6881
NETDATA.easypiechartClearSelection = function(state) {
6882
if(typeof state.tmp.easyPieChartEvent !== 'undefined') {
6781
- if(state.tmp.easyPieChartEvent.timer !== undefined) {
6782
- clearTimeout(state.tmp.easyPieChartEvent.timer);
6883
+ if(state.tmp.easyPieChartEvent.timer) {
6884
+ window.clearRequestTimeout(state.tmp.easyPieChartEvent.timer);
6885
}
6886
6887
state.tmp.easyPieChartEvent.timer = undefined;
@@ -6825,7 +6927,7 @@ var NETDATA = window.NETDATA || {};
6927
if(state.tmp.easyPieChartEvent.timer === undefined) {
6928
state.tmp.easyPieChart_instance.disableAnimation();
6929
6828
- state.tmp.easyPieChartEvent.timer = setTimeout(function() {
6930
+ state.tmp.easyPieChartEvent.timer = window.requestTimeout(function() {
6931
state.tmp.easyPieChartEvent.timer = undefined;
6932
state.tmp.easyPieChart_instance.update(state.tmp.easyPieChartEvent.pcent);
6933
}, 0);
@@ -7055,8 +7157,8 @@ var NETDATA = window.NETDATA || {};
7157
7158
NETDATA.gaugeClearSelection = function(state) {
7159
if(typeof state.tmp.gaugeEvent !== 'undefined') {
7058
- if(state.tmp.gaugeEvent.timer !== undefined) {
7059
- clearTimeout(state.tmp.gaugeEvent.timer);
7160
+ if(state.tmp.gaugeEvent.timer) {
7161
+ window.clearRequestTimeout(state.tmp.gaugeEvent.timer);
7162
}
7163
7164
state.tmp.gaugeEvent.timer = undefined;
@@ -7109,7 +7211,7 @@ var NETDATA = window.NETDATA || {};
7211
if(state.tmp.gaugeEvent.timer === undefined) {
7212
NETDATA.gaugeAnimation(state, false);
7213
7112
- state.tmp.gaugeEvent.timer = setTimeout(function() {
7214
+ state.tmp.gaugeEvent.timer = window.requestTimeout(function() {
7215
state.tmp.gaugeEvent.timer = undefined;
7216
NETDATA.gaugeSet(state, state.tmp.gaugeEvent.value, state.tmp.gaugeEvent.min, state.tmp.gaugeEvent.max);
7217
}, 0);
web/index.html
+142
-76
@@ -729,6 +729,9 @@
729
730
clearHighlight: function() {
731
NETDATA.globalChartUnderlay.clear();
732
+
733
+ if(NETDATA.globalPanAndZoom.isActive() === true)
734
+ NETDATA.globalPanAndZoom.clearMaster();
735
},
736
737
showHighlight: function() {
@@ -3554,76 +3557,74 @@
3557
$('#saveSnapshotExport').removeClass('disabled');
3558
}
3559
3557
- NETDATA.pause(function () {
3558
- NETDATA.globalSelectionSync.stop();
3559
- NETDATA.options.force_data_points = saveData.data_points;
3560
- NETDATA.options.fake_chart_rendering = true;
3561
- NETDATA.onscroll_updater_enabled = false;
3562
- NETDATA.abort_all_refreshes();
3563
-
3564
- var size = 0;
3565
- var info = ' Resolution: <b>' + saveSnapshotSelectedSecondsPerPoint.toString() + ((saveSnapshotSelectedSecondsPerPoint === 1)?' second ':' seconds ').toString() + 'per point</b>.';
3566
-
3567
- function update_chart(idx) {
3568
- if (saveSnapshotStop === true) {
3569
- saveSnapshotModalLog('info', 'Cancelled!');
3570
- saveSnapshotRestore();
3571
- return;
3572
- }
3560
+ NETDATA.globalSelectionSync.stop();
3561
+ NETDATA.options.force_data_points = saveData.data_points;
3562
+ NETDATA.options.fake_chart_rendering = true;
3563
+ NETDATA.onscroll_updater_enabled = false;
3564
+ NETDATA.abort_all_refreshes();
3565
3574
- var state = NETDATA.options.targets[--idx];
3566
+ var size = 0;
3567
+ var info = ' Resolution: <b>' + saveSnapshotSelectedSecondsPerPoint.toString() + ((saveSnapshotSelectedSecondsPerPoint === 1)?' second ':' seconds ').toString() + 'per point</b>.';
3568
3576
- var pcent = (NETDATA.options.targets.length - idx) * 100 / NETDATA.options.targets.length;
3577
- $(el).css('width', pcent + '%').attr('aria-valuenow', pcent);
3578
- eltxt.innerText = Math.round(pcent).toString() + '%, ' + state.id;
3569
+ function update_chart(idx) {
3570
+ if (saveSnapshotStop === true) {
3571
+ saveSnapshotModalLog('info', 'Cancelled!');
3572
+ saveSnapshotRestore();
3573
+ return;
3574
+ }
3575
3580
- setTimeout(function () {
3581
- charts_count++;
3582
- state.isVisible(true);
3583
- state.current.force_after_ms = saveData.after_ms;
3584
- state.current.force_before_ms = saveData.before_ms;
3576
+ var state = NETDATA.options.targets[--idx];
3577
3586
- state.updateChart(function (status, reason) {
3587
- state.current.force_after_ms = null;
3588
- state.current.force_before_ms = null;
3578
+ var pcent = (NETDATA.options.targets.length - idx) * 100 / NETDATA.options.targets.length;
3579
+ $(el).css('width', pcent + '%').attr('aria-valuenow', pcent);
3580
+ eltxt.innerText = Math.round(pcent).toString() + '%, ' + state.id;
3581
3590
- if (status === true) {
3591
- charts_ok++;
3592
- // state.log('ok');
3593
- size += pack_api1_v1_chart_data(state);
3594
- }
3595
- else {
3596
- charts_failed++;
3597
- state.log('failed to be updated: ' + reason);
3598
- }
3582
+ setTimeout(function () {
3583
+ charts_count++;
3584
+ state.isVisible(true);
3585
+ state.current.force_after_ms = saveData.after_ms;
3586
+ state.current.force_before_ms = saveData.before_ms;
3587
3600
- saveSnapshotModalLog((charts_failed) ? 'danger' : 'info', 'Generated snapshot data size <b>' + (Math.round(size * 100 / 1024 / 1024) / 100).toString() + ' MB</b>. ' + ((charts_failed) ? (charts_failed.toString() + ' charts have failed to be downloaded') : '').toString() + info);
3588
+ state.updateChart(function (status, reason) {
3589
+ state.current.force_after_ms = null;
3590
+ state.current.force_before_ms = null;
3591
3602
- if (idx > 0) {
3603
- update_chart(idx);
3604
- }
3605
- else {
3606
- saveData.charts_ok = charts_ok;
3607
- saveData.charts_failed = charts_failed;
3608
- saveData.data_size = size;
3609
- // console.log(saveData.compression + ': ' + (size / (options.data.dimensions_count * Math.round(saveSnapshotViewDuration / saveSnapshotSelectedSecondsPerPoint))).toString());
3592
+ if (status === true) {
3593
+ charts_ok++;
3594
+ // state.log('ok');
3595
+ size += pack_api1_v1_chart_data(state);
3596
+ }
3597
+ else {
3598
+ charts_failed++;
3599
+ state.log('failed to be updated: ' + reason);
3600
+ }
3601
3611
- // save it
3612
- // console.log(saveData);
3613
- saveObjectToClient(saveData, filename);
3602
+ saveSnapshotModalLog((charts_failed) ? 'danger' : 'info', 'Generated snapshot data size <b>' + (Math.round(size * 100 / 1024 / 1024) / 100).toString() + ' MB</b>. ' + ((charts_failed) ? (charts_failed.toString() + ' charts have failed to be downloaded') : '').toString() + info);
3603
3615
- if (charts_failed > 0)
3616
- alert(charts_failed.toString() + ' failed to be downloaded');
3604
+ if (idx > 0) {
3605
+ update_chart(idx);
3606
+ }
3607
+ else {
3608
+ saveData.charts_ok = charts_ok;
3609
+ saveData.charts_failed = charts_failed;
3610
+ saveData.data_size = size;
3611
+ // console.log(saveData.compression + ': ' + (size / (options.data.dimensions_count * Math.round(saveSnapshotViewDuration / saveSnapshotSelectedSecondsPerPoint))).toString());
3612
3618
- saveSnapshotRestore();
3619
- saveData = null;
3620
- }
3621
- })
3622
- }, 0);
3623
- }
3613
+ // save it
3614
+ // console.log(saveData);
3615
+ saveObjectToClient(saveData, filename);
3616
3625
- update_chart(NETDATA.options.targets.length);
3626
- });
3617
+ if (charts_failed > 0)
3618
+ alert(charts_failed.toString() + ' failed to be downloaded');
3619
+
3620
+ saveSnapshotRestore();
3621
+ saveData = null;
3622
+ }
3623
+ })
3624
+ }, 0);
3625
+ }
3626
+
3627
+ update_chart(NETDATA.options.targets.length);
3628
});
3629
});
3630
}
@@ -3631,18 +3632,71 @@
3632
// --------------------------------------------------------------------
3633
// activate netdata on the page
3634
3634
- function finalizePage() {
3635
- // resize all charts - without starting the background thread
3636
- // this has to be done while NETDATA is paused
3637
- // if we ommit this, the affix menu will be wrong, since all
3638
- // the Dom elements are initially zero-sized
3639
- NETDATA.parseDom();
3635
+ var runOnceOnDashboardLastRun = 0;
3636
+ function runOnceOnDashboardWithjQuery() {
3637
+ if(runOnceOnDashboardLastRun !== 0)
3638
+ return;
3639
+
3640
+ runOnceOnDashboardLastRun = Date.now();
3641
+
3642
+ // prevent bootstrap modals from scrolling the page
3643
+ // maintains the current scroll position
3644
+ // https://stackoverflow.com/a/34754029/4525767
3645
+
3646
+ var scrollPos = 0;
3647
+ var modal_shown = false;
3648
+ var netdata_paused_on_modal = false;
3649
+ $('.modal')
3650
+ .on('show.bs.modal', function () {
3651
+ scrollPos = window.scrollY;
3652
+
3653
+ $('body').css({
3654
+ overflow: 'hidden',
3655
+ position: 'fixed',
3656
+ top: -scrollPos
3657
+ });
3658
+
3659
+ modal_shown = true;
3660
+
3661
+ if(NETDATA.options.pauseCallback === null) {
3662
+ NETDATA.pause(function() {});
3663
+ netdata_paused_on_modal = true;
3664
+ }
3665
+ else
3666
+ netdata_paused_on_modal = false;
3667
+ })
3668
+ .on('hide.bs.modal', function () {
3669
+
3670
+ $('body')
3671
+ .css({
3672
+ overflow: '',
3673
+ position: '',
3674
+ top: ''
3675
+ });
3676
+
3677
+ $('html, body')
3678
+ .animate({ scrollTop: scrollPos }, 0);
3679
+
3680
+ modal_shown = false;
3681
+
3682
+ if(netdata_paused_on_modal === true) {
3683
+ NETDATA.unpause();
3684
+ netdata_paused_on_modal = false;
3685
+ }
3686
+ });
3687
+
3688
+ // ------------------------------------------------------------------------
3689
+ // fix bootstrap affix click bug
3690
+ // https://stackoverflow.com/a/37847981/4525767
3691
+
3692
+ $( '#sidebar' ).on( 'affix-top.bs.affix', function() {
3693
+ if(modal_shown) return false;
3694
+ } );
3695
3641
- if(urlOptions.pan_and_zoom === true && NETDATA.options.targets.length > 0)
3642
- NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], urlOptions.after, urlOptions.before);
3696
3697
// ------------------------------------------------------------------------
3698
// https://github.com/viralpatel/jquery.shorten/blob/master/src/jquery.shorten.js
3699
+
3700
$.fn.shorten = function(settings) {
3701
"use strict";
3702
@@ -3763,17 +3817,33 @@
3817
}
3818
3819
var html = '<div class="shortcontent">' + c +
3766
- '</div><div class="allcontent">' + content +
3767
- '</div><span><a href="javascript://nop/" class="morelink">' + config.moreText + '</a></span>';
3820
+ '</div><div class="allcontent">' + content +
3821
+ '</div><span><a href="javascript://nop/" class="morelink">' + config.moreText + '</a></span>';
3822
3823
$this.html(html);
3824
$this.find(".allcontent").hide(); // Hide all text
3825
$('.shortcontent p:last', $this).css('margin-bottom', 0); //Remove bottom margin on last paragraph as it's likely shortened
3826
}
3827
});
3774
-
3828
};
3829
+ }
3830
+
3831
+ function finalizePage() {
3832
+ runOnceOnDashboardWithjQuery();
3833
+
3834
+ // resize all charts - without starting the background thread
3835
+ // this has to be done while NETDATA is paused
3836
+ // if we ommit this, the affix menu will be wrong, since all
3837
+ // the Dom elements are initially zero-sized
3838
+ NETDATA.parseDom();
3839
+
3840
+ if(urlOptions.pan_and_zoom === true && NETDATA.options.targets.length > 0)
3841
+ NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], urlOptions.after, urlOptions.before);
3842
+
3843
+ // ------------------------------------------------------------------------
3844
+
3845
$(".shorten").shorten();
3846
+
3847
// ------------------------------------------------------------------------
3848
3849
// callback for us to track PanAndZoom operations
@@ -3989,11 +4059,10 @@
4059
4060
var $alarmsModal = $('#alarmsModal');
4061
$alarmsModal.on('shown.bs.modal', function() {
3992
- NETDATA.pause(alarmsUpdateModal);
4062
+ alarmsUpdateModal();
4063
});
4064
4065
$alarmsModal.on('hidden.bs.modal', function() {
3996
- NETDATA.unpause();
4066
document.getElementById('alarms_active').innerHTML =
4067
document.getElementById('alarms_all').innerHTML =
4068
document.getElementById('alarms_log').innerHTML =
@@ -4185,7 +4254,6 @@
4254
// var netdataStarted = performance.now();
4255
4256
var netdataCallback = initializeDynamicDashboard;
4188
-
4257
</script>
4258
</head>
4259
@@ -4252,9 +4320,7 @@
4320
</div>
4321
</nav>
4322
<div class="navbar-highlight">
4255
- <div id="navbar-highlight-content" class="navbar-highlight-content">
4256
- hello world
4257
- </div>
4323
+ <div id="navbar-highlight-content" class="navbar-highlight-content"></div>
4324
</div>
4325
4326
<div id="masthead" style="display: none;">