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