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         <meta property="og:locale" content="en_US" />
  14         <meta property="og:image" content="https://my-netdata.io/images/seo-performance-512.png"/>
  15         <meta property="og:url" content="http://my-netdata.io/"/>
  16         <meta property="og:type" content="website"/>
  17         <meta property="og:site_name" content="netdata"/>
  18         <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
  19         <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
  20
  21         <script>
  22         // this section has to appear before loading dashboard.js
  23
  24         // Select a theme.
  25         // uncomment on of the two themes:
  26
  27         // var netdataTheme = 'default'; // this is white
  28         var netdataTheme = 'slate'; // this is dark
  29
  30
  31         // Set the default netdata server.
  32         // on charts without a 'data-host', this one will be used.
  33         // the default is the server that dashboard.js is downloaded from.
  34
  35         // var netdataServer = 'http://my.server:19999/';
  36         </script>
  37
  38         <!--
  39                 Load dashboard.js
  40
  41                 to host this HTML file on your web server,
  42                 you have to load dashboard.js from the netdata server.
  43
  44                 So, pick one the two below
  45                 If you pick the first, set the server name/IP.
  46
  47                 The second assumes you host this file on /usr/share/netdata/web
  48                 and that you have chown it to be owned by netdata:netdata
  49         -->
  50         <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
  51         <script type="text/javascript" src="dashboard.js?v38"></script>
  52
  53         <script>
  54         // Set options for TV operation
  55         // This has to be done, after dashboard.js is loaded
  56
  57         // destroy charts not shown (lowers memory on the browser)
  58         NETDATA.options.current.destroy_on_hide = true;
  59
  60         // set this to false, to always show all dimensions
  61         NETDATA.options.current.eliminate_zero_dimensions = true;
  62
  63         // lower the pressure on this browser
  64         NETDATA.options.current.concurrent_refreshes = false;
  65
  66         // if the tv browser is too slow (a pi?)
  67         // set this to false
  68         NETDATA.options.current.parallel_refresher = true;
  69
  70         // always update the charts, even if focus is lost
  71         // NETDATA.options.current.stop_updates_when_focus_is_lost = false;
  72
  73         // Since you may render charts from many servers and any of them may
  74         // become offline for some time, the charts will break.
  75         // This will reload the page every RELOAD_EVERY minutes
  76
  77         var RELOAD_EVERY = 5;
  78         setTimeout(function(){
  79                 location.reload();
  80         }, RELOAD_EVERY * 60 * 1000);
  81
  82         </script>
  83
  84 </head>
  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://netdata.firehol.org"
  97                                         data-title="CPU usage of netdata.firehol.org"
  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://netdata.firehol.org"
 121                                         data-title="I/O on netdata.firehol.org"
 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://netdata.firehol.org"
 145                                         data-title="IPv4 traffic on netdata.firehol.org"
 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                                 netdata.firehol.org
 168                                 <br/>
 169                                 <div data-netdata="netdata.requests"
 170                                                 data-host="http://netdata.firehol.org"
 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://netdata.firehol.org"
 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://netdata.firehol.org"
 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://netdata.firehol.org"
 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>