almost complete load/save; no rendering of loading dashboards yet
Costa Tsaousis (ktsaou) committed
Nov 12, 2017 at 05:52 UTC
29e8b26d9f3ac32831616c0fbe1b39f971c35e65
2 files changed
+62
-7
web/dashboard.js
+20
-3
@@ -297,6 +297,9 @@ var NETDATA = window.NETDATA || {};
297
browser_timezone: 'unknown', // timezone detected by javascript
298
server_timezone: 'unknown', // timezone reported by the server
299
300
+ force_data_points: 0, // force the number of points to be returned for charts
301
+ fake_chart_rendering: false, // when set to true, the dashboard will download data but will not render the charts
302
+
303
// the current profile
304
// we may have many...
305
current: {
@@ -2506,6 +2509,9 @@ var NETDATA = window.NETDATA || {};
2509
if(canBeRendered() === false)
2510
return false;
2511
2512
+ if(NETDATA.options.fake_chart_rendering === true)
2513
+ return true;
2514
+
2515
if(NETDATA.options.debug.chart_errors === true)
2516
status = that.library.update(that, data);
2517
else {
@@ -2532,6 +2538,9 @@ var NETDATA = window.NETDATA || {};
2538
if(canBeRendered() === false)
2539
return false;
2540
2541
+ if(NETDATA.options.fake_chart_rendering === true)
2542
+ return true;
2543
+
2544
if(NETDATA.options.debug.chart_errors === true)
2545
status = that.library.create(that, data);
2546
else {
@@ -3946,12 +3955,20 @@ var NETDATA = window.NETDATA || {};
3955
this.requested_after = after * 1000;
3956
this.requested_before = before * 1000;
3957
3949
- this.data_points = this.points || Math.round(this.chartWidth() / this.chartPixelsPerPoint());
3958
+ var data_points;
3959
+ if(NETDATA.options.force_data_points !== 0) {
3960
+ data_points = NETDATA.options.force_data_points;
3961
+ this.data_points = data_points;
3962
+ }
3963
+ else {
3964
+ this.data_points = this.points || Math.round(this.chartWidth() / this.chartPixelsPerPoint());
3965
+ data_points = this.data_points * points_multiplier;
3966
+ }
3967
3968
// build the data URL
3969
this.data_url = this.host + this.chart.data_url;
3970
this.data_url += "&format=" + this.library.format();
3954
- this.data_url += "&points=" + (this.data_points * points_multiplier).toString();
3971
+ this.data_url += "&points=" + (data_points).toString();
3972
this.data_url += "&group=" + this.method;
3973
3974
if(this.override_options !== null)
@@ -3977,7 +3994,7 @@ var NETDATA = window.NETDATA || {};
3994
this.data_url += "&dimensions=" + this.dimensions;
3995
3996
if(NETDATA.options.debug.chart_data_url === true || this.debug === true)
3980
- this.log('chartURL(): ' + this.data_url + ' WxH:' + this.chartWidth() + 'x' + this.chartHeight() + ' points: ' + this.data_points + ' library: ' + this.library_name);
3997
+ this.log('chartURL(): ' + this.data_url + ' WxH:' + this.chartWidth() + 'x' + this.chartHeight() + ' points: ' + data_points.toString() + ' library: ' + this.library_name);
3998
};
3999
4000
this.redrawChart = function() {
web/index.html
+42
-4
@@ -1070,6 +1070,9 @@
1070
families_idx: {},
1071
hosts: [],
1072
1073
+ duration: 0, // the default duration of the charts
1074
+ update_every: 1,
1075
+
1076
chartsPerRow: 0,
1077
// chartsMinWidth: 1450,
1078
chartsHeight: 180
@@ -1606,6 +1609,9 @@
1609
1610
// find the proper duration for per-second updates
1611
var duration = Math.round(($(div).width() * pcent_width / 100 * data.update_every / 3) / 60) * 60;
1612
+ options.duration = duration;
1613
+ options.update_every = data.update_every;
1614
+
1615
var html = '';
1616
var sidebar = '<ul class="nav dashboard-sidenav" data-spy="affix" id="sidebar_ul">';
1617
var mainhead = headMain(netdataDashboard.os, data.charts, duration);
@@ -2793,12 +2799,20 @@
2799
document.getElementById('loadJSONNetdataVersion').innerHTML = result.charts.version;
2800
document.getElementById('loadJSONCharts').innerHTML = result.charts.charts_count.toString() + ' charts / ' + result.charts.dimensions_count.toString() + ' dimensions';
2801
2802
+ var date_after = new Date(result.after_ms);
2803
+ var date_before = new Date(result.before_ms);
2804
+ console.log(date_after);
2805
+ console.log(date_before);
2806
+ document.getElementById('loadJSONTimeRange').innerHTML = NETDATA.dateTime.localeDateString(date_after) + ' ' + NETDATA.dateTime.localeTimeString(date_after) + ' to ' + NETDATA.dateTime.localeDateString(date_before) + ' ' + NETDATA.dateTime.localeTimeString(date_before);
2807
+ document.getElementById('loadJSONDataResolution').innerHTML = Math.round(result.duration_ms / result.data_points).toString() + ' ms per point, ' + result.data_points.toString() + ' points per dimension';
2808
+
2809
document.getElementById('loadJSONStatus').className = "alert alert-success";
2810
document.getElementById('loadJSONStatus').innerHTML = "File loaded, click <b>Import</b> to render it!";
2811
$('#loadJSONImport').prop('disabled', false);
2812
$('#loadJSONImport').removeAttr('disabled');
2813
}
2814
catch(e) {
2815
+ console.log(e);
2816
document.getElementById('loadJSONStatus').className = "alert alert-danger";
2817
document.getElementById('loadJSONStatus').innerHTML = "Failed to parse this file!";
2818
}
@@ -2842,9 +2856,26 @@
2856
var eltxt = document.getElementById('saveModalProgressBarText');
2857
2858
var saveJSON = {
2859
+ after_ms: Date.now() - options.duration * 1000,
2860
+ before_ms: Date.now(),
2861
+ duration_ms: options.duration * 1000,
2862
+ update_every_ms: options.update_every * 1000,
2863
+ data_points: 0,
2864
charts: {},
2865
data: {}
2866
}
2867
+
2868
+ var clearPanAndZoom = false;
2869
+ if(NETDATA.globalPanAndZoom.isActive() === false) {
2870
+ NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], saveJSON.after_ms, saveJSON.before_ms);
2871
+ clearPanAndZoom = true;
2872
+ }
2873
+
2874
+ saveJSON.after_ms = NETDATA.globalPanAndZoom.force_after_ms;
2875
+ saveJSON.before_ms = NETDATA.globalPanAndZoom.force_before_ms;
2876
+ saveJSON.duration_ms = saveJSON.before_ms - saveJSON.after_ms;
2877
+ saveJSON.data_points = Math.round((saveJSON.before_ms - saveJSON.after_ms) / saveJSON.update_every_ms);
2878
+
2879
var charts_count = 0;
2880
var charts_fetched = 0;
2881
var charts_failed = 0;
@@ -2862,11 +2893,19 @@
2893
$(el).css('width', '0%').attr('aria-valuenow', 0);
2894
eltxt.innerText = '0%';
2895
2896
+ if(clearPanAndZoom)
2897
+ NETDATA.globalPanAndZoom.clearMaster();
2898
+
2899
+ NETDATA.options.force_data_points = 0;
2900
+ NETDATA.options.fake_chart_rendering = false;
2901
+ NETDATA.onresize();
2902
NETDATA.unpause();
2903
}
2904
2905
NETDATA.pause(function() {
2906
NETDATA.globalSelectionSync.stop();
2907
+ NETDATA.options.force_data_points = saveJSON.data_points;
2908
+ NETDATA.options.fake_chart_rendering = true;
2909
2910
function update_chart(idx) {
2911
if(savePageStop === true) {
@@ -3667,7 +3706,7 @@
3706
<div class="modal-content">
3707
<div class="modal-header">
3708
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
3670
- <h4 class="modal-title" id="loadModalLabel">Select JSON file to load...</h4>
3709
+ <h4 class="modal-title" id="loadModalLabel">Load a netdata dashboard snapshot...</h4>
3710
</div>
3711
<div class="modal-body">
3712
<p>
@@ -3690,8 +3729,7 @@
3729
<tr><th>Filename</th><td id="loadJSONFilename"></td></tr>
3730
<tr><th>Hostname</th><td id="loadJSONHostname"></td></tr>
3731
<tr><th>Netdata Version</th><td id="loadJSONNetdataVersion"></td></tr>
3693
- <tr><th>DateTime From</th><td></td id="loadJSONDateTimeFrom"></tr>
3694
- <tr><th>DateTime To</th><td></td id="loadJSONDateTimeTo"></tr>
3732
+ <tr><th>Time Range</th><td id="loadJSONTimeRange"></td></tr>
3733
<tr><th>Charts</th><td id="loadJSONCharts"></td></tr>
3734
<tr><th>Data Resolution</th><td id="loadJSONDataResolution"></td></tr>
3735
</tbody>
@@ -4597,6 +4635,6 @@
4635
</div>
4636
</div>
4637
</div>
4600
- <script type="text/javascript" src="dashboard.js?v20171111-12"></script>
4638
+ <script type="text/javascript" src="dashboard.js?v20171112-13"></script>
4639
</body>
4640
</html>