From: Costa Tsaousis <costa@tsaousis.gr>
Date: Thu, 11 Aug 2016 17:33:30 +0000 (+0300)
Subject: Merge remote-tracking branch 'upstream/master' into health
X-Git-Tag: v1.3.0~23^2~72
X-Git-Url: https://arthur.barton.de/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f36354350a3ed021a41601b148e5af14fea2a727;hp=-c;p=netdata.git

Merge remote-tracking branch 'upstream/master' into health
---

f36354350a3ed021a41601b148e5af14fea2a727
diff --combined web/index.html
index f8832b67,1efb9760..59629ae1
--- a/web/index.html
+++ b/web/index.html
@@@ -42,6 -42,20 +42,20 @@@
  		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%;
  	}
@@@ -321,12 -335,79 +335,79 @@@
  	}
  	</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;
  
@@@ -341,10 -422,13 +422,13 @@@
  			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());
@@@ -366,14 -450,32 +450,32 @@@
  				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 = '';
@@@ -430,10 -532,16 +532,16 @@@
  	</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;">
@@@ -995,7 -1103,7 +1103,7 @@@
  		</div>
  	</div>
  
- <script>
+ <script type="text/javascript">
  var this_is_demo = null;
  function isdemo() {
  	if(this_is_demo !== null) return this_is_demo;
@@@ -1021,6 -1129,31 +1129,31 @@@
  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;
@@@ -1031,25 -1164,26 +1164,26 @@@ function gotoServerValidateUrl(id, guid
  			// 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 {
@@@ -1372,6 -1506,11 +1506,11 @@@ var menuData = 
  		info: undefined
  	},
  
+ 	'ipfs': {
+ 		title: 'IPFS',
+ 		info: undefined
+ 	},
+ 
  	'phpfpm': {
  		title: 'PHP-FPM',
  		info: undefined,
@@@ -1431,7 -1570,7 +1570,7 @@@ var chartData = 
  	},
  
  	'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
  	},
  
@@@ -1880,6 -2019,7 +2019,7 @@@ function enrichChartData(chart) 
  		case 'phpfpm':
  		case 'postfix':
  		case 'redis':
+ 		case 'ipfs':
  		case 'squid':
  		case 'snmp':
  		case 'tomcat':
@@@ -2209,6 -2349,8 +2349,8 @@@ function downloadAllCharts(netdata_url
  		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) {
@@@ -2352,21 -2494,6 +2494,6 @@@ function notifyForUpdate(force) 
  
  // ----------------------------------------------------------------------------
  
- 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
@@@ -2374,14 -2501,9 +2501,9 @@@
  	// 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);
  	}
  
  	// ------------------------------------------------------------------------
@@@ -2519,11 -2641,14 +2641,14 @@@
  	$(".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({
@@@ -2549,8 -2674,14 +2674,14 @@@
  	// 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';
@@@ -2604,13 -2735,18 +2735,18 @@@
  	$('#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() {
@@@ -2622,7 -2758,7 +2758,7 @@@
  	});
  
  	if(isdemo()) {
- 		if(!nowelcome) {
+ 		if(!urlOptions.nowelcome) {
  			setTimeout(function() {
  				$('#welcomeModal').modal();
  			}, 1000);
@@@ -2648,10 -2784,10 +2784,10 @@@ function resetDashboardOptions() 
  
  	NETDATA.resetOptions();
  	if(setTheme('slate'))
- 		location.reload();
+ 		netdataReload();
  
  	if(help !== NETDATA.options.current.show_help)
- 		location.reload();
+ 		netdataReload();
  }
  
  downloadAllCharts();