cleaner implementation of global highlighted time-frame
Costa Tsaousis (ktsaou) committed
Nov 23, 2017 at 01:30 UTC
7bc2f742cef4850a6a0bd4ecf240057c261b1612
2 files changed
+124
-65
web/dashboard.js
+101
-29
@@ -306,13 +306,6 @@ var NETDATA = window.NETDATA || {};
306
force_data_points: 0, // force the number of points to be returned for charts
307
fake_chart_rendering: false, // when set to true, the dashboard will download data but will not render the charts
308
309
- highlightCallback: null, // what to call when a highlighted range is setup
310
- highlight_after: null, // highlight after this time
311
- highlight_before: null, // highlight before this time
312
- highlight_view_after: null, // the charts after_ms viewport when the highlight was setup
313
- highlight_view_before: null, // the charts before_ms viewport, when the highlight was setup
314
- highlight_state: null, // the chart the highlight was setup
315
-
309
passive_events: null, // true if the browser supports passive events
310
311
// the current profile
@@ -1345,6 +1338,88 @@ var NETDATA = window.NETDATA || {};
1338
}
1339
};
1340
1341
+ // ----------------------------------------------------------------------------------------------------------------
1342
+ // global chart underlay (time-frame highlighting)
1343
+
1344
+ NETDATA.globalChartUnderlay = {
1345
+ callback: null, // what to call when a highlighted range is setup
1346
+ after: null, // highlight after this time
1347
+ before: null, // highlight before this time
1348
+ view_after: null, // the charts after_ms viewport when the highlight was setup
1349
+ view_before: null, // the charts before_ms viewport, when the highlight was setup
1350
+ state: null, // the chart the highlight was setup
1351
+
1352
+ isActive: function() {
1353
+ return (this.after !== null && this.before !== null);
1354
+ },
1355
+
1356
+ hasViewport: function() {
1357
+ return (this.state !== null && this.view_after !== null && this.view_before !== null);
1358
+ },
1359
+
1360
+ init: function(state, after, before, view_after, view_before) {
1361
+ this.state = (typeof state !== 'undefined') ? state : null;
1362
+ this.after = (typeof after !== 'undefined' && after !== null && after > 0) ? after : null;
1363
+ this.before = (typeof before !== 'undefined' && before !== null && before > 0) ? before : null;
1364
+ this.view_after = (typeof view_after !== 'undefined' && view_after !== null && view_after > 0) ? view_after : null;
1365
+ this.view_before = (typeof view_before !== 'undefined' && view_before !== null && view_before > 0) ? view_before : null;
1366
+ },
1367
+
1368
+ setup: function() {
1369
+ if(this.isActive() === true) {
1370
+ if (this.state === null)
1371
+ this.state = NETDATA.options.targets[0];
1372
+
1373
+ if (this.hasViewport() === true)
1374
+ NETDATA.globalPanAndZoom.setMaster(this.state, this.view_after, this.view_before);
1375
+
1376
+ if (typeof this.callback === 'function')
1377
+ this.callback(true, this.after, this.before);
1378
+ }
1379
+ else {
1380
+ if (typeof this.callback === 'function')
1381
+ this.callback(false, 0, 0);
1382
+ }
1383
+ },
1384
+
1385
+ set: function(state, after, before, view_after, view_before) {
1386
+ if(after > before) {
1387
+ var t = after;
1388
+ after = before;
1389
+ before = t;
1390
+ }
1391
+
1392
+ this.init(state, after, before, view_after, view_before);
1393
+ this.setup();
1394
+ },
1395
+
1396
+ clear: function() {
1397
+ this.after = null;
1398
+ this.before = null;
1399
+ this.state = null;
1400
+ this.view_after = null;
1401
+ this.view_before = null;
1402
+
1403
+ if(NETDATA.globalPanAndZoom.isActive() === true)
1404
+ NETDATA.globalPanAndZoom.clearMaster();
1405
+
1406
+ if(typeof this.callback === 'function')
1407
+ this.callback(false, 0, 0);
1408
+ },
1409
+
1410
+ focus: function() {
1411
+ if(this.isActive() === true && this.hasViewport() === true) {
1412
+ if(this.state === null)
1413
+ this.state = NETDATA.options.targets[0];
1414
+
1415
+ if(NETDATA.globalPanAndZoom.isMaster(this.state) === true)
1416
+ NETDATA.globalPanAndZoom.clearMaster();
1417
+
1418
+ NETDATA.globalPanAndZoom.setMaster(this.state, this.view_after, this.view_before, true);
1419
+ }
1420
+ }
1421
+ };
1422
+
1423
// ----------------------------------------------------------------------------------------------------------------
1424
// dimensions selection
1425
@@ -5059,6 +5134,11 @@ var NETDATA = window.NETDATA || {};
5134
NETDATA.options.targets.push(NETDATA.chartState(targets[len]));
5135
}
5136
5137
+ if(NETDATA.globalChartUnderlay.isActive() === true)
5138
+ NETDATA.globalChartUnderlay.setup();
5139
+ else
5140
+ NETDATA.globalChartUnderlay.clear();
5141
+
5142
if(typeof callback === 'function')
5143
return callback();
5144
};
@@ -5068,11 +5148,12 @@ var NETDATA = window.NETDATA || {};
5148
NETDATA.start = function() {
5149
// this should be called only once
5150
5071
- if(NETDATA.started === true)
5151
+ if(NETDATA.started === true) {
5152
console.log('netdata is already started');
5153
+ return;
5154
+ }
5155
5156
NETDATA.started = true;
5075
-
5157
NETDATA.options.page_is_visible = true;
5158
5159
$(window).blur(function() {
@@ -5783,9 +5864,9 @@ var NETDATA = window.NETDATA || {};
5864
// the chart is about to be drawn
5865
// this function renders global highlighted time-frame
5866
5786
- if(NETDATA.options.highlight_after !== null && NETDATA.options.highlight_before !== null) {
5787
- var after = NETDATA.options.highlight_after;
5788
- var before = NETDATA.options.highlight_before;
5867
+ if(NETDATA.globalChartUnderlay.isActive()) {
5868
+ var after = NETDATA.globalChartUnderlay.after;
5869
+ var before = NETDATA.globalChartUnderlay.before;
5870
5871
if(after < state.view_after)
5872
after = state.view_after;
@@ -5927,27 +6008,18 @@ var NETDATA = window.NETDATA || {};
6008
event.offsetY = event.layerY - event.target.offsetTop;
6009
}
6010
5930
- context.isZooming = false;
5931
- NETDATA.options.highlight_after = state.tmp.dygraph_highlight_after;
5932
- NETDATA.options.highlight_before = dygraph.toDataXCoord(event.offsetX);
5933
-
5934
- if(NETDATA.options.highlight_after > NETDATA.options.highlight_before) {
5935
- var t = NETDATA.options.highlight_after;
5936
- NETDATA.options.highlight_after = NETDATA.options.highlight_before;
5937
- NETDATA.options.highlight_before = t;
5938
- }
6011
+ NETDATA.globalChartUnderlay.set(state
6012
+ , state.tmp.dygraph_highlight_after
6013
+ , dygraph.toDataXCoord(event.offsetX)
6014
+ , state.view_after
6015
+ , state.view_before
6016
+ );
6017
6018
state.tmp.dygraph_highlight_after = null;
6019
+
6020
+ context.isZooming = false;
6021
dygraph.clearZoomRect_();
6022
dygraph.drawGraph_(false);
5943
- NETDATA.globalPanAndZoom.setMaster(state, state.view_after, state.view_before);
5944
-
5945
- NETDATA.options.highlight_state = state;
5946
- NETDATA.options.highlight_view_after = state.view_after;
5947
- NETDATA.options.highlight_view_before = state.view_before;
5948
-
5949
- if(typeof NETDATA.options.highlightCallback === 'function')
5950
- NETDATA.options.highlightCallback(true, NETDATA.options.highlight_after, NETDATA.options.highlight_before);
6023
}
6024
else if (context.isPanning) {
6025
//console.log('done panning');
web/index.html
+23
-36
@@ -701,12 +701,7 @@
701
urlOptions.highlight_before = Math.round(before);
702
urlOptions.hashUpdate();
703
704
- if(NETDATA.options.highlight_view_after === null || NETDATA.options.highlight_view_before === null || NETDATA.options.highlight_state === null) {
705
- NETDATA.options.highlight_view_after = (urlOptions.after > 0) ? urlOptions.after : null ;
706
- NETDATA.options.highlight_view_before = (urlOptions.before > 0) ? urlOptions.before : null ;
707
- NETDATA.options.highlight_state = NETDATA.options.targets[0];
708
- }
709
- var show_eye = (!(NETDATA.options.highlight_view_after === null || NETDATA.options.highlight_view_before === null || NETDATA.options.highlight_state === null));
704
+ var show_eye = NETDATA.globalChartUnderlay.hasViewport();
705
706
if(status === true && after > 0 && before > 0 && after < before) {
707
var d1 = NETDATA.dateTime.localeDateString(after);
@@ -731,25 +726,11 @@
726
},
727
728
clearHighlight: function() {
734
- NETDATA.options.highlight_after = null;
735
- NETDATA.options.highlight_before = null;
736
- NETDATA.options.highlight_view_after = null;
737
- NETDATA.options.highlight_vew_before = null;
738
- NETDATA.options.highlight_state = null;
739
-
740
- if(NETDATA.globalPanAndZoom.isActive() === true)
741
- NETDATA.globalPanAndZoom.clearMaster();
742
-
743
- urlOptions.netdataHighlightCallback(false, 0, 0);
729
+ NETDATA.globalChartUnderlay.clear();
730
},
731
732
showHighlight: function() {
747
- if(NETDATA.options.highlight_view_after !== null && NETDATA.options.highlight_view_before !== null && NETDATA.options.highlight_state !== null) {
748
- if(NETDATA.globalPanAndZoom.isMaster(NETDATA.options.highlight_state) === true)
749
- NETDATA.globalPanAndZoom.clearMaster();
750
-
751
- NETDATA.globalPanAndZoom.setMaster(NETDATA.options.highlight_state, NETDATA.options.highlight_view_after, NETDATA.options.highlight_view_before, true);
752
- }
733
+ NETDATA.globalChartUnderlay.focus();
734
}
735
};
736
@@ -1902,11 +1883,15 @@
1883
div.innerHTML = html;
1884
document.getElementById('sidebar').innerHTML = sidebar;
1885
1905
- if(urlOptions.highlight === true) {
1906
- NETDATA.options.highlight_after = urlOptions.highlight_after;
1907
- NETDATA.options.highlight_before = urlOptions.highlight_before;
1908
- urlOptions.netdataHighlightCallback(urlOptions.highlight, urlOptions.highlight_after, urlOptions.highlight_before);
1909
- }
1886
+ if(urlOptions.highlight === true)
1887
+ NETDATA.globalChartUnderlay.init(null
1888
+ , urlOptions.highlight_after
1889
+ , urlOptions.highlight_before
1890
+ , (urlOptions.after > 0) ? urlOptions.after : null
1891
+ , (urlOptions.before > 0) ? urlOptions.before : null
1892
+ );
1893
+ else
1894
+ NETDATA.globalChartUnderlay.clear();
1895
1896
if(urlOptions.mode === 'print')
1897
printPage();
@@ -3180,6 +3165,9 @@
3165
tmpSnapshotData.uncompress = snapshotOptions.compressions[tmpSnapshotData.compression].uncompress;
3166
netdataSnapshotData = tmpSnapshotData;
3167
3168
+ urlOptions.after = tmpSnapshotData.after_ms;
3169
+ urlOptions.before = tmpSnapshotData.before_ms;
3170
+
3171
if( typeof tmpSnapshotData.highlight_after_ms !== 'undefined'
3172
&& tmpSnapshotData.highlight_after_ms !== null
3173
&& tmpSnapshotData.highlight_after_ms > 0
@@ -3187,14 +3175,14 @@
3175
&& tmpSnapshotData.highlight_before_ms !== null
3176
&& tmpSnapshotData.highlight_before_ms > 0
3177
) {
3190
- NETDATA.options.highlight_after = tmpSnapshotData.highlight_after_ms;
3191
- NETDATA.options.highlight_before = tmpSnapshotData.highlight_before_ms;
3192
- urlOptions.netdataHighlightCallback(true, tmpSnapshotData.highlight_after_ms, tmpSnapshotData.highlight_before_ms);
3178
+ urlOptions.highlight_after = tmpSnapshotData.highlight_after_ms;
3179
+ urlOptions.highlight_before = tmpSnapshotData.highlight_before_ms;
3180
+ urlOptions.highlight = true;
3181
}
3182
else {
3195
- NETDATA.options.highlight_after = null;
3196
- NETDATA.options.highlight_before = null;
3197
- urlOptions.netdataHighlightCallback(false, 0, 0);
3183
+ urlOptions.highlight_after = 0;
3184
+ urlOptions.highlight_before = 0;
3185
+ urlOptions.highlight = false;
3186
}
3187
3188
initializeDynamicDashboard();
@@ -3272,7 +3260,6 @@
3260
e.stopPropagation();
3261
})
3262
.on('drop', function (e) {
3275
- console.log(e);
3263
if(e.originalEvent.dataTransfer.files.length) {
3264
loadSnapshotPreflightFile(e.originalEvent.dataTransfer.files.item(0));
3265
}
@@ -3789,7 +3776,7 @@
3776
3777
// callback for us to track PanAndZoom operations
3778
NETDATA.globalPanAndZoom.callback = urlOptions.netdataPanAndZoomCallback;
3792
- NETDATA.options.highlightCallback = urlOptions.netdataHighlightCallback;
3779
+ NETDATA.globalChartUnderlay.callback = urlOptions.netdataHighlightCallback;
3780
3781
// let it run (update the charts)
3782
NETDATA.unpause();
@@ -5407,6 +5394,6 @@
5394
</div>
5395
</div>
5396
<div id="hiddenDownloadLinks" style="display: none;" hidden></div>
5410
- <script type="text/javascript" src="dashboard.js?v20171122-2"></script>
5397
+ <script type="text/javascript" src="dashboard.js?v20171122-3"></script>
5398
</body>
5399
</html>