transfer pan and zoom, theme and help settings from netdata to netdata via the my-netdata menu
Costa Tsaousis committed
Aug 9, 2016 at 00:08 UTC
7132c7d35046d453fda192aaf7311d8a9feaaf7f
2 files changed
+193
-50
web/dashboard.js
+15
-2
@@ -15,6 +15,7 @@
15
// var netdataNoRegistry = true; // Don't update the registry for this access
16
// var netdataRegistryCallback = null; // Callback function that will be invoked with one param,
17
// the URLs from the registry
18
+// var netdataShowHelp = true; // enable/disable help
19
//
20
// You can also set the default netdata server, using the following.
21
// When this variable is not set, we assume the page is hosted on your
@@ -153,6 +154,9 @@
154
else
155
NETDATA.themes.current = NETDATA.themes.white;
156
157
+ if(typeof netdataShowHelp === 'undefined')
158
+ netdataShowHelp = true;
159
+
160
NETDATA.colors = NETDATA.themes.current.colors;
161
162
// these are the colors Google Charts are using
@@ -268,7 +272,7 @@
272
273
destroy_on_hide: false, // destroy charts when they are not visible
274
271
- show_help: true, // when enabled the charts will show some help
275
+ show_help: netdataShowHelp, // when enabled the charts will show some help
276
show_help_delay_show_ms: 500,
277
show_help_delay_hide_ms: 0,
278
@@ -337,6 +341,7 @@
341
try {
342
// console.log('localStorage: loading "' + key.toString() + '"');
343
ret = localStorage.getItem(key.toString());
344
+ // console.log('netdata loaded: ' + key.toString() + ' = ' + ret.toString());
345
if(ret === null || ret === 'undefined') {
346
// console.log('localStorage: cannot load it, saving "' + key.toString() + '" with value "' + JSON.stringify(def) + '"');
347
localStorage.setItem(key.toString(), JSON.stringify(def));
@@ -624,6 +629,8 @@
629
force_before_ms: null, // the timespan to sync all other charts
630
force_after_ms: null,
631
632
+ callback: null,
633
+
634
// set a new master
635
setMaster: function(state, after, before) {
636
if(NETDATA.options.current.sync_pan_and_zoom === false)
@@ -638,6 +645,9 @@
645
this.force_after_ms = after;
646
this.force_before_ms = before;
647
NETDATA.options.auto_refresher_stop_until = now + NETDATA.options.current.global_pan_sync_time;
648
+
649
+ if(typeof this.callback === 'function')
650
+ this.callback(true, after, before);
651
},
652
653
// clear the master
@@ -653,6 +663,9 @@
663
this.force_after_ms = null;
664
this.force_before_ms = null;
665
NETDATA.options.auto_refresher_stop_until = 0;
666
+
667
+ if(typeof this.callback === 'function')
668
+ this.callback(false, 0, 0);
669
},
670
671
// is the given state the master of the global
@@ -3395,7 +3408,7 @@
3408
NETDATA.parseDom(NETDATA.chartRefresher);
3409
3410
// Registry initialization
3398
- setTimeout(NETDATA.registry.init, 3000);
3411
+ setTimeout(NETDATA.registry.init, 1000);
3412
};
3413
3414
// ----------------------------------------------------------------------------------------------------------------
web/index.html
+178
-48
@@ -42,6 +42,20 @@
42
padding-top: 50px;
43
}
44
45
+ .loadOverlay {
46
+ position: absolute;
47
+ top: 0px;
48
+ left: 0px;
49
+ width: 100%;
50
+ height:100%;
51
+ z-index: 2000;
52
+ font-size: 10vh;
53
+ font-family: sans-serif;
54
+ padding: 40vh 0 40vh 0;
55
+ font-weight: bold;
56
+ text-align: center;
57
+ }
58
+
59
.modal-wide .modal-dialog {
60
width: 80%;
61
}
@@ -321,12 +335,79 @@
335
}
336
</style>
337
324
- <!-- you can set your netdata server globally, by ucommenting this -->
325
- <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
326
- <!-- <script> netdataServer = "http://box:19999"; </script> -->
327
-
338
<!-- check which theme to use -->
329
- <script>
339
+ <script type="text/javascript">
340
+ // --------------------------------------------------------------------
341
+ // urlOptions
342
+
343
+ var urlOptions = {
344
+ hash: '#',
345
+ theme: null,
346
+ help: null,
347
+ pan_and_zoom: false,
348
+ after: 0,
349
+ before: 0,
350
+ nowelcome: 0,
351
+ hasProperty: function(property) {
352
+ // console.log('checking property ' + property + ' of type ' + typeof(this[property]));
353
+ return typeof this[property] !== 'undefined';
354
+ }
355
+ };
356
+
357
+ function netdataPanAndZoomCallback(status, after, before) {
358
+ urlOptions.pan_and_zoom = status;
359
+ urlOptions.after = after;
360
+ urlOptions.before = before;
361
+ netdataHashUpdate();
362
+ }
363
+
364
+ function netdataHashUpdate() {
365
+ history.replaceState(null, document.title, netdataHash());
366
+ }
367
+
368
+ function netdataHash() {
369
+ var hash = urlOptions.hash;
370
+
371
+ if(urlOptions.pan_and_zoom === true) {
372
+ hash += ';after=' + urlOptions.after.toString() +
373
+ ';before=' + urlOptions.before.toString();
374
+ }
375
+
376
+ if(urlOptions.theme !== null)
377
+ hash += ';theme=' + urlOptions.theme.toString();
378
+
379
+ if(urlOptions.help !== null)
380
+ hash += ';help=' + urlOptions.help.toString();
381
+
382
+ return hash;
383
+ }
384
+
385
+ function netdataHashParse() {
386
+ var variables = document.location.hash.split(';');
387
+ var len = variables.length;
388
+ while(len--) {
389
+ if(len !== 0) {
390
+ var p = variables[len].split('=');
391
+ if(urlOptions.hasProperty(p[0]) && typeof p[1] !== 'undefined')
392
+ urlOptions[p[0]] = p[1];
393
+ }
394
+ else {
395
+ if(variables[len].length > 0)
396
+ urlOptions.hash = variables[len];
397
+ }
398
+ }
399
+
400
+ if(urlOptions.before > 0 && urlOptions.after > 0)
401
+ urlOptions.pan_and_zoom = true;
402
+
403
+ // console.log(urlOptions);
404
+ }
405
+
406
+ netdataHashParse();
407
+
408
+ // --------------------------------------------------------------------
409
+ // check options that should be processed before loading netdata.js
410
+
411
function loadLocalStorage(name) {
412
var ret = null;
413
@@ -341,10 +422,13 @@
422
if(typeof ret === 'undefined' || ret === null)
423
return null;
424
425
+ // console.log('loaded: ' + name.toString() + ' = ' + ret.toString());
426
+
427
return ret;
428
}
429
430
function saveLocalStorage(name, value) {
431
+ // console.log('saving: ' + name.toString() + ' = ' + value.toString());
432
try {
433
if(typeof Storage !== "undefined" && typeof localStorage === 'object') {
434
localStorage.setItem(name, value.toString());
@@ -366,14 +450,32 @@
450
return ret;
451
}
452
369
- var netdataTheme = getTheme('slate');
370
-
453
function setTheme(theme) {
454
if(theme === netdataTheme) return false;
373
-
455
return saveLocalStorage('netdataTheme', theme);
456
}
457
458
+ var netdataTheme = getTheme('slate');
459
+ var netdataShowHelp = true;
460
+
461
+ if(urlOptions.theme !== null) {
462
+ setTheme(urlOptions.theme);
463
+ netdataTheme = urlOptions.theme;
464
+ }
465
+ else
466
+ urlOptions.theme = netdataTheme;
467
+
468
+ if(urlOptions.help !== null) {
469
+ saveLocalStorage('options.show_help', urlOptions.help);
470
+ netdataShowHelp = urlOptions.help;
471
+ }
472
+ else {
473
+ urlOptions.help = loadLocalStorage('options.show_help');
474
+ }
475
+
476
+ // --------------------------------------------------------------------
477
+ // registry call back to render my-netdata menu
478
+
479
var netdataRegistryCallback = function(machines_array) {
480
var el = '';
481
var a1 = '';
@@ -430,10 +532,16 @@
532
</script>
533
534
<!-- load the dashboard manager - it will do the rest -->
433
- <script type="text/javascript" src="dashboard.js?v40"></script>
535
+ <script type="text/javascript" src="dashboard.js?v41"></script>
536
</head>
435
-
537
<body data-spy="scroll" data-target="#sidebar">
538
+ <div id="loadOverlay" class="loadOverlay" style="background-color: #888; color: #888;">
539
+ netdata<br/><div style="font-size: 3vh;">Real-time performance monitoring, done right!</div>
540
+ </div>
541
+ <script type="text/javascript">
542
+ // change the loadOverlay colors ASAP to match the theme
543
+ document.getElementById('loadOverlay').style = (urlOptions.theme === 'slate')?"background-color:#272b30; color: #373b40;":"background-color:#fff; color: #ddd;";
544
+ </script>
545
<nav class="navbar navbar-default navbar-fixed-top" role="banner">
546
<div class="container">
547
<nav id="mynetdata_nav" class="collapse navbar-collapse navbar-left hidden-sm hidden-xs" role="navigation" style="padding-right: 20px;">
@@ -995,7 +1103,7 @@
1103
</div>
1104
</div>
1105
998
-<script>
1106
+<script type="text/javascript">
1107
var this_is_demo = null;
1108
function isdemo() {
1109
if(this_is_demo !== null) return this_is_demo;
@@ -1021,6 +1129,31 @@ function isdemo() {
1129
if(isdemo()) {
1130
document.getElementById('masthead').style.display = 'block';
1131
}
1132
+
1133
+function netdataURL(url) {
1134
+ if(typeof url === 'undefined')
1135
+ url = document.location.toString();
1136
+
1137
+ if(url.indexOf('#') !== -1)
1138
+ url = url.substring(0, url.indexOf('#'));
1139
+
1140
+ var hash = netdataHash();
1141
+
1142
+ // console.log('netdataURL: ' + url + hash);
1143
+
1144
+ return url + hash;
1145
+}
1146
+
1147
+function netdataReload(url) {
1148
+ var t = netdataURL(url);
1149
+ // console.log('netdataReload: ' + t);
1150
+ document.location = t;
1151
+
1152
+ // since we play with hash
1153
+ // this is needed to reload the page
1154
+ location.reload();
1155
+}
1156
+
1157
var gotoServerValidateRemaining = 0;
1158
var gotoServerMiddleClick = false;
1159
var gotoServerStop = false;
@@ -1031,25 +1164,26 @@ function gotoServerValidateUrl(id, guid, url) {
1164
// to allow the user walk through all its servers.
1165
penaldy = 500;
1166
1167
+ var finalURL = netdataURL(url);
1168
+
1169
setTimeout(function() {
1035
- document.getElementById('gotoServerList').innerHTML += '<tr><td style="padding-left: 20px;"><a href="' + url + '" target="_blank">' + url + '</a></td><td style="padding-left: 30px;"><code id="' + guid + '-' + id + '-status">checking...</code></td></tr>';
1170
+ document.getElementById('gotoServerList').innerHTML += '<tr><td style="padding-left: 20px;"><a href="' + finalURL + '" target="_blank">' + url + '</a></td><td style="padding-left: 30px;"><code id="' + guid + '-' + id + '-status">checking...</code></td></tr>';
1171
1172
NETDATA.registry.hello(url, function(data) {
1173
if (data) {
1174
// console.log('OK ' + id + ' URL: ' + url);
1175
document.getElementById(guid + '-' + id + '-status').innerHTML = "OK";
1041
- var hash = document.location.hash || '';
1176
1177
if(!gotoServerStop) {
1178
gotoServerStop = true;
1179
1180
if(gotoServerMiddleClick) {
1047
- window.open(url + hash, '_blank');
1181
+ window.open(finalURL, '_blank');
1182
gotoServerMiddleClick = false;
1049
- document.getElementById('gotoServerResponse').innerHTML = '<b>Opening new window to ' + NETDATA.registry.machines[guid].name + '<br/><a href="' + url + hash + '">' + url + hash + '</a></b><br/>(check your pop-up blocker if it fails)';
1183
+ document.getElementById('gotoServerResponse').innerHTML = '<b>Opening new window to ' + NETDATA.registry.machines[guid].name + '<br/><a href="' + finalURL + '">' + url + '</a></b><br/>(check your pop-up blocker if it fails)';
1184
}
1185
else
1052
- document.location = url + hash;
1186
+ document.location = finalURL;
1187
}
1188
}
1189
else {
@@ -2215,6 +2349,8 @@ function downloadAllCharts(netdata_url) {
2349
netdata_url = NETDATA.serverDefault;
2350
2351
NETDATA.pause(function() {
2352
+ $("#loadOverlay").css("display","none");
2353
+ $("#loadOverlay").css("display","none");
2354
2355
// download all the charts the server knows
2356
NETDATA.chartRegistry.downloadAll(netdata_url, function(data) {
@@ -2358,21 +2494,6 @@ function notifyForUpdate(force) {
2494
2495
// ----------------------------------------------------------------------------
2496
2361
-function getUrlParameter(sParam) {
2362
- var sPageURL = decodeURIComponent(window.location.search.substring(1)),
2363
- sURLVariables = sPageURL.split('&'),
2364
- sParameterName,
2365
- i;
2366
-
2367
- for (i = 0; i < sURLVariables.length; i++) {
2368
- sParameterName = sURLVariables[i].split('=');
2369
-
2370
- if (sParameterName[0] === sParam) {
2371
- return sParameterName[1] === undefined ? true : sParameterName[1];
2372
- }
2373
- }
2374
-}
2375
-
2497
function finalizePage() {
2498
// resize all charts - without starting the background thread
2499
// this has to be done while NETDATA is paused
@@ -2380,14 +2501,9 @@ function finalizePage() {
2501
// the Dom elements are initially zero-sized
2502
NETDATA.parseDom();
2503
2383
- var before = 0, after = 0, nowelcome = 0;
2384
- after = getUrlParameter('force_after_ms');
2385
- before = getUrlParameter('force_before_ms');
2386
- nowelcome = (getUrlParameter('nowelcome') === true)?true:false;
2387
-
2388
- if(before > 0 && after > 0) {
2389
- nowelcome = true;
2390
- NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], after, before);
2504
+ if(urlOptions.pan_and_zoom === true) {
2505
+ urlOptions.nowelcome = true;
2506
+ NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], urlOptions.after, urlOptions.before);
2507
}
2508
2509
// ------------------------------------------------------------------------
@@ -2525,11 +2641,14 @@ function finalizePage() {
2641
$(".chart-message").shorten();
2642
// ------------------------------------------------------------------------
2643
2644
+ // callback for us to track PanAndZoom operations
2645
+ NETDATA.globalPanAndZoom.callback = netdataPanAndZoomCallback;
2646
+
2647
// let it run (update the charts)
2648
NETDATA.unpause();
2649
2650
// check if we have to jump to a specific section
2532
- scrollToId(location.hash.replace('#',''));
2651
+ scrollToId(urlOptions.hash.replace('#',''));
2652
2653
/* activate bootstrap sidebar (affix) */
2654
$('#sidebar').affix({
@@ -2555,8 +2674,14 @@ function finalizePage() {
2674
// change the URL based on the current position of the screen
2675
$('#sidebar').on('activate.bs.scrollspy', function (e) {
2676
var el = $(e.target);
2558
- if(el.find('ul').size() == 0)
2559
- history.replaceState(null, document.title, el.find('a').attr('href'));
2677
+ if(el.find('ul').size() == 0) {
2678
+ var hash = el.find('a').attr('href');
2679
+ if(typeof hash === 'string' && hash.substring(0, 1) == '#') {
2680
+ urlOptions.hash = hash;
2681
+ // console.log(urlOptions.hash);
2682
+ netdataHashUpdate();
2683
+ }
2684
+ }
2685
});
2686
2687
document.getElementById('footer').style.display = 'block';
@@ -2610,13 +2735,18 @@ function finalizePage() {
2735
$('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); });
2736
$('#smooth_plot').change(function() { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
2737
$('#pan_and_zoom_data_padding').change(function() { NETDATA.setOption('pan_and_zoom_data_padding', $(this).prop('checked')); });
2613
- $('#show_help').change(function() { NETDATA.setOption('show_help', $(this).prop('checked')); location.reload(); });
2738
+ $('#show_help').change(function() {
2739
+ urlOptions.help = $(this).prop('checked');
2740
+ NETDATA.setOption('show_help', urlOptions.help);
2741
+ netdataReload();
2742
+ });
2743
2744
// this has to be the last
2745
// it reloads the page
2746
$('#netdata_theme_control').change(function() {
2618
- if(setTheme($(this).prop('checked')?'slate':'white'))
2619
- location.reload();
2747
+ urlOptions.theme = $(this).prop('checked')?'slate':'white';
2748
+ if(setTheme(urlOptions.theme))
2749
+ netdataReload();
2750
});
2751
2752
$('#updateModal').on('shown.bs.modal', function() {
@@ -2628,7 +2758,7 @@ function finalizePage() {
2758
});
2759
2760
if(isdemo()) {
2631
- if(!nowelcome) {
2761
+ if(!urlOptions.nowelcome) {
2762
setTimeout(function() {
2763
$('#welcomeModal').modal();
2764
}, 1000);
@@ -2654,10 +2784,10 @@ function resetDashboardOptions() {
2784
2785
NETDATA.resetOptions();
2786
if(setTheme('slate'))
2657
- location.reload();
2787
+ netdataReload();
2788
2789
if(help !== NETDATA.options.current.show_help)
2660
- location.reload();
2790
+ netdataReload();
2791
}
2792
2793
downloadAllCharts();