padding-top: 50px;
}
+ .loadOverlay {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height:100%;
+ z-index: 2000;
+ font-size: 10vh;
+ font-family: sans-serif;
+ padding: 40vh 0 40vh 0;
+ font-weight: bold;
+ text-align: center;
+ }
+
.modal-wide .modal-dialog {
width: 80%;
}
}
</style>
- <!-- you can set your netdata server globally, by ucommenting this -->
- <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
- <!-- <script> netdataServer = "http://box:19999"; </script> -->
-
<!-- check which theme to use -->
- <script>
+ <script type="text/javascript">
+ // --------------------------------------------------------------------
+ // urlOptions
+
+ var urlOptions = {
+ hash: '#',
+ theme: null,
+ help: null,
+ pan_and_zoom: false,
+ after: 0,
+ before: 0,
+ nowelcome: 0,
+ hasProperty: function(property) {
+ // console.log('checking property ' + property + ' of type ' + typeof(this[property]));
+ return typeof this[property] !== 'undefined';
+ }
+ };
+
+ function netdataPanAndZoomCallback(status, after, before) {
+ urlOptions.pan_and_zoom = status;
+ urlOptions.after = after;
+ urlOptions.before = before;
+ netdataHashUpdate();
+ }
+
+ function netdataHashUpdate() {
+ history.replaceState(null, document.title, netdataHash());
+ }
+
+ function netdataHash() {
+ var hash = urlOptions.hash;
+
+ if(urlOptions.pan_and_zoom === true) {
+ hash += ';after=' + urlOptions.after.toString() +
+ ';before=' + urlOptions.before.toString();
+ }
+
+ if(urlOptions.theme !== null)
+ hash += ';theme=' + urlOptions.theme.toString();
+
+ if(urlOptions.help !== null)
+ hash += ';help=' + urlOptions.help.toString();
+
+ return hash;
+ }
+
+ function netdataHashParse() {
+ var variables = document.location.hash.split(';');
+ var len = variables.length;
+ while(len--) {
+ if(len !== 0) {
+ var p = variables[len].split('=');
+ if(urlOptions.hasProperty(p[0]) && typeof p[1] !== 'undefined')
+ urlOptions[p[0]] = p[1];
+ }
+ else {
+ if(variables[len].length > 0)
+ urlOptions.hash = variables[len];
+ }
+ }
+
+ if(urlOptions.before > 0 && urlOptions.after > 0)
+ urlOptions.pan_and_zoom = true;
+
+ // console.log(urlOptions);
+ }
+
+ netdataHashParse();
+
+ // --------------------------------------------------------------------
+ // check options that should be processed before loading netdata.js
+
function loadLocalStorage(name) {
var ret = null;
if(typeof ret === 'undefined' || ret === null)
return null;
+ // console.log('loaded: ' + name.toString() + ' = ' + ret.toString());
+
return ret;
}
function saveLocalStorage(name, value) {
+ // console.log('saving: ' + name.toString() + ' = ' + value.toString());
try {
if(typeof Storage !== "undefined" && typeof localStorage === 'object') {
localStorage.setItem(name, value.toString());
return ret;
}
- var netdataTheme = getTheme('slate');
-
function setTheme(theme) {
if(theme === netdataTheme) return false;
-
return saveLocalStorage('netdataTheme', theme);
}
+ var netdataTheme = getTheme('slate');
+ var netdataShowHelp = true;
+
+ if(urlOptions.theme !== null) {
+ setTheme(urlOptions.theme);
+ netdataTheme = urlOptions.theme;
+ }
+ else
+ urlOptions.theme = netdataTheme;
+
+ if(urlOptions.help !== null) {
+ saveLocalStorage('options.show_help', urlOptions.help);
+ netdataShowHelp = urlOptions.help;
+ }
+ else {
+ urlOptions.help = loadLocalStorage('options.show_help');
+ }
+
+ // --------------------------------------------------------------------
+ // registry call back to render my-netdata menu
+
var netdataRegistryCallback = function(machines_array) {
var el = '';
var a1 = '';
</script>
<!-- load the dashboard manager - it will do the rest -->
- <script type="text/javascript" src="dashboard.js?v40"></script>
+ <script type="text/javascript" src="dashboard.js?v41"></script>
</head>
-
<body data-spy="scroll" data-target="#sidebar">
+ <div id="loadOverlay" class="loadOverlay" style="background-color: #888; color: #888;">
+ netdata<br/><div style="font-size: 3vh;">Real-time performance monitoring, done right!</div>
+ </div>
+ <script type="text/javascript">
+ // change the loadOverlay colors ASAP to match the theme
+ document.getElementById('loadOverlay').style = (urlOptions.theme === 'slate')?"background-color:#272b30; color: #373b40;":"background-color:#fff; color: #ddd;";
+ </script>
<nav class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="container">
<nav id="mynetdata_nav" class="collapse navbar-collapse navbar-left hidden-sm hidden-xs" role="navigation" style="padding-right: 20px;">
</div>
</div>
- <script>
+ <script type="text/javascript">
var this_is_demo = null;
function isdemo() {
if(this_is_demo !== null) return this_is_demo;
if(isdemo()) {
document.getElementById('masthead').style.display = 'block';
}
+
+ function netdataURL(url) {
+ if(typeof url === 'undefined')
+ url = document.location.toString();
+
+ if(url.indexOf('#') !== -1)
+ url = url.substring(0, url.indexOf('#'));
+
+ var hash = netdataHash();
+
+ // console.log('netdataURL: ' + url + hash);
+
+ return url + hash;
+ }
+
+ function netdataReload(url) {
+ var t = netdataURL(url);
+ // console.log('netdataReload: ' + t);
+ document.location = t;
+
+ // since we play with hash
+ // this is needed to reload the page
+ location.reload();
+ }
+
var gotoServerValidateRemaining = 0;
var gotoServerMiddleClick = false;
var gotoServerStop = false;
// to allow the user walk through all its servers.
penaldy = 500;
+ var finalURL = netdataURL(url);
+
setTimeout(function() {
- 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>';
+ 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>';
NETDATA.registry.hello(url, function(data) {
if (data) {
// console.log('OK ' + id + ' URL: ' + url);
document.getElementById(guid + '-' + id + '-status').innerHTML = "OK";
- var hash = document.location.hash || '';
if(!gotoServerStop) {
gotoServerStop = true;
if(gotoServerMiddleClick) {
- window.open(url + hash, '_blank');
+ window.open(finalURL, '_blank');
gotoServerMiddleClick = false;
- 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)';
+ 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)';
}
else
- document.location = url + hash;
+ document.location = finalURL;
}
}
else {
info: undefined
},
+ 'ipfs': {
+ title: 'IPFS',
+ info: undefined
+ },
+
'phpfpm': {
title: 'PHP-FPM',
info: undefined,
},
'system.load': {
- info: 'Current system load read from <code>/proc/loadavg</code>.',
+ info: 'Current system load, a measurement of the work the system is performing. A completely idle computer has a load average of 0. Each process either using or waiting for system resources (e.g. CPU, disk) adds 1 to the load average. So, if your system has a load of 5, five processes are either using or waiting for system resources. Linux calculates this once every 5 seconds. Netdata reads it from <code>/proc/loadavg</code>. For more information see: <a href="http://www.howtogeek.com/194642/understanding-the-load-average-on-linux-and-other-unix-like-systems/" target="_blank">this article</a>',
height: 0.7
},
case 'phpfpm':
case 'postfix':
case 'redis':
+ case 'ipfs':
case 'squid':
case 'snmp':
case 'tomcat':
netdata_url = NETDATA.serverDefault;
NETDATA.pause(function() {
+ $("#loadOverlay").css("display","none");
+ $("#loadOverlay").css("display","none");
// download all the charts the server knows
NETDATA.chartRegistry.downloadAll(netdata_url, function(data) {
// ----------------------------------------------------------------------------
- function getUrlParameter(sParam) {
- var sPageURL = decodeURIComponent(window.location.search.substring(1)),
- sURLVariables = sPageURL.split('&'),
- sParameterName,
- i;
-
- for (i = 0; i < sURLVariables.length; i++) {
- sParameterName = sURLVariables[i].split('=');
-
- if (sParameterName[0] === sParam) {
- return sParameterName[1] === undefined ? true : sParameterName[1];
- }
- }
- }
-
function finalizePage() {
// resize all charts - without starting the background thread
// this has to be done while NETDATA is paused
// the Dom elements are initially zero-sized
NETDATA.parseDom();
- var before = 0, after = 0, nowelcome = 0;
- after = getUrlParameter('force_after_ms');
- before = getUrlParameter('force_before_ms');
- nowelcome = (getUrlParameter('nowelcome') === true)?true:false;
-
- if(before > 0 && after > 0) {
- nowelcome = true;
- NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], after, before);
+ if(urlOptions.pan_and_zoom === true) {
+ urlOptions.nowelcome = true;
+ NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], urlOptions.after, urlOptions.before);
}
// ------------------------------------------------------------------------
$(".chart-message").shorten();
// ------------------------------------------------------------------------
+ // callback for us to track PanAndZoom operations
+ NETDATA.globalPanAndZoom.callback = netdataPanAndZoomCallback;
+
// let it run (update the charts)
NETDATA.unpause();
// check if we have to jump to a specific section
- scrollToId(location.hash.replace('#',''));
+ scrollToId(urlOptions.hash.replace('#',''));
/* activate bootstrap sidebar (affix) */
$('#sidebar').affix({
// change the URL based on the current position of the screen
$('#sidebar').on('activate.bs.scrollspy', function (e) {
var el = $(e.target);
- if(el.find('ul').size() == 0)
- history.replaceState(null, document.title, el.find('a').attr('href'));
+ if(el.find('ul').size() == 0) {
+ var hash = el.find('a').attr('href');
+ if(typeof hash === 'string' && hash.substring(0, 1) == '#') {
+ urlOptions.hash = hash;
+ // console.log(urlOptions.hash);
+ netdataHashUpdate();
+ }
+ }
});
document.getElementById('footer').style.display = 'block';
$('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); });
$('#smooth_plot').change(function() { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
$('#pan_and_zoom_data_padding').change(function() { NETDATA.setOption('pan_and_zoom_data_padding', $(this).prop('checked')); });
- $('#show_help').change(function() { NETDATA.setOption('show_help', $(this).prop('checked')); location.reload(); });
+ $('#show_help').change(function() {
+ urlOptions.help = $(this).prop('checked');
+ NETDATA.setOption('show_help', urlOptions.help);
+ netdataReload();
+ });
// this has to be the last
// it reloads the page
$('#netdata_theme_control').change(function() {
- if(setTheme($(this).prop('checked')?'slate':'white'))
- location.reload();
+ urlOptions.theme = $(this).prop('checked')?'slate':'white';
+ if(setTheme(urlOptions.theme))
+ netdataReload();
});
$('#updateModal').on('shown.bs.modal', function() {
});
if(isdemo()) {
- if(!nowelcome) {
+ if(!urlOptions.nowelcome) {
setTimeout(function() {
$('#welcomeModal').modal();
}, 1000);
NETDATA.resetOptions();
if(setTheme('slate'))
- location.reload();
+ netdataReload();
if(help !== NETDATA.options.current.show_help)
- location.reload();
+ netdataReload();
}
downloadAllCharts();
projects / netdata.git / commitdiff