allow the user to select the resolution of snapshots
Costa Tsaousis (ktsaou) committed
Nov 13, 2017 at 00:59 UTC
81b8c77e5c5bd85c7ac5a9889d03b112a38227f8
3 files changed
+121
-12
LICENSE-REDISTRIBUTED.md
+4
@@ -54,6 +54,10 @@ connectivity is not available.
54
Copyright 2015, Twitter
55
[MIT License](http://getbootstrap.com/getting-started/#license-faqs)
56
57
+- [Bootstrap-slider](http://seiyria.com/bootstrap-slider/)
58
+
59
+ Copyright 2017 Kyle Kemp, Rohit Kalkur, and contributors
60
+ [MIT License](https://github.com/seiyria/bootstrap-slider/blob/master/LICENSE.md)
61
62
- [Bootstrap Toggle](http://www.bootstraptoggle.com/)
63
web/Makefile.am
+2
@@ -39,6 +39,7 @@ dist_webold_DATA = \
39
weblibdir=$(webdir)/lib
40
dist_weblib_DATA = \
41
lib/bootstrap-3.3.7.min.js \
42
+ lib/bootstrap-slider-10.0.0.min.js \
43
lib/bootstrap-table-1.11.0.min.js \
44
lib/bootstrap-table-export-1.11.0.min.js \
45
lib/bootstrap-toggle-2.2.2.min.js \
@@ -63,6 +64,7 @@ dist_webcss_DATA = \
64
css/bootstrap-3.3.7.css \
65
css/bootstrap-theme-3.3.7.min.css \
66
css/bootstrap-slate-flat-3.3.7.css \
67
+ css/bootstrap-slider-10.0.0.min.css \
68
css/bootstrap-toggle-2.2.2.min.css \
69
css/font-awesome.min.css \
70
css/c3-0.4.11.min.css \
web/index.html
+115
-12
@@ -1863,6 +1863,18 @@
1863
else callback();
1864
}
1865
1866
+ var bootstrapSliderLoaded = false;
1867
+ function loadBootstrapSlider(callback) {
1868
+ if(bootstrapSliderLoaded === false) {
1869
+ bootstrapSliderLoaded = true;
1870
+ loadJs(NETDATA.serverDefault + 'lib/bootstrap-slider-10.0.0.min.js', function() {
1871
+ NETDATA._loadCSS(NETDATA.serverDefault + 'css/bootstrap-slider-10.0.0.min.css');
1872
+ callback();
1873
+ });
1874
+ }
1875
+ else callback();
1876
+ }
1877
+
1878
function alarmsUpdateModal() {
1879
var active = '<h3>Raised Alarms</h3><table class="table">';
1880
var all = '<h3>All Running Alarms</h3><div class="panel-group" id="alarms_all_accordion" role="tablist" aria-multiselectable="true">';
@@ -2881,8 +2893,82 @@
2893
saveSnapshotStop = true;
2894
}
2895
2884
- function saveSnapshotStart() {
2896
+ function saveSnapshotModalLog(priority, msg) {
2897
+ document.getElementById('saveSnapshotStatus').className = "alert alert-" + priority;
2898
+ document.getElementById('saveSnapshotStatus').innerHTML = msg;
2899
+ }
2900
+
2901
+ var saveSnapshotSlider = null;
2902
+ var saveSnapshotSelectedSecondsPerPoint = 1;
2903
+ function saveSnapshotModalInit() {
2904
+ $('#saveSnapshotModalProgressSection').hide();
2905
+ $('#saveSnapshotResolutionRadio').show();
2906
+ saveSnapshotModalLog('info', 'Select resolution and click <b>Save</b>');
2907
+
2908
+ loadBootstrapSlider(function() {
2909
+ var view_duration = options.duration;
2910
+
2911
+ if(NETDATA.globalPanAndZoom.isActive() === true)
2912
+ view_duration = Math.round((NETDATA.globalPanAndZoom.force_before_ms - NETDATA.globalPanAndZoom.force_after_ms) / 1000);
2913
+
2914
+
2915
+ var min = options.update_every;
2916
+ var max = Math.round(view_duration / 100);
2917
+
2918
+ if(NETDATA.globalPanAndZoom.isActive() === false)
2919
+ max = Math.round(view_duration / 50);
2920
+
2921
+ var view = Math.round(view_duration / Math.round($(document.getElementById('charts_div')).width() / 2));
2922
+
2923
+ // console.log('view duration: ' + view_duration + ', min: ' + min + ', max: ' + max + ', view: ' + view);
2924
+
2925
+ if(max < 10) max = 10;
2926
+ if(max < min) max = min;
2927
+ if(view < min) view = min;
2928
+ if(view > max) view = max;
2929
+
2930
+ if(saveSnapshotSlider !== null)
2931
+ saveSnapshotSlider.destroy();
2932
+
2933
+ saveSnapshotSlider = new Slider('#saveSnapshotResolutionSlider', {
2934
+ ticks: [ min, view, max ],
2935
+ min: min,
2936
+ max: max,
2937
+ step: options.update_every,
2938
+ value: view,
2939
+ scale: (max > 100)?'logarithmic':'linear',
2940
+ tooltip: 'always',
2941
+ formatter: function(value) {
2942
+ var points = Math.round(view_duration / value);
2943
+ var priority = 'info';
2944
+ var msg = 'Moderate size.';
2945
+
2946
+ if(points < 500) {
2947
+ priority = 'success';
2948
+ msg = 'A small snapshot.';
2949
+ }
2950
+ if(points > 5000) {
2951
+ priority = 'warning';
2952
+ msg = 'Expect a large file and quite some pressure on your browser.';
2953
+ }
2954
+ if(points > 10000) {
2955
+ priority = 'danger';
2956
+ msg = 'Will most probably crash your browser.';
2957
+ }
2958
+
2959
+ saveSnapshotModalLog(priority, 'The snapshot will have ' + points.toString() + ' points per dimension. ' + msg);
2960
+ saveSnapshotSelectedSecondsPerPoint = value;
2961
+ return value + ' seconds per point';
2962
+ }
2963
+ });
2964
+ });
2965
+ }
2966
+
2967
+ function saveSnapshot() {
2968
saveSnapshotStop = false;
2969
+ $('#saveSnapshotModalProgressSection').show();
2970
+ $('#saveSnapshotResolutionRadio').hide();
2971
+ saveSnapshotModalLog('info', 'Generating snapshot...');
2972
2973
var save_options = {
2974
stop_updates_when_focus_is_lost: false,
@@ -2944,11 +3030,8 @@
3030
saveData.after_ms = NETDATA.globalPanAndZoom.force_after_ms;
3031
saveData.before_ms = NETDATA.globalPanAndZoom.force_before_ms;
3032
saveData.duration_ms = saveData.before_ms - saveData.after_ms;
2947
- saveData.data_points = Math.round((saveData.before_ms - saveData.after_ms) / saveData.update_every_ms);
2948
- if(saveData.data_points > 10000) {
2949
- console.log('data points ' + saveData.data_points.toString() + ' is too big - limiting it to 10000');
2950
- saveData.data_points = 10000;
2951
- }
3033
+ saveData.data_points = Math.round((saveData.before_ms - saveData.after_ms) / (saveSnapshotSelectedSecondsPerPoint * 1000));
3034
+ saveSnapshotModalLog('info', 'Generating snapshot with ' + saveData.data_points.toString() + ' data points per dimension...');
3035
3036
var charts_count = 0;
3037
var charts_fetched = 0;
@@ -2983,6 +3066,7 @@
3066
3067
function update_chart(idx) {
3068
if(saveSnapshotStop === true) {
3069
+ saveSnapshotModalLog('info', 'Cancelled!');
3070
saveSnapshotRestore();
3071
return;
3072
}
@@ -3009,6 +3093,7 @@
3093
}
3094
else {
3095
charts_failed++;
3096
+ saveSnapshotModalLog('danger', charts_failed.toString() + ' have failed to be downloaded');
3097
state.log('failed to be updated: ' + reason);
3098
}
3099
@@ -3239,7 +3324,7 @@
3324
//else console.log('el.find(): not found');
3325
});
3326
3242
- $('#saveSnapshotModal').on('shown.bs.modal', saveSnapshotStart);
3327
+ $('#saveSnapshotModal').on('show.bs.modal', saveSnapshotModalInit);
3328
$('#saveSnapshotModal').on('hide.bs.modal', saveSnapshotCancel);
3329
3330
showPageFooter();
@@ -3810,7 +3895,7 @@
3895
</div>
3896
</div>
3897
3813
- <div class="modal fade" id="saveSnapshotModal" tabindex="-1" role="dialog" aria-labelledby="saveSnapshotModalLabel" data-keyboard="false" data-backdrop="static">
3898
+ <div class="modal fade" id="saveSnapshotModal" tabindex="-1" role="dialog" aria-labelledby="saveSnapshotModalLabel">
3899
<div class="modal-dialog modal-lg" role="document">
3900
<div class="modal-content">
3901
<div class="modal-header">
@@ -3818,16 +3903,34 @@
3903
<h4 class="modal-title" id="saveSnapshotModalLabel">Preparing netdata dashboard snapshot...</h4>
3904
</div>
3905
<div class="modal-body">
3821
- Please wait while we collect all the dashboard data...
3822
- <div class="progress progress-striped active" style="height: 2em !important;">
3823
- <div id="saveSnapshotModalProgressBar" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
3824
- <span id="saveSnapshotModalProgressBarText" style="padding-left: 10px; padding-top: 4px; font-size: 1.2em; text-align: left; width: 100%; position: absolute; display: block;"></span>
3906
+ <div id="saveSnapshotModalProgressSection" hidden>
3907
+ Please wait while we collect all the dashboard data...
3908
+ <div class="progress progress-striped active" style="height: 2em !important;">
3909
+ <div id="saveSnapshotModalProgressBar" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
3910
+ <span id="saveSnapshotModalProgressBarText" style="padding-left: 10px; padding-top: 4px; font-size: 1.2em; text-align: left; width: 100%; position: absolute; display: block;"></span>
3911
+ </div>
3912
</div>
3913
</div>
3914
+
3915
+ <div id="saveSnapshotResolutionRadio" style="text-align: center;">
3916
+ Select the desired resolution of the snapshot. This is the <b>seconds of data per point</b>.
3917
+ <br/>
3918
+
3919
+ <br/>
3920
+
3921
+ <br/>
3922
+ <input id="saveSnapshotResolutionSlider" data-slider-id='saveSnapshotResolutionSlider' type="text" style="width: 80%;"/>
3923
+ </div>
3924
+
3925
+
3926
+ <div id="saveSnapshotStatus" class="alert alert-info" role="alert">
3927
+ Select resolution for saving the snapshot.
3928
+ </div>
3929
The generated snapshot will include all charts of this dashboard, for the visible timeframe, so align pan and zoom the charts as need before saving.
3930
The snapshot will be downloaded on your computer, as a JSON file, that can be loaded back into any netdata (no need to load it on this one).
3931
</div>
3932
<div class="modal-footer">
3933
+ <a id="saveSnapshotExport" href="#" onclick="saveSnapshot(); return false;" type="button" class="btn btn-success">Save</a>
3934
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
3935
</div>
3936
</div>