X-Git-Url: https://arthur.barton.de/cgi-bin/gitweb.cgi?a=blobdiff_plain;f=web%2Findex.html;h=59629ae1cf4888d7dbab6a985810221200f85b6a;hb=f36354350a3ed021a41601b148e5af14fea2a727;hp=f8832b674372411dfa8f07df24d41a82aece86ec;hpb=e5080111671c910836a7a6cc2aaf4704398825fc;p=netdata.git

diff --git a/web/index.html b/web/index.html
index f8832b67..59629ae1 100644
--- a/web/index.html
+++ b/web/index.html
@@ -42,6 +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 @@
 	}
 	</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 @@
 			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 @@
 				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 @@
 	</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 @@
 		</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 @@ function isdemo() {
 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 @@ function gotoServerValidateUrl(id, guid, url) {
 			// 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 @@ var menuData = {
 		info: undefined
 	},
 
+	'ipfs': {
+		title: 'IPFS',
+		info: undefined
+	},
+
 	'phpfpm': {
 		title: 'PHP-FPM',
 		info: undefined,
@@ -1880,6 +2019,7 @@ function enrichChartData(chart) {
 		case 'phpfpm':
 		case 'postfix':
 		case 'redis':
+		case 'ipfs':
 		case 'squid':
 		case 'snmp':
 		case 'tomcat':
@@ -2209,6 +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 @@ 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 @@ function finalizePage() {
 	// 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 @@ function finalizePage() {
 	$(".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 @@ function finalizePage() {
 	// 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 @@ function finalizePage() {
 	$('#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 @@ function finalizePage() {
 	});
 
 	if(isdemo()) {
-		if(!nowelcome) {
+		if(!urlOptions.nowelcome) {
 			setTimeout(function() {
 				$('#welcomeModal').modal();
 			}, 1000);
@@ -2648,10 +2784,10 @@ function resetDashboardOptions() {
 
 	NETDATA.resetOptions();
 	if(setTheme('slate'))
-		location.reload();
+		netdataReload();
 
 	if(help !== NETDATA.options.current.show_help)
-		location.reload();
+		netdataReload();
 }
 
 downloadAllCharts();