web/demosites.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <title>NetData Demo Sites 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         <div style="width: 100%; height: 16vh; text-align: center; display: inline-block;">
  82                 <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
  83                         <b>CPU On both servers</b>
  84                 </div>
  85                 <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
  86                         <br/>
  87                         <div data-netdata="system.cpu"
  88                                         data-host="//netdata.firehol.org"
  89                                         data-title="CPU usage of EU Server"
  90                                         data-chart-library="dygraph"
  91                                         data-width="49%"
  92                                         data-height="100%"
  93                                         data-after="-300"
  94                                         ></div>
  95                         <div data-netdata="system.cpu"
  96                                         data-host="//netdata2.firehol.org"
  97                                         data-title="CPU usage of US Server"
  98                                         data-chart-library="dygraph"
  99                                         data-width="49%"
 100                                         data-height="100%"
 101                                         data-after="-300"
 102                                         ></div>
 103                 </div>
 104         </div>
 105
 106
 107         <div style="width: 100%; height: 16vh; text-align: center; display: inline-block;">
 108                 <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
 109                         <b>Disk I/O on both servers</b>
 110                 </div>
 111                 <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
 112                         <div data-netdata="tc.world_in"
 113                                         data-host="//netdata.firehol.org"
 114                                         data-title="I/O on EU Server"
 115                                         data-chart-library="dygraph"
 116                                         data-width="49%"
 117                                         data-height="100%"
 118                                         data-after="-300"
 119                                         ></div>
 120                         <div data-netdata="tc.world_in"
 121                                         data-host="//netdata2.firehol.org"
 122                                         data-title="I/O on US Server"
 123                                         data-chart-library="dygraph"
 124                                         data-width="49%"
 125                                         data-height="100%"
 126                                         data-after="-300"
 127                                         ></div>
 128                 </div>
 129         </div>
 130
 131         <div style="width: 100%; height: 16vh; text-align: center; display: inline-block;">
 132                 <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
 133                         <div data-netdata="tc.world_out"
 134                                         data-host="//netdata.firehol.org"
 135                                         data-title="I/O on EU Server"
 136                                         data-chart-library="dygraph"
 137                                         data-width="49%"
 138                                         data-height="100%"
 139                                         data-after="-300"
 140                                         ></div>
 141                         <div data-netdata="tc.world_out"
 142                                         data-host="//netdata2.firehol.org"
 143                                         data-title="I/O on US Server"
 144                                         data-chart-library="dygraph"
 145                                         data-width="49%"
 146                                         data-height="100%"
 147                                         data-after="-300"
 148                                         ></div>
 149                 </div>
 150         </div>
 151
 152         <div style="width: 100%; height: 12vh; text-align: center; display: inline-block;">
 153                 <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
 154                         <b>NGINX performance on both servers</b>
 155                 </div>
 156                 <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
 157                         <div data-netdata="nginx.connections"
 158                                         data-host="//netdata.firehol.org"
 159                                         data-title="NGINX Connections on EU Server"
 160                                         data-chart-library="dygraph"
 161                                         data-width="49%"
 162                                         data-height="100%"
 163                                         data-after="-300"
 164                                         ></div>
 165                         <div data-netdata="nginx.connections"
 166                                         data-host="//netdata2.firehol.org"
 167                                         data-title="NGINX Connections on US Server"
 168                                         data-chart-library="dygraph"
 169                                         data-width="49%"
 170                                         data-height="100%"
 171                                         data-after="-300"
 172                                         ></div>
 173                 </div>
 174         </div>
 175
 176         <div style="width: 100%; height: 12vh; text-align: center; display: inline-block;">
 177                 <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
 178                         <div data-netdata="nginx.requests"
 179                                         data-host="//netdata.firehol.org"
 180                                         data-title="NGINX Requests on EU Server"
 181                                         data-chart-library="dygraph"
 182                                         data-width="49%"
 183                                         data-height="100%"
 184                                         data-after="-300"
 185                                         data-colors="#5555FF"
 186                                         ></div>
 187                         <div data-netdata="nginx.requests"
 188                                         data-host="//netdata2.firehol.org"
 189                                         data-title="NGINX Requests on US Server"
 190                                         data-chart-library="dygraph"
 191                                         data-width="49%"
 192                                         data-height="100%"
 193                                         data-after="-300"
 194                                         data-colors="#5555FF"
 195                                         ></div>
 196                 </div>
 197         </div>
 198
 199         <div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
 200                 <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
 201                         <b>Netdata statistics on both servers</b>
 202                 </div>
 203                 <div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">
 204                         <div style="width: 49%; height:100%; align: center; display: inline-block;">
 205                                 EU Server
 206                                 <br/>
 207                                 <div data-netdata="netdata.net"
 208                                                 data-dimensions="out"
 209                                                 data-host="//netdata.firehol.org"
 210                                                 data-title="Chart Data Traffic"
 211                                                 data-chart-library="easypiechart"
 212                                                 data-width="16%"
 213                                                 data-height="100%"
 214                                                 data-after="-300"
 215                                                 data-points="300"
 216                                                 ></div>
 217                                 <div data-netdata="netdata.net"
 218                                                 data-dimensions="in"
 219                                                 data-host="//netdata.firehol.org"
 220                                                 data-title="Requests Traffic"
 221                                                 data-chart-library="easypiechart"
 222                                                 data-width="16%"
 223                                                 data-height="100%"
 224                                                 data-after="-300"
 225                                                 data-points="300"
 226                                                 ></div>
 227                                 <div data-netdata="netdata.clients"
 228                                                 data-host="//netdata.firehol.org"
 229                                                 data-title="Sockets"
 230                                                 data-chart-library="gauge"
 231                                                 data-width="22%"
 232                                                 data-height="100%"
 233                                                 data-after="-300"
 234                                                 data-points="300"
 235                                                 data-colors="#AA5500"
 236                                                 ></div>
 237                                 <div data-netdata="netdata.requests"
 238                                                 data-host="//netdata.firehol.org"
 239                                                 data-title="Chart Refreshes/s"
 240                                                 data-chart-library="gauge"
 241                                                 data-width="22%"
 242                                                 data-height="100%"
 243                                                 data-after="-300"
 244                                                 data-points="300"
 245                                                 ></div>
 246                         </div>
 247                         <div style="width: 49%; height:100%; align: center; display: inline-block;">
 248                                 US Server
 249                                 <br/>
 250                                 <div data-netdata="netdata.requests"
 251                                                 data-host="//netdata2.firehol.org"
 252                                                 data-title="Chart Refreshes/s"
 253                                                 data-chart-library="gauge"
 254                                                 data-width="22%"
 255                                                 data-height="100%"
 256                                                 data-after="-300"
 257                                                 data-points="300"
 258                                                 ></div>
 259                                 <div data-netdata="netdata.clients"
 260                                                 data-host="//netdata2.firehol.org"
 261                                                 data-title="Sockets"
 262                                                 data-chart-library="gauge"
 263                                                 data-width="22%"
 264                                                 data-height="100%"
 265                                                 data-after="-300"
 266                                                 data-points="300"
 267                                                 data-colors="#AA5500"
 268                                                 ></div>
 269                                 <div data-netdata="netdata.net"
 270                                                 data-dimensions="in"
 271                                                 data-host="//netdata2.firehol.org"
 272                                                 data-title="Requests Traffic"
 273                                                 data-chart-library="easypiechart"
 274                                                 data-width="16%"
 275                                                 data-height="100%"
 276                                                 data-after="-300"
 277                                                 data-points="300"
 278                                                 ></div>
 279                                 <div data-netdata="netdata.net"
 280                                                 data-dimensions="out"
 281                                                 data-host="//netdata2.firehol.org"
 282                                                 data-title="Chart Data Traffic"
 283                                                 data-chart-library="easypiechart"
 284                                                 data-width="16%"
 285                                                 data-height="100%"
 286                                                 data-after="-300"
 287                                                 data-points="300"
 288                                                 ></div>
 289                         </div>
 290                 </div>
 291         </div>
 292 </div>
 293 </body>
 294 </html>