]> arthur.barton.de Git - netdata.git/commitdiff
new demo dashboard to monitor the demo sites; updated tv.html to support slow browsers
authorCosta Tsaousis (ktsaou) <costa@tsaousis.gr>
Sat, 23 Apr 2016 00:20:59 +0000 (03:20 +0300)
committerCosta Tsaousis (ktsaou) <costa@tsaousis.gr>
Sat, 23 Apr 2016 00:20:59 +0000 (03:20 +0300)
web/Makefile.am
web/demosites.html [new file with mode: 0644]
web/tv.html

index 1b6b918be97052567cdec7501ce86a6c602ba512..174ef229bcec8a2a8c0ac22a7a83e629b75cadb3 100644 (file)
@@ -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/demosites.html b/web/demosites.html
new file mode 100644 (file)
index 0000000..210aa1a
--- /dev/null
@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+       <title>NetData Demo Sites 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;
+       
+       // 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: 16vh; 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="//netdata.firehol.org"
+                                       data-title="CPU usage of EU Server"
+                                       data-chart-library="dygraph"
+                                       data-width="49%"
+                                       data-height="100%"
+                                       data-after="-300"
+                                       ></div>
+                       <div data-netdata="system.cpu"
+                                       data-host="//netdata2.firehol.org"
+                                       data-title="CPU usage of US Server"
+                                       data-chart-library="dygraph"
+                                       data-width="49%"
+                                       data-height="100%"
+                                       data-after="-300"
+                                       ></div>
+               </div>
+       </div>
+
+
+       <div style="width: 100%; height: 16vh; 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="tc.world_in"
+                                       data-host="//netdata.firehol.org"
+                                       data-title="I/O on EU Server"
+                                       data-chart-library="dygraph"
+                                       data-width="49%"
+                                       data-height="100%"
+                                       data-after="-300"
+                                       ></div>
+                       <div data-netdata="tc.world_in"
+                                       data-host="//netdata2.firehol.org"
+                                       data-title="I/O on US Server"
+                                       data-chart-library="dygraph"
+                                       data-width="49%"
+                                       data-height="100%"
+                                       data-after="-300"
+                                       ></div>
+               </div>
+       </div>
+
+       <div style="width: 100%; height: 16vh; text-align: center; display: inline-block;">
+               <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
+                       <div data-netdata="tc.world_out"
+                                       data-host="//netdata.firehol.org"
+                                       data-title="I/O on EU Server"
+                                       data-chart-library="dygraph"
+                                       data-width="49%"
+                                       data-height="100%"
+                                       data-after="-300"
+                                       ></div>
+                       <div data-netdata="tc.world_out"
+                                       data-host="//netdata2.firehol.org"
+                                       data-title="I/O on US Server"
+                                       data-chart-library="dygraph"
+                                       data-width="49%"
+                                       data-height="100%"
+                                       data-after="-300"
+                                       ></div>
+               </div>
+       </div>
+
+       <div style="width: 100%; height: 12vh; text-align: center; display: inline-block;">
+               <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
+                       <b>NGINX performance on both servers</b>
+               </div>
+               <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
+                       <div data-netdata="nginx.connections"
+                                       data-host="//netdata.firehol.org"
+                                       data-title="NGINX Connections on EU Server"
+                                       data-chart-library="dygraph"
+                                       data-width="49%"
+                                       data-height="100%"
+                                       data-after="-300"
+                                       ></div>
+                       <div data-netdata="nginx.connections"
+                                       data-host="//netdata2.firehol.org"
+                                       data-title="NGINX Connections on US Server"
+                                       data-chart-library="dygraph"
+                                       data-width="49%"
+                                       data-height="100%"
+                                       data-after="-300"
+                                       ></div>
+               </div>
+       </div>
+
+       <div style="width: 100%; height: 12vh; text-align: center; display: inline-block;">
+               <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
+                       <div data-netdata="nginx.requests"
+                                       data-host="//netdata.firehol.org"
+                                       data-title="NGINX Requests on EU Server"
+                                       data-chart-library="dygraph"
+                                       data-width="49%"
+                                       data-height="100%"
+                                       data-after="-300"
+                                       data-colors="#5555FF"
+                                       ></div>
+                       <div data-netdata="nginx.requests"
+                                       data-host="//netdata2.firehol.org"
+                                       data-title="NGINX Requests on US Server"
+                                       data-chart-library="dygraph"
+                                       data-width="49%"
+                                       data-height="100%"
+                                       data-after="-300"
+                                       data-colors="#5555FF"
+                                       ></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;">
+                               EU Server
+                               <br/>
+                               <div data-netdata="netdata.net"
+                                               data-dimensions="out"
+                                               data-host="//netdata.firehol.org"
+                                               data-title="Chart Data Traffic"
+                                               data-chart-library="easypiechart"
+                                               data-width="16%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-points="300"
+                                               ></div>
+                               <div data-netdata="netdata.net"
+                                               data-dimensions="in"
+                                               data-host="//netdata.firehol.org"
+                                               data-title="Requests Traffic"
+                                               data-chart-library="easypiechart"
+                                               data-width="16%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-points="300"
+                                               ></div>
+                               <div data-netdata="netdata.clients"
+                                               data-host="//netdata.firehol.org"
+                                               data-title="Sockets"
+                                               data-chart-library="gauge"
+                                               data-width="22%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-points="300"
+                                               data-colors="#AA5500"
+                                               ></div>
+                               <div data-netdata="netdata.requests"
+                                               data-host="//netdata.firehol.org"
+                                               data-title="Chart Refreshes/s"
+                                               data-chart-library="gauge"
+                                               data-width="22%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-points="300"
+                                               ></div>
+                       </div>
+                       <div style="width: 49%; height:100%; align: center; display: inline-block;">
+                               US Server
+                               <br/>
+                               <div data-netdata="netdata.requests"
+                                               data-host="//netdata2.firehol.org"
+                                               data-title="Chart Refreshes/s"
+                                               data-chart-library="gauge"
+                                               data-width="22%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-points="300"
+                                               ></div>
+                               <div data-netdata="netdata.clients"
+                                               data-host="//netdata2.firehol.org"
+                                               data-title="Sockets"
+                                               data-chart-library="gauge"
+                                               data-width="22%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-points="300"
+                                               data-colors="#AA5500"
+                                               ></div>
+                               <div data-netdata="netdata.net"
+                                               data-dimensions="in"
+                                               data-host="//netdata2.firehol.org"
+                                               data-title="Requests Traffic"
+                                               data-chart-library="easypiechart"
+                                               data-width="16%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-points="300"
+                                               ></div>
+                               <div data-netdata="netdata.net"
+                                               data-dimensions="out"
+                                               data-host="//netdata2.firehol.org"
+                                               data-title="Chart Data Traffic"
+                                               data-chart-library="easypiechart"
+                                               data-width="16%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-points="300"
+                                               ></div>
+                       </div>
+               </div>
+       </div>
+</div>
+</body>
+</html>
index 2003a60607a7baa4c724e9904d417a14ca08ad87..ea25b9ee5a4216d8e6e775898dc355c7438863ec 100644 (file)
-<!DOCTYPE html>\r
-<html lang="en">\r
-<head>\r
-       <title>NetData TV Dashboard</title>\r
-\r
-       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
-       <meta charset="utf-8">\r
-       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\r
-       <meta name="viewport" content="width=device-width, initial-scale=1">\r
-       <meta name="apple-mobile-web-app-capable" content="yes">\r
-       <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">\r
-\r
-       <script>\r
-       // this section has to appear before loading dashboard.js\r
-\r
-       // Select a theme.\r
-       // uncomment on of the two themes:\r
-\r
-       // var netdataTheme = 'default'; // this is white\r
-       var netdataTheme = 'slate'; // this is dark\r
-\r
-\r
-       // Set the default netdata server.\r
-       // on charts without a 'data-host', this one will be used.\r
-       // the default is the server that dashboard.js is downloaded from.\r
-\r
-       // var netdataServer = 'http://my.server:19999/';\r
-       </script>\r
-\r
-       <!--\r
-               Load dashboard.js\r
-\r
-               to host this HTML file on your web server,\r
-               you have to load dashboard.js from the netdata server.\r
-\r
-               So, pick one the two below\r
-               If you pick the first, set the server name/IP.\r
-\r
-               The second assumes you host this file on /usr/share/netdata/web\r
-               and that you have chown it to be owned by netdata:netdata\r
-       -->\r
-       <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->\r
-       <script type="text/javascript" src="dashboard.js"></script>\r
-\r
-       <script>\r
-       // Set options for TV operation\r
-       // This has to be done, after dashboard.js is loaded\r
-\r
-       // destroy charts not shown (lowers memory on the browser)\r
-       NETDATA.options.current.destroy_on_hide = true;\r
-       \r
-       // set this to false, to always show all dimensions\r
-       NETDATA.options.current.eliminate_zero_dimensions = true;\r
-       \r
-       // always update the charts, even if focus is lost\r
-       NETDATA.options.current.stop_updates_when_focus_is_lost = false;\r
-\r
-       // Since you may render charts from many servers and any of them may\r
-       // become offline for some time, the charts will break.\r
-       // This will reload the page every RELOAD_EVERY minutes\r
-       var RELOAD_EVERY = 5;\r
-       setTimeout(function(){\r
-               location.reload();\r
-       }, RELOAD_EVERY * 60 * 1000);\r
-\r
-       </script>\r
-\r
-</head>\r
-<body>\r
-\r
-<div style="width: 100%; text-align: center; display: inline-block;">\r
-\r
-       <b>PLEASE RESPECT OUR DEMO SITE RESOURCES - DON'T PUT THIS AS-IS ON TV - CLOSE IT WHEN YOU DON'T NEED IT !</b>\r
-       \r
-\r
-       <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">\r
-               <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">\r
-                       <b>CPU On both servers</b>\r
-               </div>\r
-               <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">\r
-                       <br/>\r
-                       <div data-netdata="system.cpu"\r
-                                       data-host="http://netdata.firehol.org"\r
-                                       data-title="CPU usage of netdata.firehol.org"\r
-                                       data-chart-library="dygraph"\r
-                                       data-width="49%"\r
-                                       data-height="100%"\r
-                                       data-after="-300"\r
-                                       ></div>\r
-                       <div data-netdata="system.cpu"\r
-                                       data-title="CPU usage of your netdata server"\r
-                                       data-chart-library="dygraph"\r
-                                       data-width="49%"\r
-                                       data-height="100%"\r
-                                       data-after="-300"\r
-                                       ></div>\r
-               </div>\r
-       </div>\r
-\r
-\r
-       <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">\r
-               <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">\r
-                       <b>Disk I/O on both servers</b>\r
-               </div>\r
-               <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">\r
-                       <div data-netdata="system.io"\r
-                                       data-host="http://netdata.firehol.org"\r
-                                       data-title="I/O on netdata.firehol.org"\r
-                                       data-chart-library="dygraph"\r
-                                       data-width="49%"\r
-                                       data-height="100%"\r
-                                       data-after="-300"\r
-                                       ></div>\r
-                       <div data-netdata="system.io"\r
-                                       data-title="I/O on your netdata server"\r
-                                       data-chart-library="dygraph"\r
-                                       data-width="49%"\r
-                                       data-height="100%"\r
-                                       data-after="-300"\r
-                                       ></div>\r
-               </div>\r
-       </div>\r
-\r
-\r
-       <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">\r
-               <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">\r
-                       <b>IPv4 traffic on both servers</b>\r
-               </div>\r
-               <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">\r
-                       <div data-netdata="system.ipv4"\r
-                                       data-host="http://netdata.firehol.org"\r
-                                       data-title="IPv4 traffic on netdata.firehol.org"\r
-                                       data-chart-library="dygraph"\r
-                                       data-width="49%"\r
-                                       data-height="100%"\r
-                                       data-after="-300"\r
-                                       ></div>\r
-                       <div data-netdata="system.ipv4"\r
-                                       data-title="IPv4 traffic on your netdata server"\r
-                                       data-chart-library="dygraph"\r
-                                       data-width="49%"\r
-                                       data-height="100%"\r
-                                       data-after="-300"\r
-                                       ></div>\r
-               </div>\r
-       </div>\r
-\r
-       <div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">\r
-               <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">\r
-                       <b>Netdata statistics on both servers</b>\r
-               </div>\r
-               <div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">\r
-                       <div style="width: 49%; height:100%; align: center; display: inline-block;">\r
-                               netdata.firehol.org\r
-                               <br/>\r
-                               <div data-netdata="netdata.requests"\r
-                                               data-host="http://netdata.firehol.org"\r
-                                               data-title="Chart Refreshes/s"\r
-                                               data-chart-library="gauge"\r
-                                               data-width="20%"\r
-                                               data-height="100%"\r
-                                               data-after="-300"\r
-                                               data-points="300"\r
-                                               ></div>\r
-                               <div data-netdata="netdata.clients"\r
-                                               data-host="http://netdata.firehol.org"\r
-                                               data-title="Sockets"\r
-                                               data-chart-library="gauge"\r
-                                               data-width="20%"\r
-                                               data-height="100%"\r
-                                               data-after="-300"\r
-                                               data-points="300"\r
-                                               data-colors="#AA5500"\r
-                                               ></div>\r
-                               <div data-netdata="netdata.net"\r
-                                               data-dimensions="in"\r
-                                               data-host="http://netdata.firehol.org"\r
-                                               data-title="Requests Traffic"\r
-                                               data-chart-library="easypiechart"\r
-                                               data-width="15%"\r
-                                               data-height="100%"\r
-                                               data-after="-300"\r
-                                               data-points="300"\r
-                                               ></div>\r
-                               <div data-netdata="netdata.net"\r
-                                               data-dimensions="out"\r
-                                               data-host="http://netdata.firehol.org"\r
-                                               data-title="Chart Data Traffic"\r
-                                               data-chart-library="easypiechart"\r
-                                               data-width="15%"\r
-                                               data-height="100%"\r
-                                               data-after="-300"\r
-                                               data-points="300"\r
-                                               ></div>\r
-                       </div>\r
-                       <div style="width: 49%; height:100%; align: center; display: inline-block;">\r
-                               your netdata server\r
-                               <br/>\r
-                               <div data-netdata="netdata.requests"\r
-                                               data-title="Chart Refreshes/s"\r
-                                               data-chart-library="gauge"\r
-                                               data-width="20%"\r
-                                               data-height="100%"\r
-                                               data-after="-300"\r
-                                               data-points="300"\r
-                                               ></div>\r
-                               <div data-netdata="netdata.clients"\r
-                                               data-title="Sockets"\r
-                                               data-chart-library="gauge"\r
-                                               data-width="20%"\r
-                                               data-height="100%"\r
-                                               data-after="-300"\r
-                                               data-points="300"\r
-                                               data-colors="#AA5500"\r
-                                               ></div>\r
-                               <div data-netdata="netdata.net"\r
-                                               data-dimensions="in"\r
-                                               data-title="Requests Traffic"\r
-                                               data-chart-library="easypiechart"\r
-                                               data-width="15%"\r
-                                               data-height="100%"\r
-                                               data-after="-300"\r
-                                               data-points="300"\r
-                                               ></div>\r
-                               <div data-netdata="netdata.net"\r
-                                               data-dimensions="out"\r
-                                               data-title="Chart Data Traffic"\r
-                                               data-chart-library="easypiechart"\r
-                                               data-width="15%"\r
-                                               data-height="100%"\r
-                                               data-after="-300"\r
-                                               data-points="300"\r
-                                               ></div>\r
-                       </div>\r
-               </div>\r
-       </div>\r
-</div>\r
-</body>\r
-</html>\r
+<!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;
+       
+       // 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;">
+
+       <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>