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://cloud.githubusercontent.com/assets/2662304/22945737/e98cd0c6-f2fd-11e6-96f1-5501934b0955.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?v20170105-7"></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                     data-dygraph-valuerange="[0, 100]"
 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                     data-dygraph-valuerange="[0, 100]"
 111                     ></div>
 112         </div>
 113     </div>
 114
 115
 116     <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
 117         <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
 118             <b>Disk I/O on both servers</b>
 119         </div>
 120         <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
 121             <div data-netdata="system.io"
 122                     data-host="http://registry.my-netdata.io"
 123                     data-common-max="io"
 124                     data-common-min="io"
 125                     data-title="I/O on registry.my-netdata.io"
 126                     data-chart-library="dygraph"
 127                     data-width="49%"
 128                     data-height="100%"
 129                     data-after="-300"
 130                     ></div>
 131             <div data-netdata="system.io"
 132                     data-title="I/O on your netdata server"
 133                     data-common-max="io"
 134                     data-common-min="io"
 135                     data-chart-library="dygraph"
 136                     data-width="49%"
 137                     data-height="100%"
 138                     data-after="-300"
 139                     ></div>
 140         </div>
 141     </div>
 142
 143
 144     <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
 145         <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
 146             <b>IPv4 traffic on both servers</b>
 147         </div>
 148         <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
 149             <div data-netdata="system.ipv4"
 150                     data-host="http://registry.my-netdata.io"
 151                     data-common-max="traffic"
 152                     data-common-min="traffic"
 153                     data-title="IPv4 traffic on registry.my-netdata.io"
 154                     data-chart-library="dygraph"
 155                     data-width="49%"
 156                     data-height="100%"
 157                     data-after="-300"
 158                     ></div>
 159             <div data-netdata="system.ipv4"
 160                     data-title="IPv4 traffic on your netdata server"
 161                     data-common-max="traffic"
 162                     data-common-min="traffic"
 163                     data-chart-library="dygraph"
 164                     data-width="49%"
 165                     data-height="100%"
 166                     data-after="-300"
 167                     ></div>
 168         </div>
 169     </div>
 170
 171     <div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
 172         <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
 173             <b>Netdata statistics on both servers</b>
 174         </div>
 175         <div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">
 176             <div style="width: 49%; height:100%; align: center; display: inline-block;">
 177                 registry.my-netdata.io
 178                 <br/>
 179                 <div data-netdata="netdata.requests"
 180                         data-host="http://registry.my-netdata.io"
 181                         data-common-max="netdata-requests"
 182                         data-decimal-digits="0"
 183                         data-title="Chart Refreshes/s"
 184                         data-chart-library="gauge"
 185                         data-width="20%"
 186                         data-height="100%"
 187                         data-after="-300"
 188                         data-points="300"
 189                         ></div>
 190                 <div data-netdata="netdata.clients"
 191                         data-host="http://registry.my-netdata.io"
 192                         data-common-max="netdata-clients"
 193                         data-decimal-digits="0"
 194                         data-title="Sockets"
 195                         data-chart-library="gauge"
 196                         data-width="20%"
 197                         data-height="100%"
 198                         data-after="-300"
 199                         data-points="300"
 200                         data-colors="#AA5500"
 201                         ></div>
 202                 <div data-netdata="netdata.net"
 203                         data-dimensions="in"
 204                         data-common-max="netdata-net-in"
 205                         data-decimal-digits="0"
 206                         data-host="http://registry.my-netdata.io"
 207                         data-title="Requests Traffic"
 208                         data-chart-library="easypiechart"
 209                         data-width="15%"
 210                         data-height="100%"
 211                         data-after="-300"
 212                         data-points="300"
 213                         ></div>
 214                 <div data-netdata="netdata.net"
 215                         data-dimensions="out"
 216                         data-common-max="netdata-net-out"
 217                         data-decimal-digits="0"
 218                         data-host="http://registry.my-netdata.io"
 219                         data-title="Chart Data Traffic"
 220                         data-chart-library="easypiechart"
 221                         data-width="15%"
 222                         data-height="100%"
 223                         data-after="-300"
 224                         data-points="300"
 225                         ></div>
 226             </div>
 227             <div style="width: 49%; height:100%; align: center; display: inline-block;">
 228                 your netdata server
 229                 <br/>
 230                 <div data-netdata="netdata.requests"
 231                         data-title="Chart Refreshes/s"
 232                         data-common-max="netdata-requests"
 233                         data-decimal-digits="0"
 234                         data-chart-library="gauge"
 235                         data-width="20%"
 236                         data-height="100%"
 237                         data-after="-300"
 238                         data-points="300"
 239                         ></div>
 240                 <div data-netdata="netdata.clients"
 241                         data-common-max="netdata-clients"
 242                         data-decimal-digits="0"
 243                         data-title="Sockets"
 244                         data-chart-library="gauge"
 245                         data-width="20%"
 246                         data-height="100%"
 247                         data-after="-300"
 248                         data-points="300"
 249                         data-colors="#AA5500"
 250                         ></div>
 251                 <div data-netdata="netdata.net"
 252                         data-dimensions="in"
 253                         data-common-max="netdata-net-in"
 254                         data-decimal-digits="0"
 255                         data-title="Requests Traffic"
 256                         data-chart-library="easypiechart"
 257                         data-width="15%"
 258                         data-height="100%"
 259                         data-after="-300"
 260                         data-points="300"
 261                         ></div>
 262                 <div data-netdata="netdata.net"
 263                         data-dimensions="out"
 264                         data-common-max="netdata-net-out"
 265                         data-decimal-digits="0"
 266                         data-title="Chart Data Traffic"
 267                         data-chart-library="easypiechart"
 268                         data-width="15%"
 269                         data-height="100%"
 270                         data-after="-300"
 271                         data-points="300"
 272                         ></div>
 273             </div>
 274         </div>
 275     </div>
 276 </div>
 277 </body>
 278 </html>