web/tv.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4     <title>NetData TV Dashboard</title>
   5     <meta name="application-name" content="netdata">
   6
   7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   8     <meta charset="utf-8">
   9     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10     <meta name="viewport" content="width=device-width, initial-scale=1">
  11     <meta name="apple-mobile-web-app-capable" content="yes">
  12     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  13
  14     <meta property="og:locale" content="en_US" />
  15     <meta property="og:image" content="https://my-netdata.io/images/seo-performance-512.png"/>
  16     <meta property="og:url" content="http://my-netdata.io/"/>
  17     <meta property="og:type" content="website"/>
  18     <meta property="og:site_name" content="netdata"/>
  19     <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
  20     <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
  21
  22     <script>
  23     // this section has to appear before loading dashboard.js
  24
  25     // Select a theme.
  26     // uncomment on of the two themes:
  27
  28     // var netdataTheme = 'default'; // this is white
  29     var netdataTheme = 'slate'; // this is dark
  30
  31
  32     // Set the default netdata server.
  33     // on charts without a 'data-host', this one will be used.
  34     // the default is the server that dashboard.js is downloaded from.
  35
  36     // var netdataServer = 'http://my.server:19999/';
  37     </script>
  38
  39     <!--
  40         Load dashboard.js
  41
  42         to host this HTML file on your web server,
  43         you have to load dashboard.js from the netdata server.
  44
  45         So, pick one the two below
  46         If you pick the first, set the server name/IP.
  47
  48         The second assumes you host this file on /usr/share/netdata/web
  49         and that you have chown it to be owned by netdata:netdata
  50     -->
  51     <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
  52     <script type="text/javascript" src="dashboard.js?v46"></script>
  53
  54     <script>
  55     // Set options for TV operation
  56     // This has to be done, after dashboard.js is loaded
  57
  58     // destroy charts not shown (lowers memory on the browser)
  59     NETDATA.options.current.destroy_on_hide = true;
  60
  61     // set this to false, to always show all dimensions
  62     NETDATA.options.current.eliminate_zero_dimensions = true;
  63
  64     // lower the pressure on this browser
  65     NETDATA.options.current.concurrent_refreshes = false;
  66
  67     // if the tv browser is too slow (a pi?)
  68     // set this to false
  69     NETDATA.options.current.parallel_refresher = true;
  70
  71     // always update the charts, even if focus is lost
  72     // NETDATA.options.current.stop_updates_when_focus_is_lost = false;
  73
  74     // Since you may render charts from many servers and any of them may
  75     // become offline for some time, the charts will break.
  76     // This will reload the page every RELOAD_EVERY minutes
  77
  78     var RELOAD_EVERY = 5;
  79     setTimeout(function(){
  80         location.reload();
  81     }, RELOAD_EVERY * 60 * 1000);
  82
  83     </script>
  84
  85 </head>
  86 <body>
  87
  88 <div style="width: 100%; text-align: center; display: inline-block;">
  89
  90     <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
  91         <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
  92             <b>CPU On both servers</b>
  93         </div>
  94         <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
  95             <br/>
  96             <div data-netdata="system.cpu"
  97                     data-host="http://netdata.firehol.org"
  98                     data-title="CPU usage of netdata.firehol.org"
  99                     data-chart-library="dygraph"
 100                     data-width="49%"
 101                     data-height="100%"
 102                     data-after="-300"
 103                     ></div>
 104             <div data-netdata="system.cpu"
 105                     data-title="CPU usage of your netdata server"
 106                     data-chart-library="dygraph"
 107                     data-width="49%"
 108                     data-height="100%"
 109                     data-after="-300"
 110                     ></div>
 111         </div>
 112     </div>
 113
 114
 115     <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
 116         <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
 117             <b>Disk I/O on both servers</b>
 118         </div>
 119         <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
 120             <div data-netdata="system.io"
 121                     data-host="http://netdata.firehol.org"
 122                     data-title="I/O on netdata.firehol.org"
 123                     data-chart-library="dygraph"
 124                     data-width="49%"
 125                     data-height="100%"
 126                     data-after="-300"
 127                     ></div>
 128             <div data-netdata="system.io"
 129                     data-title="I/O on your netdata server"
 130                     data-chart-library="dygraph"
 131                     data-width="49%"
 132                     data-height="100%"
 133                     data-after="-300"
 134                     ></div>
 135         </div>
 136     </div>
 137
 138
 139     <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
 140         <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
 141             <b>IPv4 traffic on both servers</b>
 142         </div>
 143         <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
 144             <div data-netdata="system.ipv4"
 145                     data-host="http://netdata.firehol.org"
 146                     data-title="IPv4 traffic on netdata.firehol.org"
 147                     data-chart-library="dygraph"
 148                     data-width="49%"
 149                     data-height="100%"
 150                     data-after="-300"
 151                     ></div>
 152             <div data-netdata="system.ipv4"
 153                     data-title="IPv4 traffic on your netdata server"
 154                     data-chart-library="dygraph"
 155                     data-width="49%"
 156                     data-height="100%"
 157                     data-after="-300"
 158                     ></div>
 159         </div>
 160     </div>
 161
 162     <div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
 163         <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
 164             <b>Netdata statistics on both servers</b>
 165         </div>
 166         <div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">
 167             <div style="width: 49%; height:100%; align: center; display: inline-block;">
 168                 netdata.firehol.org
 169                 <br/>
 170                 <div data-netdata="netdata.requests"
 171                         data-host="http://netdata.firehol.org"
 172                         data-title="Chart Refreshes/s"
 173                         data-chart-library="gauge"
 174                         data-width="20%"
 175                         data-height="100%"
 176                         data-after="-300"
 177                         data-points="300"
 178                         ></div>
 179                 <div data-netdata="netdata.clients"
 180                         data-host="http://netdata.firehol.org"
 181                         data-title="Sockets"
 182                         data-chart-library="gauge"
 183                         data-width="20%"
 184                         data-height="100%"
 185                         data-after="-300"
 186                         data-points="300"
 187                         data-colors="#AA5500"
 188                         ></div>
 189                 <div data-netdata="netdata.net"
 190                         data-dimensions="in"
 191                         data-host="http://netdata.firehol.org"
 192                         data-title="Requests Traffic"
 193                         data-chart-library="easypiechart"
 194                         data-width="15%"
 195                         data-height="100%"
 196                         data-after="-300"
 197                         data-points="300"
 198                         ></div>
 199                 <div data-netdata="netdata.net"
 200                         data-dimensions="out"
 201                         data-host="http://netdata.firehol.org"
 202                         data-title="Chart Data Traffic"
 203                         data-chart-library="easypiechart"
 204                         data-width="15%"
 205                         data-height="100%"
 206                         data-after="-300"
 207                         data-points="300"
 208                         ></div>
 209             </div>
 210             <div style="width: 49%; height:100%; align: center; display: inline-block;">
 211                 your netdata server
 212                 <br/>
 213                 <div data-netdata="netdata.requests"
 214                         data-title="Chart Refreshes/s"
 215                         data-chart-library="gauge"
 216                         data-width="20%"
 217                         data-height="100%"
 218                         data-after="-300"
 219                         data-points="300"
 220                         ></div>
 221                 <div data-netdata="netdata.clients"
 222                         data-title="Sockets"
 223                         data-chart-library="gauge"
 224                         data-width="20%"
 225                         data-height="100%"
 226                         data-after="-300"
 227                         data-points="300"
 228                         data-colors="#AA5500"
 229                         ></div>
 230                 <div data-netdata="netdata.net"
 231                         data-dimensions="in"
 232                         data-title="Requests Traffic"
 233                         data-chart-library="easypiechart"
 234                         data-width="15%"
 235                         data-height="100%"
 236                         data-after="-300"
 237                         data-points="300"
 238                         ></div>
 239                 <div data-netdata="netdata.net"
 240                         data-dimensions="out"
 241                         data-title="Chart Data Traffic"
 242                         data-chart-library="easypiechart"
 243                         data-width="15%"
 244                         data-height="100%"
 245                         data-after="-300"
 246                         data-points="300"
 247                         ></div>
 248             </div>
 249         </div>
 250     </div>
 251 </div>
 252 </body>
 253 </html>