From b4f64f72a3e4bf590c60b0cbd6cd365aa1a58542 Mon Sep 17 00:00:00 2001
From: Lennart Weller <lhw@ring0.de>
Date: Wed, 25 May 2016 12:36:24 +0200
Subject: Imported Upstream version 1.2.0

---
 web/Makefile.am         |   7 +-
 web/Makefile.in         |  12 +-
 web/dashboard.css       |  20 +-
 web/dashboard.html      |   2 +-
 web/dashboard.js        | 378 ++++++++++++++++++++++---
 web/dashboard.slate.css |  20 +-
 web/demo.html           |  84 +++---
 web/demo2.html          | 268 +++++++++---------
 web/demosites.html      | 721 ++++++++++++++++++++++++++++++++++++++++++++++++
 web/index.html          | 376 ++++++++++++++++++++++---
 web/tv.html             | 483 ++++++++++++++++----------------
 web/version.txt         |   2 +-
 12 files changed, 1853 insertions(+), 520 deletions(-)
 create mode 100644 web/demosites.html

(limited to 'web')

diff --git a/web/Makefile.am b/web/Makefile.am
index 1b6b918be..174ef229b 100644
--- a/web/Makefile.am
+++ b/web/Makefile.am
@@ -4,18 +4,19 @@
 MAINTAINERCLEANFILES= $(srcdir)/Makefile.in
 
 dist_web_DATA = \
-	robots.txt \
-	index.html \
 	demo.html \
 	demo2.html \
-	tv.html \
+	demosites.html \
 	dashboard.html \
 	dashboard.js \
 	dashboard.css \
 	dashboard.slate.css \
 	favicon.ico \
+	index.html \
 	netdata-swagger.yaml \
 	netdata-swagger.json \
+	robots.txt \
+	tv.html \
 	version.txt \
 	$(NULL)
 
diff --git a/web/Makefile.in b/web/Makefile.in
index 98d5dcc76..e95290128 100644
--- a/web/Makefile.in
+++ b/web/Makefile.in
@@ -188,6 +188,8 @@ OPTIONAL_MATH_CLFAGS = @OPTIONAL_MATH_CLFAGS@
 OPTIONAL_MATH_LIBS = @OPTIONAL_MATH_LIBS@
 OPTIONAL_NFACCT_CLFAGS = @OPTIONAL_NFACCT_CLFAGS@
 OPTIONAL_NFACCT_LIBS = @OPTIONAL_NFACCT_LIBS@
+OPTIONAL_UUID_CLFAGS = @OPTIONAL_UUID_CLFAGS@
+OPTIONAL_UUID_LIBS = @OPTIONAL_UUID_LIBS@
 OPTIONAL_ZLIB_CLFAGS = @OPTIONAL_ZLIB_CLFAGS@
 OPTIONAL_ZLIB_LIBS = @OPTIONAL_ZLIB_LIBS@
 PACKAGE = @PACKAGE@
@@ -209,6 +211,8 @@ PTHREAD_LIBS = @PTHREAD_LIBS@
 SET_MAKE = @SET_MAKE@
 SHELL = @SHELL@
 STRIP = @STRIP@
+UUID_CFLAGS = @UUID_CFLAGS@
+UUID_LIBS = @UUID_LIBS@
 VERSION = @VERSION@
 ZLIB_CFLAGS = @ZLIB_CFLAGS@
 ZLIB_LIBS = @ZLIB_LIBS@
@@ -269,6 +273,7 @@ target_alias = @target_alias@
 top_build_prefix = @top_build_prefix@
 top_builddir = @top_builddir@
 top_srcdir = @top_srcdir@
+varlibdir = @varlibdir@
 webdir = @webdir@
 
 #
@@ -276,18 +281,19 @@ webdir = @webdir@
 #
 MAINTAINERCLEANFILES = $(srcdir)/Makefile.in
 dist_web_DATA = \
-	robots.txt \
-	index.html \
 	demo.html \
 	demo2.html \
-	tv.html \
+	demosites.html \
 	dashboard.html \
 	dashboard.js \
 	dashboard.css \
 	dashboard.slate.css \
 	favicon.ico \
+	index.html \
 	netdata-swagger.yaml \
 	netdata-swagger.json \
+	robots.txt \
+	tv.html \
 	version.txt \
 	$(NULL)
 
diff --git a/web/dashboard.css b/web/dashboard.css
index a7b090d66..63e2b905f 100644
--- a/web/dashboard.css
+++ b/web/dashboard.css
@@ -10,11 +10,22 @@ body {
 	margin-left: 55px;
 }
 
+.netdata-chart-row {
+        width: 100%;
+        text-align: center;
+        display: flex;
+        display: -webkit-flex;
+        display: -moz-flex;
+        align-items: baseline;
+        -moz-align-items: baseline;
+        -webkit-align-items: baseline;
+        justify-content: center;
+        -webkit-justify-content: center;
+        -moz-justify-content: center;
+}
+
 .netdata-container {
-	display: -webkit-flex; /* Safari */
-	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
 	display: inline-block;
-	flex-wrap: wrap;
 	overflow: hidden;
 
 	/* required for child elements to have absolute position */
@@ -31,10 +42,7 @@ body {
 }
 
 .netdata-container-with-legend {
-	display: -webkit-flex; /* Safari */
-	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
 	display: inline-block;
-	flex-wrap: wrap;
 	overflow: hidden;
 
 	/* fix minimum scrollbar issue in firefox */
diff --git a/web/dashboard.html b/web/dashboard.html
index fd505078d..2b6c80684 100644
--- a/web/dashboard.html
+++ b/web/dashboard.html
@@ -646,4 +646,4 @@ So, to avoid flashing the charts, we destroy and re-create the charts on each up
 	<!-- <script> netdataServer = "http://box:19999"; </script> -->
 
 	<!-- load the dashboard manager - it will do the rest -->
-	<script type="text/javascript" src="dashboard.js"></script>
+	<script type="text/javascript" src="dashboard.js?v37"></script>
diff --git a/web/dashboard.js b/web/dashboard.js
index b6c62ae3c..27847a243 100644
--- a/web/dashboard.js
+++ b/web/dashboard.js
@@ -12,6 +12,9 @@
 // var netdataNoBootstrap = true;		// do not load bootstrap
 // var netdataDontStart = true;			// do not start the thread to process the charts
 // var netdataErrorCallback = null;		// Callback function that will be invoked upon error
+// var netdataNoRegistry = true;		// Don't update the registry for this access
+// var netdataRegistryCallback = null;	// Callback function that will be invoked with one param,
+//                                         the URLs from the registry
 //
 // You can also set the default netdata server, using the following.
 // When this variable is not set, we assume the page is hosted on your
@@ -19,8 +22,28 @@
 // var netdataServer = "http://yourhost:19999"; // set your NetData server
 
 //(function(window, document, undefined) {
+
+	// ------------------------------------------------------------------------
+	// compatibility fixes
+
 	// fix IE issue with console
-	if(!window.console){ window.console = {log: function(){} }; }
+	if(!window.console) { window.console = { log: function(){} }; }
+
+	// if string.endsWith is not defined, define it
+	if(typeof String.prototype.endsWith !== 'function') {
+		String.prototype.endsWith = function(s) {
+			if(s.length > this.length) return false;
+			return this.slice(-s.length) === s;
+		};
+	}
+
+	// if string.startsWith is not defined, define it
+	if(typeof String.prototype.startsWith !== 'function') {
+		String.prototype.startsWith = function(s) {
+			if(s.length > this.length) return false;
+			return this.slice(s.length) === s;
+		};
+	}
 
 	// global namespace
 	var NETDATA = window.NETDATA || {};
@@ -53,7 +76,11 @@
 		NETDATA.serverDefault = netdataServer;
 	else {
 		var s = NETDATA._scriptSource();
-		NETDATA.serverDefault = s.replace(/\/dashboard.js(\?.*)*$/g, "");
+		if(s) NETDATA.serverDefault = s.replace(/\/dashboard.js(\?.*)*$/g, "");
+		else {
+			console.log('WARNING: Cannot detect the URL of the netdata server.');
+			NETDATA.serverDefault = null;
+		}
 	}
 
 	if(NETDATA.serverDefault === null)
@@ -80,7 +107,7 @@
 	NETDATA.google_js    		= 'https://www.google.com/jsapi';
 
 	NETDATA.themes = {
-		default: {
+		white: {
 			bootstrap_css: NETDATA.serverDefault + 'css/bootstrap.min.css',
 			dashboard_css: NETDATA.serverDefault + 'dashboard.css',
 			background: '#FFFFFF',
@@ -95,7 +122,7 @@
 			easypiechart_scale: '#dfe0e0',
 			gauge_pointer: '#C0C0C0',
 			gauge_stroke: '#F0F0F0',
-			gauge_gradient: true
+			gauge_gradient: false
 		},
 		slate: {
 			bootstrap_css: NETDATA.serverDefault + 'css/bootstrap.slate.min.css',
@@ -124,7 +151,7 @@
 	if(typeof netdataTheme !== 'undefined' && typeof NETDATA.themes[netdataTheme] !== 'undefined')
 		NETDATA.themes.current = NETDATA.themes[netdataTheme];
 	else
-		NETDATA.themes.current = NETDATA.themes.default;
+		NETDATA.themes.current = NETDATA.themes.white;
 
 	NETDATA.colors = NETDATA.themes.current.colors;
 
@@ -188,8 +215,6 @@
 
 		last_resized: new Date().getTime(), // the timestamp of the last resize request
 
-		crossDomainAjax: false,			// enable this to request crossDomain AJAX
-
 		last_page_scroll: 0,			// the timestamp the last time the page was scrolled
 
 		// the current profile
@@ -284,6 +309,12 @@
 		}
 	};
 
+	NETDATA.statistics = {
+		refreshes_total: 0,
+		refreshes_active: 0,
+		refreshes_active_max: 0
+	};
+
 
 	// ----------------------------------------------------------------------------------------------------------------
 	// local storage options
@@ -461,7 +492,15 @@
 		403: { message: "Chart library not enabled/is failed", alert: false },
 		404: { message: "Chart not found", alert: false },
 		405: { message: "Cannot download charts index from server", alert: true },
-		406: { message: "Invalid charts index downloaded from server", alert: true }
+		406: { message: "Invalid charts index downloaded from server", alert: true },
+		407: { message: "Cannot HELLO netdata server", alert: false },
+		408: { message: "Netdata servers sent invalid response to HELLO", alert: false },
+		409: { message: "Cannot ACCESS netdata registry", alert: false },
+		410: { message: "Netdata registry ACCESS failed", alert: false },
+		411: { message: "Netdata registry server send invalid response to DELETE ", alert: false },
+		412: { message: "Netdata registry DELETE failed", alert: false },
+		413: { message: "Netdata registry server send invalid response to SWITCH ", alert: false },
+		414: { message: "Netdata registry SWITCH failed", alert: false }
 	};
 	NETDATA.errorLast = {
 		code: 0,
@@ -541,7 +580,6 @@
 
 			$.ajax({
 				url: host + '/api/v1/charts',
-				crossDomain: NETDATA.options.crossDomainAjax,
 				async: true,
 				cache: false
 			})
@@ -975,6 +1013,7 @@
 		this.units = self.data('units') || null;	// the units of the chart dimensions
 		this.append_options = self.data('append-options') || null;	// the units of the chart dimensions
 
+		this.running = false;						// boolean - true when the chart is being refreshed now
 		this.validated = false; 					// boolean - has the chart been validated?
 		this.enabled = true; 						// boolean - is the chart enabled for refresh?
 		this.paused = false;						// boolean - is the chart paused for any reason?
@@ -1098,7 +1137,7 @@
 				var w = that.element.offsetWidth;
 				if(w === null || w === 0) {
 					// the div is hidden
-					// this is resize the chart when next viewed
+					// this will resize the chart when next viewed
 					that.tm.last_resized = 0;
 				}
 				else
@@ -1167,7 +1206,7 @@
 			var lost = Math.max(h * 0.2, 5);
 			h -= lost;
 
-			// center the text, verically
+			// center the text, vertically
 			var paddingTop = (lost - 5) / 2;
 
 			// but check the width too
@@ -1247,8 +1286,8 @@
 			if(isHidden() === true) return;
 
 			if(that.chart_created === true) {
-				// we should destroy it
 				if(NETDATA.options.current.destroy_on_hide === true) {
+					// we should destroy it
 					init();
 				}
 				else {
@@ -1256,6 +1295,12 @@
 					that.element_chart.style.display = 'none';
 					if(that.element_legend !== null) that.element_legend.style.display = 'none';
 					that.tm.last_hidden = new Date().getTime();
+
+					// de-allocate data
+					// This works, but I not sure there are no corner cases somewhere
+					// so it is commented - if the user has memory issues he can
+					// set Destroy on Hide for all charts
+					// that.data = null;
 				}
 			}
 
@@ -2580,8 +2625,6 @@
 			if(this.debug === true)
 				this.log('updateChartWithData() called.');
 
-			this._updating = false;
-
 			// this may force the chart to be re-created
 			resizeChart();
 
@@ -2676,8 +2719,8 @@
 			if(NETDATA.globalPanAndZoom.isActive())
 				this.tm.last_autorefreshed = 0;
 			else {
-				if(NETDATA.options.current.parallel_refresher === true && NETDATA.options.current.concurrent_refreshes)
-					this.tm.last_autorefreshed = Math.round(now / this.data_update_every) * this.data_update_every;
+				if(NETDATA.options.current.parallel_refresher === true && NETDATA.options.current.concurrent_refreshes === true)
+					this.tm.last_autorefreshed = now - (now % this.data_update_every);
 				else
 					this.tm.last_autorefreshed = now;
 			}
@@ -2739,11 +2782,16 @@
 			if(this.debug === true)
 				this.log('updating from ' + this.data_url);
 
+			NETDATA.statistics.refreshes_total++;
+			NETDATA.statistics.refreshes_active++;
+
+			if(NETDATA.statistics.refreshes_active > NETDATA.statistics.refreshes_active_max)
+				NETDATA.statistics.refreshes_active_max = NETDATA.statistics.refreshes_active;
+
 			this._updating = true;
 
 			this.xhr = $.ajax( {
 				url: this.data_url,
-				crossDomain: NETDATA.options.crossDomainAjax,
 				cache: false,
 				async: true
 			})
@@ -2757,6 +2805,7 @@
 				error('data download failed for url: ' + that.data_url);
 			})
 			.always(function() {
+				NETDATA.statistics.refreshes_active--;
 				that._updating = false;
 				if(typeof callback === 'function') callback();
 			});
@@ -2813,13 +2862,20 @@
 			}
 		};
 
