]> arthur.barton.de Git - netdata.git/blobdiff - web/tv.html
fixes for TAB to spaces replacement
[netdata.git] / web / tv.html
index 8d9d71e1b35146aa4d2ec25be1e738716bc3386e..6642bf30a97b9026fd96ce9250a5d00bf22ec4bb 100644 (file)
 <!DOCTYPE html>
 <html lang="en">
 <head>
-       <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?v39"></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?v39"></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>