summaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/Makefile.am7
-rw-r--r--web/Makefile.in12
-rw-r--r--web/dashboard.css20
-rw-r--r--web/dashboard.html2
-rw-r--r--web/dashboard.js378
-rw-r--r--web/dashboard.slate.css20
-rw-r--r--web/demo.html84
-rw-r--r--web/demo2.html268
-rw-r--r--web/demosites.html721
-rw-r--r--web/index.html376
-rw-r--r--web/tv.html483
-rw-r--r--web/version.txt2
12 files changed, 1853 insertions, 520 deletions
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
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-01 20:33:43 +0000