-		this.isAutoRefreshed = function() {
+		this.isAutoRefreshable = function() {
 			return (this.current.autorefresh);
 		};
 
 		this.canBeAutoRefreshed = function() {
 			var now = new Date().getTime();
 
+			if(this.running === true) {
+				if(this.debug === true)
+					this.log('I am already running');
+
+				return false;
+			}
+
 			if(this.enabled === false) {
 				if(this.debug === true)
 					this.log('I am not enabled');
@@ -2850,7 +2906,7 @@
 				return true;
 			}
 
-			if(this.isAutoRefreshed() === true) {
+			if(this.isAutoRefreshable() === true) {
 				// allow the first update, even if the page is not visible
 				if(this.updates_counter && this.updates_since_last_unhide && NETDATA.options.page_is_visible === false) {
 					if(NETDATA.options.debug.focus === true || this.debug === true)
@@ -2910,8 +2966,16 @@
 		};
 
 		this.autoRefresh = function(callback) {
-			if(this.canBeAutoRefreshed() === true) {
-				this.updateChart(callback);
+			if(this.canBeAutoRefreshed() === true && this.running === false) {
+				var state = this;
+
+				state.running = true;
+				state.updateChart(function() {
+					state.running = false;
+
+					if(typeof callback !== 'undefined')
+						callback();
+				});
 			}
 			else {
 				if(typeof callback !== 'undefined')
@@ -2948,7 +3012,6 @@
 
 				$.ajax( {
 					url:  this.host + this.chart_url,
-					crossDomain: NETDATA.options.crossDomainAjax,
 					cache: false,
 					async: true
 				})
@@ -3234,11 +3297,12 @@
 		var parallel = new Array();
 		var targets = NETDATA.options.targets;
 		var len = targets.length;
+		var state;
 		while(len--) {
-			if(targets[len].isVisible() === false)
+			state = targets[len];
+			if(state.isVisible() === false || state.running === true)
 				continue;
 
-			var state = targets[len];
 			if(state.library.initialized === false) {
 				if(state.library.enabled === true) {
 					state.library.initialize(NETDATA.chartRefresher);
@@ -3253,24 +3317,15 @@
 		}
 
 		if(parallel.length > 0) {
-			var parallel_jobs = parallel.length;
-
 			// this will execute the jobs in parallel
 			$(parallel).each(function() {
-				this.autoRefresh(function() {
-					parallel_jobs--;
-
-					if(parallel_jobs === 0) {
-						setTimeout(NETDATA.chartRefresher,
-							NETDATA.chartRefresherWaitTime());
-					}
-				});
+				this.autoRefresh();
 			})
 		}
-		else {
-			setTimeout(NETDATA.chartRefresher,
-				NETDATA.chartRefresherWaitTime());
-		}
+
+		// run the next refresh iteration
+		setTimeout(NETDATA.chartRefresher,
+			NETDATA.chartRefresherWaitTime());
 	};
 
 	NETDATA.parseDom = function(callback) {
@@ -3330,7 +3385,14 @@
 		$('.modal').on('hidden.bs.modal', NETDATA.onscroll);
 		$('.modal').on('shown.bs.modal', NETDATA.onscroll);
 
+		// bootstrap collapse switching
+		$('.collapse').on('hidden.bs.collapse', NETDATA.onscroll);
+		$('.collapse').on('shown.bs.collapse', NETDATA.onscroll);
+
 		NETDATA.parseDom(NETDATA.chartRefresher);
+
+		// Registry initialization
+		setTimeout(NETDATA.registry.init, 3000);
 	};
 
 	// ----------------------------------------------------------------------------------------------------------------
@@ -4623,7 +4685,7 @@
 			state.easyPieChartEvent.timer = null;
 		}
 
-		if(state.isAutoRefreshed() === true && state.data !== null) {
+		if(state.isAutoRefreshable() === true && state.data !== null) {
 			NETDATA.easypiechartChartUpdate(state, state.data);
 		}
 		else {
@@ -4674,7 +4736,7 @@
 	NETDATA.easypiechartChartUpdate = function(state, data) {
 		var value, max, pcent;
 
-		if(NETDATA.globalPanAndZoom.isActive() === true || state.isAutoRefreshed() === false) {
+		if(NETDATA.globalPanAndZoom.isActive() === true || state.isAutoRefreshable() === false) {
 			value = null;
 			max = 0;
 			pcent = 0;
@@ -4877,7 +4939,7 @@
 			state.gaugeEvent.timer = null;
 		}
 
-		if(state.isAutoRefreshed() === true && state.data !== null) {
+		if(state.isAutoRefreshable() === true && state.data !== null) {
 			NETDATA.gaugeChartUpdate(state, state.data);
 		}
 		else {
@@ -4931,7 +4993,7 @@
 	NETDATA.gaugeChartUpdate = function(state, data) {
 		var value, min, max;
 
-		if(NETDATA.globalPanAndZoom.isActive() === true || state.isAutoRefreshed() === false) {
+		if(NETDATA.globalPanAndZoom.isActive() === true || state.isAutoRefreshable() === false) {
 			value = 0;
 			min = 0;
 			max = 1;
@@ -4993,11 +5055,33 @@
 			colorStop: stopColor,		// just experiment with them
 			strokeColor: strokeColor,	// to see which ones work best for you
 			limitMax: true,
-			generateGradient: generateGradient,
+			generateGradient: (generateGradient === true)?true:false,
 			gradientType: 0
 		};
 
-		if(generateGradient === false && NETDATA.themes.current.gauge_gradient === true) {
+		if (generateGradient.constructor === Array) {
+			// example options:
+			// data-gauge-generate-gradient="[0, 50, 100]"
+			// data-gauge-gradient-percent-color-0="#FFFFFF"
+			// data-gauge-gradient-percent-color-50="#999900"
+			// data-gauge-gradient-percent-color-100="#000000"
+
+			options.percentColors = new Array();
+			var len = generateGradient.length;
+			while(len--) {
+				var pcent = generateGradient[len];
+				var color = self.data('gauge-gradient-percent-color-' + pcent.toString()) || false;
+				if(color !== false) {
+					var a = new Array();
+					a[0] = pcent / 100;
+					a[1] = color;
+					options.percentColors.unshift(a);
+				}
+			}
+			if(options.percentColors.length === 0)
+				delete options.percentColors;
+		}
+		else if(generateGradient === false && NETDATA.themes.current.gauge_gradient === true) {
 			options.percentColors = [
 				[0.0, NETDATA.colorLuminance(startColor, (lum_d * 10) - (lum_d * 0))],
 				[0.1, NETDATA.colorLuminance(startColor, (lum_d * 10) - (lum_d * 1))],
@@ -5304,12 +5388,13 @@
 	};
 
 	// ----------------------------------------------------------------------------------------------------------------
-	// Start up
+	// Load required JS libraries and CSS
 
 	NETDATA.requiredJs = [
 		{
 			url: NETDATA.serverDefault + 'lib/bootstrap.min.js',
 			isAlreadyLoaded: function() {
+				// check if bootstrap is loaded
 				if(typeof $().emulateTransitionEnd == 'function')
 					return true;
 				else {
@@ -5401,11 +5486,214 @@
 		NETDATA.loadRequiredCSS(++index);
 	};
 
+
+	// ----------------------------------------------------------------------------------------------------------------
+	// Registry of netdata hosts
+
+	NETDATA.registry = {
+		server: null,		// the netdata registry server
+		person_guid: null,	// the unique ID of this browser / user
+		machine_guid: null,	// the unique ID the netdata server that served dashboard.js
+		hostname: null,		// the hostname of the netdata server that served dashboard.js
+		urls: null,			// the user's other URLs
+		urls_array: null,	// the user's other URLs in an array
+
+		parsePersonUrls: function(person_urls) {
+			// console.log(person_urls);
+
+			if(person_urls) {
+				NETDATA.registry.urls = {};
+				NETDATA.registry.urls_array = new Array();
+
+				var now = new Date().getTime();
+				var apu = person_urls;
+				var i = apu.length;
+				while(i--) {
+					if(typeof NETDATA.registry.urls[apu[i][0]] === 'undefined') {
+						// console.log('adding: ' + apu[i][4] + ', ' + ((now - apu[i][2]) / 1000).toString());
+
+						var obj = {
+							guid: apu[i][0],
+							url: apu[i][1],
+							last_t: apu[i][2],
+							accesses: apu[i][3],
+							name: apu[i][4],
+							alternate_urls: new Array()
+						};
+
+						NETDATA.registry.urls[apu[i][0]] = obj;
+						NETDATA.registry.urls_array.push(obj);
+					}
+					else {
+						// console.log('appending: ' + apu[i][4] + ', ' + ((now - apu[i][2]) / 1000).toString());
+
+						var pu = NETDATA.registry.urls[apu[i][0]];
+						if(pu.last_t < apu[i][2]) {
+							pu.url = apu[i][1];
+							pu.last_t = apu[i][2];
+							pu.name = apu[i][4];
+						}
+						pu.accesses += apu[i][3];
+						pu.alternate_urls.push(apu[i][1]);
+					}
+				}
+			}
+
+			if(typeof netdataRegistryCallback === 'function')
+				netdataRegistryCallback(NETDATA.registry.urls_array);
+		},
+
+		init: function() {
+			if(typeof netdataNoRegistry !== 'undefined' && netdataNoRegistry)
+				return;
+
+			NETDATA.registry.hello(NETDATA.serverDefault, function(data) {
+				if(data) {
+					NETDATA.registry.server = data.registry;
+					NETDATA.registry.machine_guid = data.machine_guid;
+					NETDATA.registry.hostname = data.hostname;
+
+					NETDATA.registry.access(10, function (person_urls) {
+						NETDATA.registry.parsePersonUrls(person_urls);
+
+					});
+				}
+			});
+		},
+
+		hello: function(host, callback) {
+			// send HELLO to a netdata server:
+			// 1. verifies the server is reachable
+			// 2. responds with the registry URL, the machine GUID of this netdata server and its hostname
+			$.ajax({
+					url: host + '/api/v1/registry?action=hello',
+					async: true,
+					cache: false,
+					xhrFields: { withCredentials: true } // required for the cookie
+				})
+				.done(function(data) {
+					if(typeof data.status !== 'string' || data.status !== 'ok') {
+						NETDATA.error(408, host + ' response: ' + JSON.stringify(data));
+						data = null;
+					}
+
+					if(typeof callback === 'function')
+						callback(data);
+				})
+				.fail(function() {
+					NETDATA.error(407, host);
+
+					if(typeof callback === 'function')
+						callback(null);
+				});
+		},
+
+		access: function(max_redirects, callback) {
+			// send ACCESS to a netdata registry:
+			// 1. it lets it know we are accessing a netdata server (its machine GUID and its URL)
+			// 2. it responds with a list of netdata servers we know
+			// the registry identifies us using a cookie it sets the first time we access it
+			// the registry may respond with a redirect URL to send us to another registry
+			$.ajax({
+					url: NETDATA.registry.server + '/api/v1/registry?action=access&machine=' + NETDATA.registry.machine_guid + '&name=' + encodeURIComponent(NETDATA.registry.hostname) + '&url=' + encodeURIComponent(NETDATA.serverDefault), // + '&visible_url=' + encodeURIComponent(document.location),
+					async: true,
+					cache: false,
+					xhrFields: { withCredentials: true } // required for the cookie
+				})
+				.done(function(data) {
+					var redirect = null;
+					if(typeof data.registry === 'string')
+						redirect = data.registry;
+
+					if(typeof data.status !== 'string' || data.status !== 'ok') {
+						NETDATA.error(409, NETDATA.registry.server + ' responded with: ' + JSON.stringify(data));
+						data = null;
+					}
+
+					if(data === null && redirect !== null && max_redirects > 0) {
+						NETDATA.registry.server = redirect;
+						NETDATA.registry.access(max_redirects - 1, callback);
+					}
+					else {
+						if(typeof data.person_guid === 'string')
+							NETDATA.registry.person_guid = data.person_guid;
+
+						if(typeof callback === 'function')
+							callback(data.urls);
+					}
+				})
+				.fail(function() {
+					NETDATA.error(410, NETDATA.registry.server);
+
+					if(typeof callback === 'function')
+						callback(null);
+				});
+		},
+
+		delete: function(delete_url, callback) {
+			// send DELETE to a netdata registry:
+			$.ajax({
+				url: NETDATA.registry.server + '/api/v1/registry?action=delete&machine=' + NETDATA.registry.machine_guid + '&name=' + encodeURIComponent(NETDATA.registry.hostname) + '&url=' + encodeURIComponent(NETDATA.serverDefault) + '&delete_url=' + encodeURIComponent(delete_url),
+				async: true,
+				cache: false,
+				xhrFields: { withCredentials: true } // required for the cookie
+			})
+				.done(function(data) {
+					if(typeof data.status !== 'string' || data.status !== 'ok') {
+						NETDATA.error(411, NETDATA.registry.server + ' responded with: ' + JSON.stringify(data));
+						data = null;
+					}
+
+					if(typeof callback === 'function')
+						callback(data);
+				})
+				.fail(function() {
+					NETDATA.error(412, NETDATA.registry.server);
+
+					if(typeof callback === 'function')
+						callback(null);
+				});
+		},
+		
+		switch: function(new_person_guid, callback) {
+			// impersonate
+			$.ajax({
+				url: NETDATA.registry.server + '/api/v1/registry?action=switch&machine=' + NETDATA.registry.machine_guid + '&name=' + encodeURIComponent(NETDATA.registry.hostname) + '&url=' + encodeURIComponent(NETDATA.serverDefault) + '&to=' + new_person_guid,
+				async: true,
+				cache: false,
+				xhrFields: { withCredentials: true } // required for the cookie
+			})
+				.done(function(data) {
+					if(typeof data.status !== 'string' || data.status !== 'ok') {
+						NETDATA.error(413, NETDATA.registry.server + ' responded with: ' + JSON.stringify(data));
+						data = null;
+					}
+
+					if(typeof callback === 'function')
+						callback(data);
+				})
+				.fail(function() {
+					NETDATA.error(414, NETDATA.registry.server);
+
+					if(typeof callback === 'function')
+						callback(null);
+				});
+		}
+	};
+
+	// ----------------------------------------------------------------------------------------------------------------
+	// Boot it!
+
 	NETDATA.errorReset();
 	NETDATA.loadRequiredCSS(0);
 
 	NETDATA._loadjQuery(function() {
 		NETDATA.loadRequiredJs(0, function() {
+			if(typeof $().emulateTransitionEnd !== 'function') {
+				// bootstrap is not available
+				NETDATA.options.current.show_help = false;
+			}
+
 			if(typeof netdataDontStart === 'undefined' || !netdataDontStart) {
 				if(NETDATA.options.debug.main_loop === true)
 					console.log('starting chart refresh thread');
diff --git a/web/dashboard.slate.css b/web/dashboard.slate.css
index 662731061..0536a3ed6 100644
--- a/web/dashboard.slate.css
+++ b/web/dashboard.slate.css
@@ -18,11 +18,22 @@ body {
 	margin-left: 55px;
 }
 
+.netdata-chart-row {
+	width: 100%;
+	text-align: center;
+	display: flex;
+	display: -webkit-flex;
+	display: -moz-flex;
+	align-items: flex-end;
+	-moz-align-items: flex-end;
+	-webkit-align-items: flex-end;
+	justify-content: center;
+	-moz--webkit-justify-content: center;
+	-moz-justify-content: center;
+}
+
 .netdata-container {
-	display: -webkit-flex; /* Safari */
-	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
 	display: inline-block;
-	flex-wrap: wrap;
 	overflow: hidden;
 
 	/* required for child elements to have absolute position */
@@ -39,10 +50,7 @@ body {
 }
 
 .netdata-container-with-legend {
-	display: -webkit-flex; /* Safari */
-	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
 	display: inline-block;
-	flex-wrap: wrap;
 	overflow: hidden;
 
 	/* fix minimum scrollbar issue in firefox */
diff --git a/web/demo.html b/web/demo.html
index 8a6c0c129..4b91d8394 100644
--- a/web/demo.html
+++ b/web/demo.html
@@ -1,42 +1,42 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>NetData Dashboard</title>
-
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta name="apple-mobile-web-app-capable" content="yes">
-	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-	<meta name="author" content="costa@tsaousis.gr">
-
-	<script type="text/javascript" src="dashboard.js"></script>
-</head>
-<body>
-
-<div style="width: 100%; text-align: center;">
-	<div data-netdata="netdata.server_cpu"
-			data-dimensions="user"
-			data-chart-library="gauge"
-			data-width="150px"
-			data-after="-60"
-			data-points="60"
-			data-title="Yes! Realtime!"
-			data-units="I am alive!"
-			data-colors="#FF5555"
-			></div>
-	<br/>
-	<div data-netdata="netdata.server_cpu"
-			data-dimensions="user"
-			data-chart-library="dygraph"
-			data-dygraph-theme="sparkline"
-			data-width="200px"
-			data-height="30px"
-			data-after="-60"
-			data-points="60"
-			data-colors="#FF5555"
-			></div>
-</div>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>NetData Dashboard</title>
+
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+	<meta name="author" content="costa@tsaousis.gr">
+
+	<script type="text/javascript" src="dashboard.js?v37"></script>
+</head>
+<body>
+
+<div style="width: 100%; text-align: center;">
+	<div data-netdata="netdata.server_cpu"
+			data-dimensions="user"
+			data-chart-library="gauge"
+			data-width="150px"
+			data-after="-60"
+			data-points="60"
+			data-title="Yes! Realtime!"
+			data-units="I am alive!"
+			data-colors="#FF5555"
+			></div>
+	<br/>
+	<div data-netdata="netdata.server_cpu"
+			data-dimensions="user"
+			data-chart-library="dygraph"
+			data-dygraph-theme="sparkline"
+			data-width="200px"
+			data-height="30px"
+			data-after="-60"
+			data-points="60"
+			data-colors="#FF5555"
+			></div>
+</div>
+</body>
+</html>
diff --git a/web/demo2.html b/web/demo2.html
index 7a8d75a54..9530d914e 100644
--- a/web/demo2.html
+++ b/web/demo2.html
@@ -1,134 +1,134 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>NetData Dashboard</title>
-
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta name="apple-mobile-web-app-capable" content="yes">
-	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-	<meta name="author" content="costa@tsaousis.gr">
-
-	<script>var netdataTheme = 'slate';</script>
-	<script type="text/javascript" src="dashboard.js"></script>
-</head>
-<body>
-
-<div class="container" style="width: 90%; padding-top: 10px; text-align: center; color: #AAA">
-	<div style="font-size: 7vw;">why netdata?</div>
-	<br/>
-	<div style="font-size: 2vw; color: white;">These charts visualize the same data...</div>
-
-
-	<!-- Nav tabs -->
-	<ul class="nav nav-tabs" role="tablist">
-		<li role="presentation" class="active"><a href="#gauge" aria-controls="gauge" role="tab" data-toggle="tab">Gauge.js</a></li>
-		<li role="presentation"><a href="#easypiechart" aria-controls="easypiechart" role="tab" data-toggle="tab">Easy Pie Chart</a></li>
-	</ul>
-
-	<!-- Tab panes -->
-	<div class="tab-content">
-		<div role="tabpanel" class="tab-pane active" id="gauge">
-
-			<div style="display: inline-block; width: 35.8%">
-				<div style="font-size: 1.2vw; color: #666; padding-top: 10px;"><i class="fa fa-comment"></i> I can trace an issue like this</div>
-				<br/>
-				<div data-netdata="example.random2"
-						data-dimensions="random"
-						data-chart-library="gauge"
-						data-gauge-max-value="32767"
-						data-width="100%"
-						data-after="-600"
-						data-points="600"
-						data-title="1/second (netdata&nbsp;default)"
-						data-units="important metric"
-						data-colors="#5A5"
-						></div>
-			</div>
-			<div style="display: inline-block; width: 50%">
-				<div style="font-size: 1.2vw; color: #666;"><i class="fa fa-comment"></i> Can you trace an issue like these?<br/>&nbsp;<br/></div>
-				<div data-netdata="example.random2"
-						data-dimensions="random"
-						data-chart-library="gauge"
-						data-gauge-max-value="32767"
-						data-width="45%"
-						data-after="-600"
-						data-points="40"
-						data-title="Updates Every 15&nbsp;Sec"
-						data-units="important metric"
-						data-colors="#C55"
-						></div>
-				<div data-netdata="example.random2"
-						data-dimensions="random"
-						data-chart-library="gauge"
-						data-gauge-max-value="32767"
-						data-width="45%"
-						data-after="-600"
-						data-points="2"
-						data-title="Updates Every 5&nbsp;Mins"
-						data-units="important metric"
-						data-colors="#C55"
-						></div>
-			</div>
-		</div>
-		<div role="tabpanel" class="tab-pane" id="easypiechart">
-
-			<div style="display: inline-block; width: 25%">
-				<div style="font-size: 1.2vw; color: #666; padding-top: 10px;"><i class="fa fa-comment"></i> I can trace an issue like this</div>
-				<br/>
-				<div data-netdata="example.random2"
-						data-dimensions="random"
-						data-chart-library="easypiechart"
-						data-easypiechart-max-value="32767"
-						data-width="100%"
-						data-after="-600"
-						data-points="600"
-						data-title="1/second (netdata&nbsp;default)"
-						data-units="important metric"
-						data-colors="#5A5"
-						></div>
-			</div>
-			<div style="display: inline-block; width: 40%">
-				<div style="font-size: 1.2vw; color: #666;"><i class="fa fa-comment"></i> Can you trace an issue like these?<br/>&nbsp;<br/></div>
-				<div data-netdata="example.random2"
-						data-dimensions="random"
-						data-chart-library="easypiechart"
-						data-easypiechart-max-value="32767"
-						data-width="45%"
-						data-after="-600"
-						data-points="40"
-						data-title="Updates Every 15&nbsp;Sec&nbsp;(<a href='https://github.com/OpenTSDB/opentsdb.net/blob/gh-pages/docs/source/user_guide/utilities/tcollector.rst#collecting-lots-of-metrics-with-tcollector' target='_blank'>OpenTSDB</a>)"
-						data-units="important metric"
-						data-colors="#C55"
-						></div>
-				<div data-netdata="example.random2"
-						data-dimensions="random"
-						data-chart-library="easypiechart"
-						data-easypiechart-max-value="32767"
-						data-width="45%"
-						data-after="-600"
-						data-points="2"
-						data-title="Updates Every 5&nbsp;Mins&nbsp;(your&nbsp;NMS)"
-						data-units="important metric"
-						data-colors="#C55"
-						></div>
-			</div>
-		</div>
-	</div>
-	<div style="font-size: 1.5vw;">Hover on the chart below, to see the selected value on the charts above!</div>
-	<div data-netdata="example.random2"
-			data-dimensions="random"
-			data-dygraph-theme="sparkline"
-			data-width="100%"
-			data-height="20vh"
-			data-after="-600"
-			data-points="600"
-			data-title="1/second (netdata&nbsp;default)"
-			data-units="something"
-			data-colors="#888"
-			></div>
-</div>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>NetData Dashboard</title>
+
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+	<meta name="author" content="costa@tsaousis.gr">
+
+	<script>var netdataTheme = 'slate';</script>
+	<script type="text/javascript" src="dashboard.js?v37"></script>
+</head>
+<body>
+
+<div class="container" style="width: 90%; padding-top: 10px; text-align: center; color: #AAA">
+	<div style="font-size: 7vw;">why netdata?</div>
+	<br/>
+	<div style="font-size: 2vw; color: white;">These charts visualize the same data...</div>
+
+
+	<!-- Nav tabs -->
+	<ul class="nav nav-tabs" role="tablist">
+		<li role="presentation" class="active"><a href="#gauge" aria-controls="gauge" role="tab" data-toggle="tab">Gauge.js</a></li>
+		<li role="presentation"><a href="#easypiechart" aria-controls="easypiechart" role="tab" data-toggle="tab">Easy Pie Chart</a></li>
+	</ul>
+
+	<!-- Tab panes -->
+	<div class="tab-content">
+		<div role="tabpanel" class="tab-pane active" id="gauge">
+
+			<div style="display: inline-block; width: 35.8%">
+				<div style="font-size: 1.2vw; color: #666; padding-top: 10px;"><i class="fa fa-comment"></i> I can trace an issue like this</div>
+				<br/>
+				<div data-netdata="example.random2"
+						data-dimensions="random"
+						data-chart-library="gauge"
+						data-gauge-max-value="32767"
+						data-width="100%"
+						data-after="-600"
+						data-points="600"
+						data-title="1/second (netdata&nbsp;default)"
+						data-units="important metric"
+						data-colors="#5A5"
+						></div>
+			</div>
+			<div style="display: inline-block; width: 50%">
+				<div style="font-size: 1.2vw; color: #666;"><i class="fa fa-comment"></i> Can you trace an issue like these?<br/>&nbsp;<br/></div>
+				<div data-netdata="example.random2"
+						data-dimensions="random"
+						data-chart-library="gauge"
+						data-gauge-max-value="32767"
+						data-width="45%"
+						data-after="-600"
+						data-points="40"
+						data-title="Updates Every 15&nbsp;Sec"
+						data-units="important metric"
+						data-colors="#C55"
+						></div>
+				<div data-netdata="example.random2"
+						data-dimensions="random"
+						data-chart-library="gauge"
+						data-gauge-max-value="32767"
+						data-width="45%"
+						data-after="-600"
+						data-points="2"
+						data-title="Updates Every 5&nbsp;Mins"
+						data-units="important metric"
+						data-colors="#C55"
+						></div>
+			</div>
+		</div>
+		<div role="tabpanel" class="tab-pane" id="easypiechart">
+
+			<div style="display: inline-block; width: 25%">
+				<div style="font-size: 1.2vw; color: #666; padding-top: 10px;"><i class="fa fa-comment"></i> I can trace an issue like this</div>
+				<br/>
+				<div data-netdata="example.random2"
+						data-dimensions="random"
+						data-chart-library="easypiechart"
+						data-easypiechart-max-value="32767"
+						data-width="100%"
+						data-after="-600"
+						data-points="600"
+						data-title="1/second (netdata&nbsp;default)"
+						data-units="important metric"
+						data-colors="#5A5"
+						></div>
+			</div>
+			<div style="display: inline-block; width: 40%">
+				<div style="font-size: 1.2vw; color: #666;"><i class="fa fa-comment"></i> Can you trace an issue like these?<br/>&nbsp;<br/></div>
+				<div data-netdata="example.random2"
+						data-dimensions="random"
+						data-chart-library="easypiechart"
+						data-easypiechart-max-value="32767"
+						data-width="45%"
+						data-after="-600"
+						data-points="40"
+						data-title="Updates Every 15&nbsp;Sec&nbsp;(<a href='https://github.com/OpenTSDB/opentsdb.net/blob/gh-pages/docs/source/user_guide/utilities/tcollector.rst#collecting-lots-of-metrics-with-tcollector' target='_blank'>OpenTSDB</a>)"
+						data-units="important metric"
+						data-colors="#C55"
+						></div>
+				<div data-netdata="example.random2"
+						data-dimensions="random"
+						data-chart-library="easypiechart"
+						data-easypiechart-max-value="32767"
+						data-width="45%"
+						data-after="-600"
+						data-points="2"
+						data-title="Updates Every 5&nbsp;Mins&nbsp;(your&nbsp;NMS)"
+						data-units="important metric"
+						data-colors="#C55"
+						></div>
+			</div>
+		</div>
+	</div>
+	<div style="font-size: 1.5vw;">Hover on the chart below, to see the selected value on the charts above!</div>
+	<div data-netdata="example.random2"
+			data-dimensions="random"
+			data-dygraph-theme="sparkline"
+			data-width="100%"
+			data-height="20vh"
+			data-after="-600"
+			data-points="600"
+			data-title="1/second (netdata&nbsp;default)"
+			data-units="something"
+			data-colors="#888"
+			></div>
+</div>
+</body>
+</html>
diff --git a/web/demosites.html b/web/demosites.html
new file mode 100644
index 000000000..f5047f4b2
--- /dev/null
+++ b/web/demosites.html
@@ -0,0 +1,721 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>NetData - Real-time performance monitoring, done right!</title>
+
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
+	<script>
+	// --- OPTIONS FOR THE DASHBOARD --
+
+	// this section has to appear before loading dashboard.js
+
+	// Select a theme.
+	// uncomment on of the two themes:
+
+	// var netdataTheme = 'default'; // this is white
+	var netdataTheme = 'slate'; // this is dark
+
+
+	// Set the default netdata server.
+	// on charts without a 'data-host', this one will be used.
+	// the default is the server that dashboard.js is downloaded from.
+
+	// var netdataServer = 'http://my.server:19999/';
+	</script>
+
+	<!--
+		--- LOAD dashboard.js ---
+
+		to host this HTML file on your web server,
+		you have to load dashboard.js from the netdata server.
+
+		So, pick one the two below
+		If you pick the first, set the server name/IP.
+
+		The second assumes you host this file on /usr/share/netdata/web
+		and that you have chown it to be owned by netdata:netdata
+	-->
+	<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
+	<script type="text/javascript" src="dashboard.js?v37"></script>
+
+	<script>
+	// --- OPTIONS FOR THE CHARTS --
+
+	// destroy charts not shown (lowers memory on the browsers)
+	// set this to 'yes' to destroy, 'false' to hide the charts
+	NETDATA.options.current.destroy_on_hide = false;
+	
+	// set this to false, to always show all dimensions
+	NETDATA.options.current.eliminate_zero_dimensions = true;
+	
+	// set this to false, to lower the pressure on the browser
+	NETDATA.options.current.concurrent_refreshes = true;
+
+	// if you need to support slow mobile phones, set this to false
+	NETDATA.options.current.parallel_refresher = true;
+
+	// set this to false, to always update the charts, even if focus is lost
+	NETDATA.options.current.stop_updates_when_focus_is_lost = true;
+	</script>
+
+	<style>
+
+body {
+	font-size: 1vw;
+}
+
+.mysparkline {
+	position: relative;
+	display: inline-block;
+	min-height: 50px;
+	width: 100%;
+	height: 8vmax;
+	text-align: left;
+}
+
+.mysparkline-overchart-label {
+	position: absolute;
+	display: block;
+	top: 0;
+	left: 10px;
+	bottom: 0;
+	right: 0;
+	font-size: 1vmax;
+	z-index: 1;
+}
+
+.mysparkline-overchart-value {
+	position: absolute;
+	display: block;
+	top: 1.1vmax;
+	left: 10px;
+	bottom: 0;
+	right: 0;
+	font-size: 5vmax;
+	z-index: 2;
+	text-shadow: #333 0px 0px 2px;
+}
+
+.myfullchart {
+	position: relative;
+	display: inline-block;
+	width: 100%;
+	height: 14vmax;
+	min-height: 150px;
+	text-align: left;
+}
+
+.mygauge-combo {
+	display: inline-block;
+}
+
+.mygauge {
+	position: relative;
+	display: block;
+	width: 20vw;
+	height: 12vw;
+}
+
+.mygauge-button {
+	display: block;
+}
+
+.mytitle {
+	padding-top: 6vw;
+	padding-bottom: 1vw;
+	text-align: center;
+	font-size: 2.4vw;
+}
+
+.mysubtitle {
+	padding-top: 2vw;
+	padding-bottom: 1vw;
+	text-align: center;
+	font-size: 1.8vw;
+}
+
+.mycontent {
+	text-align: center;
+	font-size: 1.5vw;
+}
+
+@media only screen and (min-width : 992px) {
+	.container {
+		width: 90%;
+	}
+}
+@media only screen and (max-width : 992px) {
+	.container {
+		width: 100%;
+	}
+}
+	</style>
+
+</head>
+<body style="text-align: center;">
+
+<div class="container">
+
+	<div style="text-align: center; font-size: 13vw; height: 14vw;">
+		<b>netdata</b>
+	</div>
+	<div style="text-align: center; font-size: 2vw; height: 2.5vw;">
+		real-time performance monitoring
+	</div>
+	<div style="width:80%; text-align: right; font-size: 2.7vw;">
+		<strong>scaled out</strong>!
+	</div>
+	<div class="mytitle">
+		pick a <b>netdata</b> demo server
+	</div>
+	<div class="mycontent">
+		these demo servers show what you will get by installing <b>netdata</b>
+	</div>
+
+	<div style="width: 100%; text-align: center; padding-top: 2vw;">
+		<div style="width: 100%; text-align: center;">
+
+			<div class="mygauge-combo">
+				<div class="mygauge">
+					<div data-netdata="netdata.requests"
+							data-host="//london.my-netdata.io"
+							data-title="EU - London"
+							data-chart-library="gauge"
+							data-width="100%"
+							data-after="-300"
+							data-points="300"
+							data-colors="#558855"
+							></div>
+				</div>
+				<div class="mygauge-button">
+					<br/>&nbsp;<br/>
+					<button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//london.my-netdata.io/default.html'" style="font-size: 1.5vw;">Enter London!</button>
+					<div style="font-size: 1vw;">
+						Donated by DigitalOcean.com
+					</div>
+				</div>
+			</div>
+			<div class="mygauge-combo">
+				<div class="mygauge">
+					<div data-netdata="netdata.requests"
+							data-host="//atlanta.my-netdata.io"
+							data-title="US - Atlanta"
+							data-chart-library="gauge"
+							data-width="100%"
+							data-after="-300"
+							data-points="300"
+							data-colors="#AA5555"
+							></div>
+				</div>
+				<div class="mygauge-button">
+					<br/>&nbsp;<br/>
+					<button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//atlanta.my-netdata.io/default.html'" style="font-size: 1.5vw;">Enter Atlanta!</button>
+					<div style="font-size: 1vw;">
+						Donated by CDN77.com
+					</div>
+				</div>
+			</div>
+			<div class="mygauge-combo">
+				<div class="mygauge">
+					<div data-netdata="netdata.requests"
+							data-host="//athens.my-netdata.io"
+							data-title="EU - Greece"
+							data-chart-library="gauge"
+							data-width="100%"
+							data-after="-300"
+							data-points="300"
+							data-colors="#5555AA"
+							></div>
+				</div>
+				<div class="mygauge-button">
+					<br/>&nbsp;<br/>
+					<button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//athens.my-netdata.io/default.html'" style="font-size: 1.5vw;">Come to Greece!</button>
+					<div style="font-size: 0.8vw;">
+						&nbsp;
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="mytitle">
+		this page is a custom <b>netdata</b> dashboard
+	</div>
+	<div class="mycontent">
+		charts are coming from 3 servers, in parallel
+		<br/>
+		the servers are not aware of this multi-server dashboard,
+		<br/>
+		each server is not aware of the other 2 servers,
+		<br/>
+		but on this dashboard <b>they are one</b>!
+	</div>
+	<div style="padding-top: 1vw; width: 100%; text-align: center; font-size: 1.5vw;">
+		<i class="fa fa-comment" aria-hidden="true"></i>
+		hover on a chart below, or drag it to show the past - <b>the others will follow</b>!
+		<br/>
+		double click on a chart to reset them all
+	</div>
+
+	<div class="mytitle">
+		our <code>ngnix</code> performance
+	</div>
+	<div class="mycontent">
+		(we proxy netdata through nginx, on the demo sites)
+	</div>
+
+	<!-- Nav tabs -->
+	<ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
+		<li role="presentation" class="active"><a href="#nginx_requests" aria-controls="nginx_requests" role="tab" data-toggle="tab">Requests</a></li>
+		<li role="presentation"><a href="#nginx_connections" aria-controls="nginx_connections" role="tab" data-toggle="tab">Connections</a></li>
+	</ul>
+
+	<!-- Tab panes -->
+	<div class="tab-content">
+		<div role="tabpanel" class="tab-pane active" id="nginx_requests">
+			<div class="mysparkline">
+				<div class="mysparkline-overchart-label">
+					<b>EU - London</b> web requests/s
+				</div>
+				<div class="mysparkline-overchart-value" id="nginx.requests.netdata" >
+				</div>
+				<div data-netdata="nginx.requests"
+						data-dimensions="requests"
+						data-host="//london.my-netdata.io"
+						data-chart-library="dygraph"
+						data-dygraph-theme="sparkline"
+						data-dygraph-type="area"
+						data-width="100%"
+						data-height="100%"
+						data-after="-300"
+						data-colors="#558855"
+						data-show-value-of-requests-at="nginx.requests.netdata"
+						></div>
+			</div>
+
+			<div class="mysparkline">
+				<div class="mysparkline-overchart-label">
+					<b>US - Atlanta</b> web requests/s
+				</div>
+				<div class="mysparkline-overchart-value" id="nginx.requests.netdata2" >
+				</div>
+				<div data-netdata="nginx.requests"
+						data-dimensions="requests"
+						data-host="//atlanta.my-netdata.io"
+						data-chart-library="dygraph"
+						data-dygraph-theme="sparkline"
+						data-dygraph-type="area"
+						data-width="100%"
+						data-height="100%"
+						data-after="-300"
+						data-colors="#AA5555"
+						data-show-value-of-requests-at="nginx.requests.netdata2"
+						></div>
+			</div>
+
+			<div class="mysparkline">
+				<div class="mysparkline-overchart-label">
+					<b>EU - Greece</b> web requests/s
+				</div>
+				<div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
+				</div>
+				<div data-netdata="nginx.requests"
+						data-dimensions="requests"
+						data-host="//athens.my-netdata.io"
+						data-chart-library="dygraph"
+						data-dygraph-theme="sparkline"
+						data-dygraph-type="area"
+						data-width="100%"
+						data-height="100%"
+						data-after="-300"
+						data-colors="#5555AA"
+						data-show-value-of-requests-at="nginx.requests.netdata3"
+						></div>
+			</div>
+		</div>
+
+		<div role="tabpanel" class="tab-pane" id="nginx_connections">
+			<div class="mysparkline">
+				<div class="mysparkline-overchart-label">
+					<b>EU - London</b> active connections
+				</div>
+				<div class="mysparkline-overchart-value" id="nginx.connections.netdata1" >
+				</div>
+				<div data-netdata="nginx.connections"
+						data-dimensions="active"
+						data-host="//london.my-netdata.io"
+						data-chart-library="dygraph"
+						data-dygraph-theme="sparkline"
+						data-dygraph-type="area"
+						data-width="100%"
+						data-height="100%"
+						data-after="-300"
+						data-colors="#558855"
+						data-show-value-of-active-at="nginx.connections.netdata1"
+						></div>
+			</div>
+
+			<div class="mysparkline">
+				<div class="mysparkline-overchart-label">
+					<b>US - Atlanta</b> active connections
+				</div>
+				<div class="mysparkline-overchart-value" id="nginx.connections.netdata2" >
+				</div>
+				<div data-netdata="nginx.connections"
+						data-dimensions="active"
+						data-host="//atlanta.my-netdata.io"
+						data-chart-library="dygraph"
+						data-dygraph-theme="sparkline"
+						data-dygraph-type="area"
+						data-width="100%"
+						data-height="100%"
+						data-after="-300"
+						data-colors="#AA5555"
+						data-show-value-of-active-at="nginx.connections.netdata2"
+						></div>
+			</div>
+
+			<div class="mysparkline">
+				<div class="mysparkline-overchart-label">
+					<b>EU - Greece</b> active connections
+				</div>
+				<div class="mysparkline-overchart-value" id="nginx.connections.netdata3" >
+				</div>
+				<div data-netdata="nginx.connections"
+						data-dimensions="active"
+						data-host="//athens.my-netdata.io"
+						data-chart-library="dygraph"
+						data-dygraph-theme="sparkline"
+						data-dygraph-type="area"
+						data-width="100%"
+						data-height="100%"
+						data-after="-300"
+						data-colors="#5555AA"
+						data-show-value-of-active-at="nginx.connections.netdata3"
+						></div>
+			</div>
+		</div>
+	</div>
+
+	<div style="width: 100%; text-align: right; font-size: 1vw;">
+		<i class="fa fa-comment" aria-hidden="true"></i> these charts are draggable and touchable, double click them to reset them
+	</div>
+
+
+	<div class="mytitle">
+		bandwidth consumption on the demo sites
+	</div>
+	<div class="mycontent">
+		Linux QoS is configured by <a href="https://github.com/firehol/netdata/wiki/You-should-install-QoS-on-all-your-servers">FireQOS</a>
+	</div>
+
+	<!-- Nav tabs -->
+	<ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
+		<li role="presentation" class="active"><a href="#outbout" aria-controls="outbout" role="tab" data-toggle="tab">Outbound</a></li>
+		<li role="presentation"><a href="#inbound" aria-controls="inbound" role="tab" data-toggle="tab">Inbound</a></li>
+	</ul>
+
+	<!-- Tab panes -->
+	<div class="tab-content">
+		<div role="tabpanel" class="tab-pane active" id="outbout">
+			<div class="myfullchart">
+				<div data-netdata="tc.world_out"
+					data-host="//london.my-netdata.io"
+					data-chart-library="dygraph"
+					data-title="EU - London, traffic we send per service"
+					data-width="100%"
+					data-height="100%"
+					data-after="-300"
+					></div>
+			</div>
+
+			<div class="myfullchart">
+				<div data-netdata="tc.world_out"
+					data-host="//atlanta.my-netdata.io"
+					data-chart-library="dygraph"
+					data-title="US - Atlanta, traffic we send per service"
+					data-width="100%"
+					data-height="100%"
+					data-after="-300"
+					></div>
+
+			</div>
+
+			<div class="myfullchart">
+				<div data-netdata="tc.world_out"
+					data-host="//athens.my-netdata.io"
+					data-chart-library="dygraph"
+					data-title="EU - Greece, traffic we send per service"
+					data-width="100%"
+					data-height="100%"
+					data-after="-300"
+					></div>
+			</div>
+		</div>
+		<div role="tabpanel" class="tab-pane" id="inbound">
+			<div class="myfullchart">
+				<div data-netdata="tc.world_in"
+					data-host="//london.my-netdata.io"
+					data-chart-library="dygraph"
+					data-title="EU - London, traffic we receive per service"
+					data-width="100%"
+					data-height="100%"
+					data-after="-300"
+					></div>
+
+			</div>
+
+			<div class="myfullchart">
+				<div data-netdata="tc.world_in"
+					data-host="//atlanta.my-netdata.io"
+					data-chart-library="dygraph"
+					data-title="US - Atlanta, traffic we receive per service"
+					data-width="100%"
+					data-height="100%"
+					data-after="-300"
+					></div>
+
+			</div>
+
+			<div class="myfullchart">
+				<div data-netdata="tc.world_in"
+					data-host="//athens.my-netdata.io"
+					data-chart-library="dygraph"
+					data-title="EU - Greece, traffic we receive per service"
+					data-width="100%"
+					data-height="100%"
+					data-after="-300"
+					></div>
+			</div>
+		</div>
+	</div>
+	<div style="width: 100%; text-align: right; font-size: 1vw;">
+		<i class="fa fa-comment" aria-hidden="true"></i> <i>these legends are interactive and the charts are resizable here ^^^</i>
+	</div>
+
+	<div class="mytitle">
+		DDoS protection performance on the demo sites
+	</div>
+	<div class="mycontent">
+		iptables SYNPROXY configured by <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>
+	</div>
+
+	<div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
+
+		<div class="mysparkline">
+			<div class="mysparkline-overchart-label">
+				<b>EU - London</b>, TCP SYN packets/s received
+			</div>
+			<div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata1" >
+			</div>
+			<div data-netdata="netfilter.synproxy_syn_received"
+					data-dimensions="received"
+					data-host="//london.my-netdata.io"
+					data-chart-library="dygraph"
+					data-dygraph-theme="sparkline"
+					data-dygraph-type="area"
+					data-width="100%"
+					data-height="100%"
+					data-after="-300"
+					data-colors="#558855"
+					data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata1"
+					></div>
+		</div>
+
+		<div class="mysparkline">
+			<div class="mysparkline-overchart-label">
+				<b>US - Atlanta</b>, TCP SYN packets/s received
+			</div>
+			<div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata2" >
+			</div>
+			<div data-netdata="netfilter.synproxy_syn_received"
+					data-dimensions="received"
+					data-host="//atlanta.my-netdata.io"
+					data-chart-library="dygraph"
+					data-dygraph-theme="sparkline"
+					data-dygraph-type="area"
+					data-width="100%"
+					data-height="100%"
+					data-after="-300"
+					data-colors="#885555"
+					data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata2"
+					></div>
+		</div>
+
+		<div class="mysparkline">
+			<div class="mysparkline-overchart-label">
+				<b>EU - Greece</b>, TCP SYN packets/s received
+			</div>
+			<div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
+			</div>
+			<div data-netdata="netfilter.synproxy_syn_received"
+					data-dimensions="received"
+					data-host="//athens.my-netdata.io"
+					data-chart-library="dygraph"
+					data-dygraph-theme="sparkline"
+					data-dygraph-type="area"
+					data-width="100%"
+					data-height="100%"
+					data-after="-300"
+					data-colors="#555588"
+					data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
+					></div>
+		</div>
+	</div>
+	<div style="width: 100%; text-align: right; font-size: 1vw;">
+		<i class="fa fa-comment" aria-hidden="true"></i> <i>did you notice the decimal numbers?
+		<br/>netdata interpolates collected values at second boundaries, with nanosecond detail!</i>
+	</div>
+
+
+	<div class="mytitle">
+		CPU Utilization of the demo sites
+	</div>
+
+	<div style="padding-top: 1vw;">
+		<div class="myfullchart">
+			<div data-netdata="system.cpu"
+				data-host="//london.my-netdata.io"
+				data-chart-library="dygraph"
+				data-title="EU - London, CPU Usage"
+				data-width="100%"
+				data-height="100%"
+				data-after="-300"
+				></div>
+		</div>
+
+		<div class="myfullchart">
+			<div data-netdata="system.cpu"
+				data-host="//atlanta.my-netdata.io"
+				data-chart-library="dygraph"
+				data-title="US - Atlanta, CPU Usage"
+				data-width="100%"
+				data-height="100%"
+				data-after="-300"
+				></div>
+		</div>
+
+		<div class="myfullchart">
+			<div data-netdata="system.cpu"
+				data-host="//athens.my-netdata.io"
+				data-chart-library="dygraph"
+				data-title="EU - Greece, CPU Usage"
+				data-width="100%"
+				data-height="100%"
+				data-after="-300"
+				></div>
+		</div>
+	</div>
+	<div style="width: 100%; text-align: right; font-size: 1vw;">
+		<i class="fa fa-comment" aria-hidden="true"></i> <i>what is using so much CPU?
+		<br/>The site <a href="//iplists.firehol.org/">iplists.firehol.org</a> is maintained by FireHOL - the CPU is used for comparing security IP Lists.</i>
+	</div>
+
+	<div class="mytitle">
+		CPU Usage of the netdata user
+	</div>
+	<div class="mycontent">
+		netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
+		<br/>
+		and <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.)
+	</div>
+
+	<div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
+
+		<div class="mysparkline">
+			<div class="mysparkline-overchart-label">
+				<b>EU - London</b>, CPU % of a single core
+			</div>
+			<div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
+			</div>
+			<div data-netdata="users.cpu"
+					data-dimensions="netdata"
+					data-host="//london.my-netdata.io"
+					data-chart-library="dygraph"
+					data-dygraph-theme="sparkline"
+					data-dygraph-type="area"
+					data-width="100%"
+					data-height="100%"
+					data-after="-300"
+					data-colors="#558855"
+					data-show-value-of-netdata-at="users.cpu.netdata1"
+					></div>
+		</div>
+
+		<div class="mysparkline">
+			<div class="mysparkline-overchart-label">
+				<b>US - Atlanta</b>, CPU % of a single core
+			</div>
+			<div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
+			</div>
+			<div data-netdata="users.cpu"
+					data-dimensions="netdata"
+					data-host="//atlanta.my-netdata.io"
+					data-chart-library="dygraph"
+					data-dygraph-theme="sparkline"
+					data-dygraph-type="area"
+					data-width="100%"
+					data-height="100%"
+					data-after="-300"
+					data-colors="#885555"
+					data-show-value-of-netdata-at="users.cpu.netdata2"
+					></div>
+		</div>
+
+		<div class="mysparkline">
+			<div class="mysparkline-overchart-label">
+				<b>EU - Greece</b>, CPU % of a single core
+			</div>
+			<div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
+			</div>
+			<div data-netdata="users.cpu"
+					data-dimensions="netdata"
+					data-host="//athens.my-netdata.io"
+					data-chart-library="dygraph"
+					data-dygraph-theme="sparkline"
+					data-dygraph-type="area"
+					data-width="100%"
+					data-height="100%"
+					data-after="-300"
+					data-colors="#555588"
+					data-show-value-of-netdata-at="users.cpu.netdata3"
+					></div>
+		</div>
+	</div>
+	<div style="width: 100%; text-align: right; font-size: 1vw;">
+		<i class="fa fa-comment" aria-hidden="true"></i> <i>this utilization is about the whole netdata process tree and the percentage is of <b>a single core</b>!
+		<br/>including <b>BASH</b> plugins (it monitors <code>mysql</code> on the demo sites), <b>node.js</b> plugins (it monitors <code>bind9</code> on the demo sites), etc.
+		<br/>and including the chart refreshes for the dashboards of all viewers.</i>
+	</div>
+
+	<div style="padding-top: 6vw; width: 100%; text-align: center; font-size: 2vw;">
+		want to know more?
+		<br/>
+		jump to <a href="https://github.com/firehol/netdata/">the netdata page at github</a>
+		<br/>
+		it needs just 3 mins to be installed on your servers!
+		<br/>
+		&nbsp;
+	</div>
+</div>
+</body>
+<script>
+	// google analytics when this is used for the home page of the demo sites
+	// you don't need this if you customize this dashboard for your needs
+	setTimeout(function() {
+		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+		ga('create', 'UA-64295674-3', 'auto');
+		ga('send', 'pageview');
+	}, 2000);
+</script>
+</html>
diff --git a/web/index.html b/web/index.html
index 6f6013da1..9cc2b4bbe 100644
--- a/web/index.html
+++ b/web/index.html
@@ -191,6 +191,42 @@
 		font-weight: 500;
 	}
 
+	.dropdown-menu {
+		min-width: 200px;
+	}
+	.dropdown-menu.columns-2 {
+		margin: 0;
+		padding: 0;
+		width: 400px;
+	}
+	.dropdown-menu li a {
+		padding: 5px 15px;
+		font-weight: 300;
+	}
+	.dropdown-menu.multi-column {
+		overflow-x: hidden;
+	}
+	.multi-column-dropdown {
+		list-style: none;
+		padding: 0;
+	}
+	.multi-column-dropdown li a {
+		display: block;
+		clear: both;
+		line-height: 1.428571429;
+		white-space: normal;
+	}
+	.multi-column-dropdown li a:hover {
+		text-decoration: none;
+		color: #f5f5f5;
+		background-color: #262626;
+	}
+	.scrollable-menu {
+		height: auto;
+		max-height: 80vh;
+		overflow-x: hidden;
+	}
+
 	/* Back to top (hidden on mobile) */
 	.back-to-top,
 	.dashboard-theme-toggle {
@@ -320,6 +356,7 @@
 			else
 				return ret;
 		}
+
 		var netdataTheme = getTheme('slate');
 
 		function setTheme(theme) {
@@ -327,15 +364,94 @@
 
 			return saveLocalStorage('netdataTheme', theme);
 		}
+
+		var netdataRegistryCallback = function(urls_array) {
+			var el = '';
+			var a1 = '';
+			var found = 0;
+
+			if(urls_array) {
+				function name_comparator_desc(a, b) {
+					if (a.name > b.name) return -1;
+					if (a.name < b.name) return 1;
+					return 0;
+				}
+
+				var urls = urls_array.sort(name_comparator_desc);
+				var len = urls.length;
+				while(len--) {
+					var u = urls[len];
+
+					var status = "enabled";
+					found++;
+
+					if(u.guid === NETDATA.registry.machine_guid)
+						status = "disabled"
+
+					el += '<li id="registry_server_' + u.guid + '" class="' + status + '"><a href="' + u.url + '">' + u.name + '</a></li>';
+					a1 += '<li id="registry_action_' + u.guid + '"><a href="#" onclick="deleteRegistryModalHandler(\'' + u.guid + '\',\'' + u.name + '\',\'' + u.url + '\'); return false;"><i class="fa fa-trash-o" aria-hidden="true" style="color: #999;"></i></a></li>';
+				}
+			}
+
+			if(!found) {
+				if(urls)
+					el += '<li><a href="https://github.com/firehol/netdata/wiki/mynetdata-menu-item" style="color: #666;" target="_blank">your netdata server list is empty...</a></li>';
+				else
+					el += '<li><a href="https://github.com/firehol/netdata/wiki/mynetdata-menu-item" style="color: #666;" target="_blank">failed to contact the registry...</a></li>';
+
+				a1 += '<li><a href="#">&nbsp;</a></li>';
+
+				el += '<li role="separator" class="divider"></li>' +
+						'<li><a href="//london.netdata.rocks/default.html">EU - London (DigitalOcean.com)</a></li>' +
+						'<li><a href="//atlanta.netdata.rocks/default.html">US - Atlanta (CDN77.com)</a></li>' +
+						'<li><a href="//athens.netdata.rocks/default.html">EU - Athens</a></li>';
+				a1 += '<li role="separator" class="divider"></li>' +
+						'<li><a href="#">&nbsp;</a></li>' +
+						'<li><a href="#">&nbsp;</a></li>'+
+						'<li><a href="#">&nbsp;</a></li>';
+			}
+
+			el += '<li role="separator" class="divider"></li>';
+			a1 += '<li role="separator" class="divider"></li>';
+
+			el += '<li><a href="https://github.com/firehol/netdata/wiki/mynetdata-menu-item" style="color: #999;" target="_blank">What is this?</a></li>';
+			a1 += '<li><a href="#" style="color: #999;" onclick="switchRegistryModalHandler(); return false;"><i class="fa fa-cog" aria-hidden="true" style="color: #999;"></i></a></li>'
+
+			document.getElementById('mynetdata_servers').innerHTML = el;
+			document.getElementById('mynetdata_servers2').innerHTML = el;
+			document.getElementById('mynetdata_actions1').innerHTML = a1;
+		};
+
 	</script>
 
 	<!-- load the dashboard manager - it will do the rest -->
-	<script type="text/javascript" src="dashboard.js?v32"></script>
+	<script type="text/javascript" src="dashboard.js?v37"></script>
 </head>
 
 <body data-spy="scroll" data-target="#sidebar">
 	<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;">
+				<ul class="nav navbar-nav">
+					<li class="dropdown">
+						<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">my-netdata <strong class="caret"></strong></a>
+						<ul class="dropdown-menu scrollable-menu inpagemenu multi-column columns-2" role="menu">
+							<div class="row">
+								<div class="col-sm-6" style="width: 85%; padding-right: 0;">
+									<ul id="mynetdata_servers" class="multi-column-dropdown">
+										<li><a href="#" onclck="return false;" style="color: #999;">loading...</a></li>
+									</ul>
+								</div>
+								<div class="col-sm-3 hidden-xs" style="width: 15%; padding-left: 0;">
+									<ul id="mynetdata_actions1" class="multi-column-dropdown">
+									<li style="color: #999;">&nbsp;</li>
+									</ul>
+								</div>
+							</div>
+						</ul>
+					</li>
+				</ul>
+			</nav>
 			<div class="navbar-header">
 				<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
 					<span class="sr-only">Toggle navigation</span>
@@ -347,15 +463,27 @@
 			</div>
 			<nav class="collapse navbar-collapse navbar-right" role="navigation">
 				<ul class="nav navbar-nav">
-					<li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-cog"></i> settings</a></li>
-					<li><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
-					<li id="updateButton"><a href="#" class="btn" data-toggle="modal" data-target="#updateModal"><i class="fa fa-cloud-download"></i> update</a></li>
-<!--					<li><a href="old/" class="btn" target="_blank"><i class="fa fa-step-backward"></i> old dashboard</a></li> -->
-					<li><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> help</a></li>
-<!--					<li><a href="#sec">Visualize</a></li>
-					<li><a href="#sec">Prototype</a></li>
--->				</ul>
+					<li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-cog"></i> settings</a></li>
+					<li class="hidden-sm"><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
+					<li class="hidden-sm" id="updateButton"><a href="#" class="btn" data-toggle="modal" data-target="#updateModal"><i class="fa fa-cloud-download"></i> update</a></li>
+					<li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> help</a></li>
+					<li class="dropdown hidden-md hidden-lg hidden-xs">
+						<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">Menu <strong class="caret"></strong></a>
+						<ul class="dropdown-menu scrollable-menu inpagemenu" role="menu">
+							<li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-cog"></i> settings</a></li>
+							<li><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
+							<li><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> help</a></li>
+						</ul>
+					</li>
+					<li class="dropdown hidden-sm hidden-md hidden-lg">
+						<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">my-netdata <strong class="caret"></strong></a>
+						<ul id="mynetdata_servers2" class="dropdown-menu scrollable-menu inpagemenu" role="menu">
+							<li><a href="#" onclck="return false;" style="color: #999;">loading...</a></li>
+						</ul>
+					</li>
+				</ul>
 			</nav>
+	</nav>
 		</div>
 	</nav>
 
@@ -456,9 +584,6 @@
 						<i class="fa fa-circle"></i> <a href="http://D3js.org/" target="_blank">D3</a>,
 						<i class="fa fa-copyright"></i> Copyright 2015, Mike Bostock, <a href="http://opensource.org/licenses/BSD-3-Clause" target="_blank">BSD License</a>
 
-						<i class="fa fa-circle"></i> <a href="https://github.com/broofa/node-int64" target="_blank">node-int64</a>,
-						<i class="fa fa-copyright"></i> Copyright 2014, Robert Kieffer, <a href="https://github.com/broofa/node-int64/blob/master/LICENSE" target="_blank">MIT License</a>
-
 					</small>
 				</div>
 			</div>
@@ -775,16 +900,86 @@
 		</div>
 	</div>
 
-<script>
+	<div class="modal fade" id="deleteRegistryModal" tabindex="-1" role="dialog" aria-labelledby="deleteRegistryModalLabel">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+					<h4 class="modal-title" id="deleteRegistryModalLabel">Delete <span id="deleteRegistryServerName"></span>?</h4>
+				</div>
+				<div class="modal-body">
+					You are about to delete, from your personal list of netdata servers, the following server:
+					<p style="text-align: center; padding-top: 10px; padding-bottom: 10px; line-height: 2;">
+					<b><span id="deleteRegistryServerName2"></span></b>
+					<br/>
+					<b><span id="deleteRegistryServerURL"></span></b>
+					</p>
+					Are you sure you want to do this?
+					<br/>
+					<div style="padding: 10px;"></div>
+					<small>Keep in mind, this server will be added back if and when you visit it again.</small>
+					<br/>
+					<div id="deleteRegistryResponse" style="display: block; width: 100%; text-align: center; padding-top: 20px;"></div>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-success" data-dismiss="modal">keep it</button>
+					<a href="#" onclick="notifyForDeleteRegistry(true); return false;" type="button" class="btn btn-danger">delete it</a>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="modal fade" id="switchRegistryModal" tabindex="-1" role="dialog" aria-labelledby="switchRegistryModalLabel">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+					<h4 class="modal-title" id="switchRegistryModalLabel">Switch Netdata Registry Identity</h4>
+				</div>
+				<div class="modal-body">
+					You can copy and paste the following ID to all your browsers (e.g. work and home).
+					<br/>
+					All the browsers with the same ID will identify <b>you</b>, so please don't share this with others.
+					<p style="text-align: center; padding-top: 10px; padding-bottom: 10px; line-height: 2;">
+					<form action="#">
+					<input type="text" class="form-control" id="switchRegistryPersonGUID" placeholder="your personal ID" maxlength="36" autocomplete="off" style="text-align: center; font-size: 1.4em;">
+					</form>
+					</p>
+					Either copy this ID and paste it to another browser, or paste here the ID you have taken from another browser.
+					<p style="padding-top: 10px;"><small>
+						Keep in mind that:
+						<ul>
+							<li>when you switch ID, your previous ID will be lost forever - this is irreversible.</li>
+							<li>both IDs (your old and the new) must list this netdata at their personal lists.</li>
+							<li>both IDs have to be known by the registry: <b><span id="switchRegistryURL"></span></b>.</li>
+							<li>to get a new ID, just clear your browser cookies.</li>
+						</ul>
+					</small></p>
+					<div id="switchRegistryResponse" style="display: block; width: 100%; text-align: center; padding-top: 20px;"></div>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-success" data-dismiss="modal">cancel</button>
+					<a href="#" onclick="notifyForSwitchRegistry(true); return false;" type="button" class="btn btn-danger">impersonate</a>
+				</div>
+			</div>
+		</div>
+	</div>
 
+<script>
 var this_is_demo = null;
 function isdemo() {
 	if(this_is_demo !== null) return this_is_demo;
 	this_is_demo = false;
 
 	try {
-		if(typeof document.location.hostname === 'string')
-			this_is_demo = document.location.hostname.endsWith('.firehol.org');
+		if(typeof document.location.hostname === 'string') {
+			if(document.location.hostname.endsWith('.my-netdata.io') ||
+					document.location.hostname.endsWith('.mynetdata.io') ||
+					document.location.hostname.endsWith('.netdata.rocks') ||
+					document.location.hostname.endsWith('.firehol.org') ||
+					document.location.hostname.endsWith('.netdata.online'))
+					this_is_demo = true;
+		}
 	}
 	catch(error) {
 		;
@@ -797,6 +992,56 @@ if(isdemo()) {
 	document.getElementById('masthead').style.display = 'block';
 }
 
+function switchRegistryModalHandler() {
+	document.getElementById('switchRegistryPersonGUID').value = NETDATA.registry.person_guid;
+	document.getElementById('switchRegistryURL').innerHTML = NETDATA.registry.server;
+	document.getElementById('switchRegistryResponse').innerHTML = '';
+	$('#switchRegistryModal').modal('show');
+}
+
+function notifyForSwitchRegistry() {
+	var n = document.getElementById('switchRegistryPersonGUID').value;
+
+	if(n !== '' && n.length === 36) {
+		NETDATA.registry.switch(n, function(result) {
+			if(result !== null) {
+				$('#switchRegistryModal').modal('hide');
+				NETDATA.registry.init();
+			}
+			else {
+				document.getElementById('switchRegistryResponse').innerHTML = "<b>Sorry! The registry rejected your request.</b>";
+			}
+		});
+	}
+	else
+		document.getElementById('switchRegistryResponse').innerHTML = "<b>The ID you have entered is not a GUID.</b>";
+}
+
+var deleteRegistryUrl = null;
+function deleteRegistryModalHandler(guid, name, url) {
+	deleteRegistryUrl = url;
+	document.getElementById('deleteRegistryServerName').innerHTML = name;
+	document.getElementById('deleteRegistryServerName2').innerHTML = name;
+	document.getElementById('deleteRegistryServerURL').innerHTML = url;
+	document.getElementById('deleteRegistryResponse').innerHTML = '';
+	$('#deleteRegistryModal').modal('show');
+}
+
+function notifyForDeleteRegistry() {
+	if(deleteRegistryUrl) {
+		NETDATA.registry.delete(deleteRegistryUrl, function(result) {
+			if(result !== null) {
+				deleteRegistryUrl = null;
+				$('#deleteRegistryModal').modal('hide');
+				NETDATA.registry.init();
+			}
+			else {
+				document.getElementById('deleteRegistryResponse').innerHTML = "<b>Sorry! this command was rejected by the registry server.</b>";
+			}
+		});
+	}
+}
+
 var options = {
 	sparklines_registry: {},
 	submenu_names: {},
@@ -987,6 +1232,21 @@ var menuData = {
 		title: 'Example Charts',
 		info: undefined
 	},
+
+	'cgroup': {
+		title: 'Container',
+		info: undefined
+	},
+
+	'mysql': {
+		title: 'MySQL',
+		info: undefined
+	},
+
+	'named': {
+		title: 'named',
+		info: undefined
+	},
 };
 
 var submenuData = {
@@ -1297,8 +1557,13 @@ function anyAttribute(obj, attr, key, def) {
 	return def;
 }
 
-function menuTitle(menu) {
-	return anyAttribute(menuData, 'title', menu, menu);
+function menuTitle(chart) {
+	if(typeof chart.menu_pattern !== 'undefined') {
+		return anyAttribute(menuData, 'title', chart.menu_pattern, chart.menu_pattern).toString()
+				+ ': ' + chart.type.slice(-(chart.type.length - chart.menu_pattern.length - 1)).toString();
+	}
+
+	return anyAttribute(menuData, 'title', chart.menu, chart.menu);
 }
 
 function menuInfo(menu) {
@@ -1354,6 +1619,13 @@ function enrichChartData(chart) {
 			chart.menu = tmp;
 			break;
 
+		case 'mysql':
+		case 'named':
+		case 'cgroup':
+			chart.menu = chart.type;
+			chart.menu_pattern = tmp;
+			break;
+
 		case 'tc':
 			chart.menu = tmp;
 
@@ -1390,11 +1662,11 @@ function enrichChartData(chart) {
 
 function name2id(s) {
 	return s
-		.replace(' ', '_')
-		.replace('(', '_')
-		.replace(')', '_')
-		.replace('.', '_')
-		.replace('/', '_');
+		.replace(/ /g, '_')
+		.replace(/\(/g, '_')
+		.replace(/\)/g, '_')
+		.replace(/\./g, '_')
+		.replace(/\//g, '_');
 }
 
 function headMain(charts, duration) {
@@ -1549,8 +1821,9 @@ function renderPage(menus, data) {
 
 		// generate an entry at the main menu
 
-		sidebar += '<li class=""><a href="#' + menu + '">' + menus[menu].title + '</a><ul class="nav">';
-		html += '<div role="section"><div role="sectionhead"><h1 id="' + menu + '" role="heading">' + menus[menu].title + '</h1></div><div id="' + menu + '" role="document">';
+		var menuid = name2id(menu);
+		sidebar += '<li class=""><a href="#' + menuid + '">' + menus[menu].title + '</a><ul class="nav">';
+		html += '<div role="section"><div role="sectionhead"><h1 id="' + menuid + '" role="heading">' + menus[menu].title + '</h1></div><div id="menu_' + menuid + '" role="document">';
 
 		if(menus[menu].info !== null)
 			html += menus[menu].info;
@@ -1558,7 +1831,7 @@ function renderPage(menus, data) {
 		// console.log(' >> ' + menu + ' (' + menus[menu].priority + '): ' + menus[menu].title);
 
 		var shtml = '';
-		var mhead = '<div style="width: 100%; text-align: center;">' + mainhead;
+		var mhead = '<div class="netdata-chart-row">' + mainhead;
 		mainhead = '';
 
 		// sort the submenus of this menu
@@ -1568,13 +1841,14 @@ function renderPage(menus, data) {
 			var submenu = sub[si++];
 
 			// generate an entry at the submenu
-			sidebar += '<li class><a href="#' + name2id(menu + '_' + submenu) + '">' + menus[menu].submenus[submenu].title + '</a></li>';
-			shtml += '<div class="netdata-group-container" id="submenu_' + name2id(menu + '_' + submenu) + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + name2id(menu + '_' + submenu) + '" class="netdata-chart-alignment" role="heading">' + menus[menu].submenus[submenu].title + '</h2>';
+			var submenuid = name2id(menu + '_' + submenu);
+			sidebar += '<li class><a href="#' + submenuid + '">' + menus[menu].submenus[submenu].title + '</a></li>';
+			shtml += '<div class="netdata-group-container" id="submenu_' + submenuid + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + submenuid + '" class="netdata-chart-alignment" role="heading">' + menus[menu].submenus[submenu].title + '</h2>';
 
 			if(menus[menu].submenus[submenu].info !== null)
 				shtml += '<div class="chart-message netdata-chart-alignment" role="document">' + menus[menu].submenus[submenu].info + '</div>';
 
-			var head = '<div style="width: 100%; text-align: center;">';
+			var head = '<div class="netdata-chart-row">';
 			var chtml = '';
 
 			// console.log('    \------- ' + submenu + ' (' + menus[menu].submenus[submenu].priority + '): ' + menus[menu].submenus[submenu].title);
@@ -1629,7 +1903,7 @@ function renderChartsAndMenu(data) {
 			menus[charts[c].menu] = {
 				priority: charts[c].priority,
 				submenus: {},
-				title: menuTitle(charts[c].menu),
+				title: menuTitle(charts[c]),
 				info: menuInfo(charts[c].menu),
 				height: menuHeight(charts[c].menu, options.chartsHeight)
 			};
@@ -1656,6 +1930,8 @@ function renderChartsAndMenu(data) {
 		menus[charts[c].menu].submenus[charts[c].submenu].charts.push(charts[c]);
 	}
 
+	// propagate the descriptive subname given to QoS
+	// to all the other submenus with the same name
 	for(var m in menus) {
 		for(var s in menus[m].submenus) {
 			// set the family using a name
@@ -1841,12 +2117,15 @@ function finalizePage() {
 	// the Dom elements are initially zero-sized
 	NETDATA.parseDom();
 
-	var before = 0, after = 0;
+	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)
+	if(before > 0 && after > 0) {
+		nowelcome = true;
 		NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], after, before);
+	}
 
 	// let it run (update the charts)
 	NETDATA.unpause();
@@ -1939,21 +2218,38 @@ function finalizePage() {
 	// this has to be the last
 	// it reloads the page
 	$('#netdata_theme_control').change(function() {
-		if(setTheme($(this).prop('checked')?'slate':'default'))
+		if(setTheme($(this).prop('checked')?'slate':'white'))
 			location.reload();
 	});
 
-	if(isdemo()) {
-		setTimeout(function() {
-			$('#welcomeModal').modal();
-		}, 1000);
-	}
-	else
-		notifyForUpdate();
-
 	$('#updateModal').on('shown.bs.modal', function() {
 		notifyForUpdate(true);
 	});
+
+	$('#deleteRegistryModal').on('hidden.bs.modal', function() {
+		deleteRegistryGuid = null;
+	});
+
+	if(isdemo()) {
+		if(!nowelcome) {
+			setTimeout(function() {
+				$('#welcomeModal').modal();
+			}, 1000);
+		}
+
+		// google analytics when this is used for the home page of the demo sites
+		// this does not run on user's installations
+		setTimeout(function() {
+			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+			})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+			ga('create', 'UA-64295674-3', 'auto');
+			ga('send', 'pageview');
+		}, 2000);
+	}
+	else notifyForUpdate();
 }
 
 function resetDashboardOptions() {
diff --git a/web/tv.html b/web/tv.html
index 2003a6060..58f08eb39 100644
--- a/web/tv.html
+++ b/web/tv.html
@@ -1,239 +1,244 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>NetData TV Dashboard</title>
-
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta name="apple-mobile-web-app-capable" content="yes">
-	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-
-	<script>
-	// this section has to appear before loading dashboard.js
-
-	// Select a theme.
-	// uncomment on of the two themes:
-
-	// var netdataTheme = 'default'; // this is white
-	var netdataTheme = 'slate'; // this is dark
-
-
-	// Set the default netdata server.
-	// on charts without a 'data-host', this one will be used.
-	// the default is the server that dashboard.js is downloaded from.
-
-	// var netdataServer = 'http://my.server:19999/';
-	</script>
-
-	<!--
-		Load dashboard.js
-
-		to host this HTML file on your web server,
-		you have to load dashboard.js from the netdata server.
-
-		So, pick one the two below
-		If you pick the first, set the server name/IP.
-
-		The second assumes you host this file on /usr/share/netdata/web
-		and that you have chown it to be owned by netdata:netdata
-	-->
-	<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
-	<script type="text/javascript" src="dashboard.js"></script>
-
-	<script>
-	// Set options for TV operation
-	// This has to be done, after dashboard.js is loaded
-
-	// destroy charts not shown (lowers memory on the browser)
-	NETDATA.options.current.destroy_on_hide = true;
-	
-	// set this to false, to always show all dimensions
-	NETDATA.options.current.eliminate_zero_dimensions = true;
-	
-	// always update the charts, even if focus is lost
-	NETDATA.options.current.stop_updates_when_focus_is_lost = false;
-
-	// Since you may render charts from many servers and any of them may
-	// become offline for some time, the charts will break.
-	// This will reload the page every RELOAD_EVERY minutes
-	var RELOAD_EVERY = 5;
-	setTimeout(function(){
-		location.reload();
-	}, RELOAD_EVERY * 60 * 1000);
-
-	</script>
-
-</head>
-<body>
-
-<div style="width: 100%; text-align: center; display: inline-block;">
-
-	<b>PLEASE RESPECT OUR DEMO SITE RESOURCES - DON'T PUT THIS AS-IS ON TV - CLOSE IT WHEN YOU DON'T NEED IT !</b>
-	
-
-	<div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
-		<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
-			<b>CPU On both servers</b>
-		</div>
-		<div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
-			<br/>
-			<div data-netdata="system.cpu"
-					data-host="http://netdata.firehol.org"
-					data-title="CPU usage of netdata.firehol.org"
-					data-chart-library="dygraph"
-					data-width="49%"
-					data-height="100%"
-					data-after="-300"
-					></div>
-			<div data-netdata="system.cpu"
-					data-title="CPU usage of your netdata server"
-					data-chart-library="dygraph"
-					data-width="49%"
-					data-height="100%"
-					data-after="-300"
-					></div>
-		</div>
-	</div>
-
-
-	<div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
-		<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
-			<b>Disk I/O on both servers</b>
-		</div>
-		<div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
-			<div data-netdata="system.io"
-					data-host="http://netdata.firehol.org"
-					data-title="I/O on netdata.firehol.org"
-					data-chart-library="dygraph"
-					data-width="49%"
-					data-height="100%"
-					data-after="-300"
-					></div>
-			<div data-netdata="system.io"
-					data-title="I/O on your netdata server"
-					data-chart-library="dygraph"
-					data-width="49%"
-					data-height="100%"
-					data-after="-300"
-					></div>
-		</div>
-	</div>
-
-
-	<div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
-		<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
-			<b>IPv4 traffic on both servers</b>
-		</div>
-		<div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
-			<div data-netdata="system.ipv4"
-					data-host="http://netdata.firehol.org"
-					data-title="IPv4 traffic on netdata.firehol.org"
-					data-chart-library="dygraph"
-					data-width="49%"
-					data-height="100%"
-					data-after="-300"
-					></div>
-			<div data-netdata="system.ipv4"
-					data-title="IPv4 traffic on your netdata server"
-					data-chart-library="dygraph"
-					data-width="49%"
-					data-height="100%"
-					data-after="-300"
-					></div>
-		</div>
-	</div>
-
-	<div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
-		<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
-			<b>Netdata statistics on both servers</b>
-		</div>
-		<div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">
-			<div style="width: 49%; height:100%; align: center; display: inline-block;">
-				netdata.firehol.org
-				<br/>
-				<div data-netdata="netdata.requests"
-						data-host="http://netdata.firehol.org"
-						data-title="Chart Refreshes/s"
-						data-chart-library="gauge"
-						data-width="20%"
-						data-height="100%"
-						data-after="-300"
-						data-points="300"
-						></div>
-				<div data-netdata="netdata.clients"
-						data-host="http://netdata.firehol.org"
-						data-title="Sockets"
-						data-chart-library="gauge"
-						data-width="20%"
-						data-height="100%"
-						data-after="-300"
-						data-points="300"
-						data-colors="#AA5500"
-						></div>
-				<div data-netdata="netdata.net"
-						data-dimensions="in"
-						data-host="http://netdata.firehol.org"
-						data-title="Requests Traffic"
-						data-chart-library="easypiechart"
-						data-width="15%"
-						data-height="100%"
-						data-after="-300"
-						data-points="300"
-						></div>
-				<div data-netdata="netdata.net"
-						data-dimensions="out"
-						data-host="http://netdata.firehol.org"
-						data-title="Chart Data Traffic"
-						data-chart-library="easypiechart"
-						data-width="15%"
-						data-height="100%"
-						data-after="-300"
-						data-points="300"
-						></div>
-			</div>
-			<div style="width: 49%; height:100%; align: center; display: inline-block;">
-				your netdata server
-				<br/>
-				<div data-netdata="netdata.requests"
-						data-title="Chart Refreshes/s"
-						data-chart-library="gauge"
-						data-width="20%"
-						data-height="100%"
-						data-after="-300"
-						data-points="300"
-						></div>
-				<div data-netdata="netdata.clients"
-						data-title="Sockets"
-						data-chart-library="gauge"
-						data-width="20%"
-						data-height="100%"
-						data-after="-300"
-						data-points="300"
-						data-colors="#AA5500"
-						></div>
-				<div data-netdata="netdata.net"
-						data-dimensions="in"
-						data-title="Requests Traffic"
-						data-chart-library="easypiechart"
-						data-width="15%"
-						data-height="100%"
-						data-after="-300"
-						data-points="300"
-						></div>
-				<div data-netdata="netdata.net"
-						data-dimensions="out"
-						data-title="Chart Data Traffic"
-						data-chart-library="easypiechart"
-						data-width="15%"
-						data-height="100%"
-						data-after="-300"
-						data-points="300"
-						></div>
-			</div>
-		</div>
-	</div>
-</div>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>NetData TV Dashboard</title>
+
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
+	<script>
+	// this section has to appear before loading dashboard.js
+
+	// Select a theme.
+	// uncomment on of the two themes:
+
+	// var netdataTheme = 'default'; // this is white
+	var netdataTheme = 'slate'; // this is dark
+
+
+	// Set the default netdata server.
+	// on charts without a 'data-host', this one will be used.
+	// the default is the server that dashboard.js is downloaded from.
+
+	// var netdataServer = 'http://my.server:19999/';
+	</script>
+
+	<!--
+		Load dashboard.js
+
+		to host this HTML file on your web server,
+		you have to load dashboard.js from the netdata server.
+
+		So, pick one the two below
+		If you pick the first, set the server name/IP.
+
+		The second assumes you host this file on /usr/share/netdata/web
+		and that you have chown it to be owned by netdata:netdata
+	-->
+	<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
+	<script type="text/javascript" src="dashboard.js?v37"></script>
+
+	<script>
+	// Set options for TV operation
+	// This has to be done, after dashboard.js is loaded
+
+	// destroy charts not shown (lowers memory on the browser)
+	NETDATA.options.current.destroy_on_hide = true;
+	
+	// set this to false, to always show all dimensions
+	NETDATA.options.current.eliminate_zero_dimensions = true;
+	
+	// lower the pressure on this browser
+	NETDATA.options.current.concurrent_refreshes = false;
+
+	// if the tv browser is too slow (a pi?)
+	// set this to false
+	NETDATA.options.current.parallel_refresher = true;
+
+	// always update the charts, even if focus is lost
+	// NETDATA.options.current.stop_updates_when_focus_is_lost = false;
+
+	// Since you may render charts from many servers and any of them may
+	// become offline for some time, the charts will break.
+	// This will reload the page every RELOAD_EVERY minutes
+
+	var RELOAD_EVERY = 5;
+	setTimeout(function(){
+		location.reload();
+	}, RELOAD_EVERY * 60 * 1000);
+
+	</script>
+
+</head>
+<body>
+
+<div style="width: 100%; text-align: center; display: inline-block;">
+
+	<div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
+		<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
+			<b>CPU On both servers</b>
+		</div>
+		<div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
+			<br/>
+			<div data-netdata="system.cpu"
+					data-host="http://netdata.firehol.org"
+					data-title="CPU usage of netdata.firehol.org"
+					data-chart-library="dygraph"
+					data-width="49%"
+					data-height="100%"
+					data-after="-300"
+					></div>
+			<div data-netdata="system.cpu"
+					data-title="CPU usage of your netdata server"
+					data-chart-library="dygraph"
+					data-width="49%"
+					data-height="100%"
+					data-after="-300"
+					></div>
+		</div>
+	</div>
+
+
+	<div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
+		<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
+			<b>Disk I/O on both servers</b>
+		</div>
+		<div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
+			<div data-netdata="system.io"
+					data-host="http://netdata.firehol.org"
+					data-title="I/O on netdata.firehol.org"
+					data-chart-library="dygraph"
+					data-width="49%"
+					data-height="100%"
+					data-after="-300"
+					></div>
+			<div data-netdata="system.io"
+					data-title="I/O on your netdata server"
+					data-chart-library="dygraph"
+					data-width="49%"
+					data-height="100%"
+					data-after="-300"
+					></div>
+		</div>
+	</div>
+
+
+	<div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
+		<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
+			<b>IPv4 traffic on both servers</b>
+		</div>
+		<div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
+			<div data-netdata="system.ipv4"
+					data-host="http://netdata.firehol.org"
+					data-title="IPv4 traffic on netdata.firehol.org"
+					data-chart-library="dygraph"
+					data-width="49%"
+					data-height="100%"
+					data-after="-300"
+					></div>
+			<div data-netdata="system.ipv4"
+					data-title="IPv4 traffic on your netdata server"
+					data-chart-library="dygraph"
+					data-width="49%"
+					data-height="100%"
+					data-after="-300"
+					></div>
+		</div>
+	</div>
+
+	<div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
+		<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
+			<b>Netdata statistics on both servers</b>
+		</div>
+		<div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">
+			<div style="width: 49%; height:100%; align: center; display: inline-block;">
+				netdata.firehol.org
+				<br/>
+				<div data-netdata="netdata.requests"
+						data-host="http://netdata.firehol.org"
+						data-title="Chart Refreshes/s"
+						data-chart-library="gauge"
+						data-width="20%"
+						data-height="100%"
+						data-after="-300"
+						data-points="300"
+						></div>
+				<div data-netdata="netdata.clients"
+						data-host="http://netdata.firehol.org"
+						data-title="Sockets"
+						data-chart-library="gauge"
+						data-width="20%"
+						data-height="100%"
+						data-after="-300"
+						data-points="300"
+						data-colors="#AA5500"
+						></div>
+				<div data-netdata="netdata.net"
+						data-dimensions="in"
+						data-host="http://netdata.firehol.org"
+						data-title="Requests Traffic"
+						data-chart-library="easypiechart"
+						data-width="15%"
+						data-height="100%"
+						data-after="-300"
+						data-points="300"
+						></div>
+				<div data-netdata="netdata.net"
+						data-dimensions="out"
+						data-host="http://netdata.firehol.org"
+						data-title="Chart Data Traffic"
+						data-chart-library="easypiechart"
+						data-width="15%"
+						data-height="100%"
+						data-after="-300"
+						data-points="300"
+						></div>
+			</div>
+			<div style="width: 49%; height:100%; align: center; display: inline-block;">
+				your netdata server
+				<br/>
+				<div data-netdata="netdata.requests"
+						data-title="Chart Refreshes/s"
+						data-chart-library="gauge"
+						data-width="20%"
+						data-height="100%"
+						data-after="-300"
+						data-points="300"
+						></div>
+				<div data-netdata="netdata.clients"
+						data-title="Sockets"
+						data-chart-library="gauge"
+						data-width="20%"
+						data-height="100%"
+						data-after="-300"
+						data-points="300"
+						data-colors="#AA5500"
+						></div>
+				<div data-netdata="netdata.net"
+						data-dimensions="in"
+						data-title="Requests Traffic"
+						data-chart-library="easypiechart"
+						data-width="15%"
+						data-height="100%"
+						data-after="-300"
+						data-points="300"
+						></div>
+				<div data-netdata="netdata.net"
+						data-dimensions="out"
+						data-title="Chart Data Traffic"
+						data-chart-library="easypiechart"
+						data-width="15%"
+						data-height="100%"
+						data-after="-300"
+						data-points="300"
+						></div>
+			</div>
+		</div>
+	</div>
+</div>
+</body>
+</html>
diff --git a/web/version.txt b/web/version.txt
index 9aef34725..afce0e539 100644
--- a/web/version.txt
+++ b/web/version.txt
@@ -1 +1 @@
-39c196708756fc8f85bfc70c931836479be3b9c2
+bb4aa949f5ac825253d8adc6070661299abc1c3b
-- 
cgit v1.2.3