web/tv.html

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