web/tv.html

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