diff options
Diffstat (limited to 'web/tv.html')
| -rw-r--r-- | web/tv.html | 473 |
1 files changed, 241 insertions, 232 deletions
diff --git a/web/tv.html b/web/tv.html index 58f08eb39..53c47a453 100644 --- a/web/tv.html +++ b/web/tv.html @@ -1,244 +1,253 @@ <!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> + <title>NetData TV Dashboard</title> + <meta name="application-name" content="netdata"> + + <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 property="og:locale" content="en_US" /> + <meta property="og:image" content="https://my-netdata.io/images/seo-performance-512.png"/> + <meta property="og:url" content="http://my-netdata.io/"/> + <meta property="og:type" content="website"/> + <meta property="og:site_name" content="netdata"/> + <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/> + <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." /> + + <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?v42"></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 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> |