--- /dev/null
+<!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
projects / netdata.git / commitdiff