summaryrefslogtreecommitdiffstats
path: root/web/tv.html
diff options
context:
space:
mode:
Diffstat (limited to 'web/tv.html')
-rw-r--r--web/tv.html483
1 files changed, 244 insertions, 239 deletions
diff --git a/web/tv.html b/web/tv.html
index 2003a606..58f08eb3 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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-11 03:09:02 +0000