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         // --- OPTIONS FOR THE DASHBOARD --
  15
  16         // this section has to appear before loading dashboard.js
  17
  18         // Select a theme.
  19         // uncomment on of the two themes:
  20
  21         // var netdataTheme = 'default'; // this is white
  22         var netdataTheme = 'slate'; // this is dark
  23
  24
  25         // Set the default netdata server.
  26         // on charts without a 'data-host', this one will be used.
  27         // the default is the server that dashboard.js is downloaded from.
  28
  29         // var netdataServer = 'http://my.server:19999/';
  30         </script>
  31
  32         <!--
  33                 --- LOAD dashboard.js ---
  34
  35                 to host this HTML file on your web server,
  36                 you have to load dashboard.js from the netdata server.
  37
  38                 So, pick one the two below
  39                 If you pick the first, set the server name/IP.
  40
  41                 The second assumes you host this file on /usr/share/netdata/web
  42                 and that you have chown it to be owned by netdata:netdata
  43         -->
  44         <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
  45         <script type="text/javascript" src="dashboard.js"></script>
  46
  47         <script>
  48         // --- OPTIONS FOR THE CHARTS --
  49
  50         // destroy charts not shown (lowers memory on the browsers)
  51         // set this to 'yes' to destroy, 'false' to hide the charts
  52         NETDATA.options.current.destroy_on_hide = false;
  53
  54         // set this to false, to always show all dimensions
  55         NETDATA.options.current.eliminate_zero_dimensions = true;
  56
  57         // set this to false, to lower the pressure on the browser
  58         NETDATA.options.current.concurrent_refreshes = true;
  59
  60         // if you need to support slow mobile phones, set this to false
  61         NETDATA.options.current.parallel_refresher = true;
  62
  63         // set this to false, to always update the charts, even if focus is lost
  64         NETDATA.options.current.stop_updates_when_focus_is_lost = true;
  65         </script>
  66
  67         <style>
  68
  69 .mysparkline {
  70         position: relative;
  71         display: inline-block;
  72         min-height: 50px;
  73 }
  74
  75 .mysparkline-overchart-label {
  76         position: absolute;
  77         display: block;
  78         top: 0;
  79         left: 10px;
  80         bottom: 0;
  81         right: 0;
  82         font-size: 1vw;
  83         z-index: 1;
  84 }
  85
  86 .mysparkline-overchart-value {
  87         position: absolute;
  88         display: block;
  89         top: 1.1vw;
  90         left: 10px;
  91         bottom: 0;
  92         right: 0;
  93         font-size: 3vw;
  94         z-index: 2;
  95         text-shadow: #333 0px 0px 2px;
  96 }
  97
  98         </style>
  99
 100 </head>
 101 <body style="text-align: center;">
 102
 103 <div class="container">
 104
 105         <div style="text-align: center; font-size: 13vw; height: 14vw;">
 106                 <b>netdata</b>
 107         </div>
 108         <div style="text-align: center; font-size: 2vw; height: 2.5vw;">
 109                 real-time performance monitoring
 110         </div>
 111         <div style="width:80%; text-align: right; font-size: 2.7vw;">
 112                 done... <strong>real-time</strong>!
 113         </div>
 114         <div style="padding-top: 3vw; padding-bottom: 1vw; text-align: center; font-size: 2vw;">
 115                 this dashboard gets its charts, from <b>3 netdata</b> servers
 116         </div>
 117
 118         <div style="width: 100%; text-align: center; padding-top: 2vw;">
 119                 <div style="width: 100%; text-align: center;">
 120
 121                         <div style="width: 25%; display: inline-block;">
 122                                 <div data-netdata="netdata.requests"
 123                                                 data-host="//netdata1.firehol.org"
 124                                                 data-title="EU - London"
 125                                                 data-chart-library="gauge"
 126                                                 data-width="100%"
 127                                                 data-after="-300"
 128                                                 data-points="300"
 129                                                 data-colors="#558855"
 130                                                 ></div>
 131                                 <br/>&nbsp;<br/>
 132                                 <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata1.firehol.org'" style="font-size: 1.5vw;">Enter London!</button>
 133                                 <div style="font-size: 0.8vw;">
 134                                         Donated by DigitalOcean.com
 135                                 </div>
 136                         </div>
 137                         <div style="width: 25%; display: inline-block;">
 138                                 <div data-netdata="netdata.requests"
 139                                                 data-host="//netdata2.firehol.org"
 140                                                 data-title="US - Atlanta"
 141                                                 data-chart-library="gauge"
 142                                                 data-width="100%"
 143                                                 data-after="-300"
 144                                                 data-points="300"
 145                                                 data-colors="#AA5555"
 146                                                 ></div>
 147                                 <br/>&nbsp;<br/>
 148                                 <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata2.firehol.org'" style="font-size: 1.5vw;">Enter Atlanta!</button>
 149                                 <div style="font-size: 0.8vw;">
 150                                         Donated by CDN77.com
 151                                 </div>
 152                         </div>
 153                         <div style="width: 25%; display: inline-block;">
 154                                 <div data-netdata="netdata.requests"
 155                                                 data-host="//netdata3.firehol.org"
 156                                                 data-title="EU - Greece"
 157                                                 data-chart-library="gauge"
 158                                                 data-width="100%"
 159                                                 data-after="-300"
 160                                                 data-points="300"
 161                                                 data-colors="#5555AA"
 162                                                 ></div>
 163                                 <br/>&nbsp;<br/>
 164                                 <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata3.firehol.org'" style="font-size: 1.5vw;">Come to Greece!</button>
 165                                 <div style="font-size: 0.8vw;">
 166                                         &nbsp;
 167                                 </div>
 168                         </div>
 169                 </div>
 170         </div>
 171
 172         <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 2vw;">
 173                 the servers are not aware of this unified dashboard,
 174                 <br/>
 175                 each server is not aware of the other 2 servers,
 176                 <br/>
 177                 but on this dashboard they <b>behave like one</b>!
 178         </div>
 179         <div style="padding-top: 1vw; width: 100%; text-align: center; font-size: 1.5vw;">
 180                 <i class="fa fa-comment" aria-hidden="true"></i>
 181                 hover on a chart below, or drag it to show the past - <b>the others will follow</b>!
 182                 <br/>
 183                 (double click on a chart to reset them all)
 184         </div>
 185
 186         <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
 187                 <div style="padding-top: 1vw; padding-bottom: 1vw;">
 188                         Our <code>nginx</code> web servers recent requests/s:
 189                 </div>
 190
 191                 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
 192                         <div class="mysparkline-overchart-label">
 193                                 <b>EU - London</b> web requests/s
 194                         </div>
 195                         <div class="mysparkline-overchart-value" id="nginx.requests.netdata" >
 196                         </div>
 197                         <div data-netdata="nginx.requests"
 198                                         data-dimensions="requests"
 199                                         data-host="//netdata1.firehol.org"
 200                                         data-chart-library="dygraph"
 201                                         data-dygraph-theme="sparkline"
 202                                         data-dygraph-type="area"
 203                                         data-width="100%"
 204                                         data-height="100%"
 205                                         data-after="-300"
 206                                         data-colors="#558855"
 207                                         data-show-value-of-requests-at="nginx.requests.netdata"
 208                                         ></div>
 209                 </div>
 210
 211                 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
 212                         <div class="mysparkline-overchart-label">
 213                                 <b>US - Atlanta</b> web requests/s
 214                         </div>
 215                         <div class="mysparkline-overchart-value" id="nginx.requests.netdata2" >
 216                         </div>
 217                         <div data-netdata="nginx.requests"
 218                                         data-dimensions="requests"
 219                                         data-host="//netdata2.firehol.org"
 220                                         data-chart-library="dygraph"
 221                                         data-dygraph-theme="sparkline"
 222                                         data-dygraph-type="area"
 223                                         data-width="100%"
 224                                         data-height="100%"
 225                                         data-after="-300"
 226                                         data-colors="#AA5555"
 227                                         data-show-value-of-requests-at="nginx.requests.netdata2"
 228                                         ></div>
 229                 </div>
 230
 231                 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
 232                         <div class="mysparkline-overchart-label">
 233                                 <b>EU - Greece</b> web requests/s
 234                         </div>
 235                         <div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
 236                         </div>
 237                         <div data-netdata="nginx.requests"
 238                                         data-dimensions="requests"
 239                                         data-host="//netdata3.firehol.org"
 240                                         data-chart-library="dygraph"
 241                                         data-dygraph-theme="sparkline"
 242                                         data-dygraph-type="area"
 243                                         data-width="100%"
 244                                         data-height="100%"
 245                                         data-after="-300"
 246                                         data-colors="#5555AA"
 247                                         data-show-value-of-requests-at="nginx.requests.netdata3"
 248                                         ></div>
 249                 </div>
 250         </div>
 251
 252         <div style="width: 100%; text-align: right; font-size: 1vw;">
 253                 <i class="fa fa-comment" aria-hidden="true"></i> these charts are draggable and touchable, double click them to reset them
 254         </div>
 255
 256
 257         <div style="padding-top: 4vw; font-size: 1.5vw;">
 258                 Our bandwidth consumption per service
 259                 <br/>
 260                 (Linux QoS configured by our <a href="https://github.com/firehol/netdata/wiki/You-should-install-QoS-on-all-your-servers">FireQOS</a>):
 261         </div>
 262
 263         <!-- Nav tabs -->
 264         <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
 265                 <li role="presentation" class="active"><a href="#outbout" aria-controls="outbout" role="tab" data-toggle="tab">Outbound</a></li>
 266                 <li role="presentation"><a href="#inbound" aria-controls="inbound" role="tab" data-toggle="tab">Inbound</a></li>
 267         </ul>
 268
 269         <!-- Tab panes -->
 270         <div class="tab-content">
 271                 <div role="tabpanel" class="tab-pane active" id="outbout">
 272                         <div data-netdata="tc.world_out"
 273                                         data-host="//netdata1.firehol.org"
 274                                         data-chart-library="dygraph"
 275                                         data-title="EU - London, traffic we send per service"
 276                                         data-width="100%"
 277                                         data-height="10vw"
 278                                         data-min-height="150px"
 279                                         data-after="-300"
 280                                         ></div>
 281
 282                         <div data-netdata="tc.world_out"
 283                                         data-host="//netdata2.firehol.org"
 284                                         data-chart-library="dygraph"
 285                                         data-title="US - Atlanta, traffic we send per service"
 286                                         data-width="100%"
 287                                         data-height="10vw"
 288                                         data-min-height="150px"
 289                                         data-after="-300"
 290                                         ></div>
 291
 292                         <div data-netdata="tc.world_out"
 293                                         data-host="//netdata3.firehol.org"
 294                                         data-chart-library="dygraph"
 295                                         data-title="EU - Greece, traffic we send per service"
 296                                         data-width="100%"
 297                                         data-height="10vw"
 298                                         data-min-height="150px"
 299                                         data-after="-300"
 300                                         ></div>
 301                 </div>
 302                 <div role="tabpanel" class="tab-pane" id="inbound">
 303                         <div data-netdata="tc.world_in"
 304                                         data-host="//netdata1.firehol.org"
 305                                         data-chart-library="dygraph"
 306                                         data-title="EU - London, traffic we receive per service"
 307                                         data-width="100%"
 308                                         data-height="10vw"
 309                                         data-min-height="150px"
 310                                         data-after="-300"
 311                                         ></div>
 312
 313                         <div data-netdata="tc.world_in"
 314                                         data-host="//netdata2.firehol.org"
 315                                         data-chart-library="dygraph"
 316                                         data-title="US - Atlanta, traffic we receive per service"
 317                                         data-width="100%"
 318                                         data-height="10vw"
 319                                         data-min-height="150px"
 320                                         data-after="-300"
 321                                         ></div>
 322
 323                         <div data-netdata="tc.world_in"
 324                                         data-host="//netdata3.firehol.org"
 325                                         data-chart-library="dygraph"
 326                                         data-title="EU - Greece, traffic we receive per service"
 327                                         data-width="100%"
 328                                         data-height="10vw"
 329                                         data-min-height="150px"
 330                                         data-after="-300"
 331                                         ></div>
 332                 </div>
 333         </div>
 334         <div style="width: 100%; text-align: right; font-size: 1vw;">
 335                 <i class="fa fa-comment" aria-hidden="true"></i> <i>these legends are interactive and the charts are resizable here ^^^</i>
 336         </div>
 337
 338         <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
 339                 <div style="padding-top: 1vw; padding-bottom: 1vw;">
 340                         Our DDoS protection
 341                         <br/>
 342                         (iptables SYNPROXY configured by our <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>):
 343                 </div>
 344
 345                 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
 346                         <div class="mysparkline-overchart-label">
 347                                 <b>EU - London</b>, TCP SYN packets/s received
 348                         </div>
 349                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata1" >
 350                         </div>
 351                         <div data-netdata="netfilter.synproxy_syn_received"
 352                                         data-dimensions="received"
 353                                         data-host="//netdata1.firehol.org"
 354                                         data-chart-library="dygraph"
 355                                         data-dygraph-theme="sparkline"
 356                                         data-dygraph-type="area"
 357                                         data-width="100%"
 358                                         data-height="100%"
 359                                         data-after="-300"
 360                                         data-colors="#558855"
 361                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata1"
 362                                         ></div>
 363                 </div>
 364
 365                 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
 366                         <div class="mysparkline-overchart-label">
 367                                 <b>US - Atlanta</b>, TCP SYN packets/s received
 368                         </div>
 369                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata2" >
 370                         </div>
 371                         <div data-netdata="netfilter.synproxy_syn_received"
 372                                         data-dimensions="received"
 373                                         data-host="//netdata2.firehol.org"
 374                                         data-chart-library="dygraph"
 375                                         data-dygraph-theme="sparkline"
 376                                         data-dygraph-type="area"
 377                                         data-width="100%"
 378                                         data-height="100%"
 379                                         data-after="-300"
 380                                         data-colors="#885555"
 381                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata2"
 382                                         ></div>
 383                 </div>
 384
 385                 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
 386                         <div class="mysparkline-overchart-label">
 387                                 <b>EU - Greece</b>, TCP SYN packets/s received
 388                         </div>
 389                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
 390                         </div>
 391                         <div data-netdata="netfilter.synproxy_syn_received"
 392                                         data-dimensions="received"
 393                                         data-host="//netdata3.firehol.org"
 394                                         data-chart-library="dygraph"
 395                                         data-dygraph-theme="sparkline"
 396                                         data-dygraph-type="area"
 397                                         data-width="100%"
 398                                         data-height="100%"
 399                                         data-after="-300"
 400                                         data-colors="#555588"
 401                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
 402                                         ></div>
 403                 </div>
 404         </div>
 405         <div style="width: 100%; text-align: right; font-size: 1vw;">
 406                 <i class="fa fa-comment" aria-hidden="true"></i> <i>did you notice the decimal numbers?
 407                 <br/>netdata interpolates collected values at second boundaries, with nanosecond detail!</i>
 408         </div>
 409
 410
 411         <div style="padding-top: 4vw; font-size: 1.5vw;">
 412                 CPU Utilization on our servers
 413         </div>
 414
 415         <div style="padding-top: 1vw;">
 416                 <div data-netdata="system.cpu"
 417                                 data-host="//netdata1.firehol.org"
 418                                 data-chart-library="dygraph"
 419                                 data-title="EU - London, CPU Usage"
 420                                 data-width="100%"
 421                                 data-height="10vw"
 422                                 data-min-height="150px"
 423                                 data-after="-300"
 424                                 ></div>
 425
 426                 <div data-netdata="system.cpu"
 427                                 data-host="//netdata2.firehol.org"
 428                                 data-chart-library="dygraph"
 429                                 data-title="US - Atlanta, CPU Usage"
 430                                 data-width="100%"
 431                                 data-height="10vw"
 432                                 data-min-height="150px"
 433                                 data-after="-300"
 434                                 ></div>
 435
 436                 <div data-netdata="system.cpu"
 437                                 data-host="//netdata3.firehol.org"
 438                                 data-chart-library="dygraph"
 439                                 data-title="EU - Greece, CPU Usage"
 440                                 data-width="100%"
 441                                 data-height="10vw"
 442                                 data-min-height="150px"
 443                                 data-after="-300"
 444                                 ></div>
 445         </div>
 446         <div style="width: 100%; text-align: right; font-size: 1vw;">
 447                 <i class="fa fa-comment" aria-hidden="true"></i> <i>what does it take so much CPU?
 448                 <br/>The site <a href="//iplists.firehol.org/">iplists.firehol.org</a> is maintained by FireHOL - the CPU is used for comparing security IP Lists.</i>
 449         </div>
 450
 451         <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
 452                 <div style="padding-top: 1vw; padding-bottom: 1vw;">
 453                         CPU Usage of the netdata user
 454                         <br/>
 455                         netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
 456                         <br/>
 457                         and <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.)
 458                 </div>
 459
 460                 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
 461                         <div class="mysparkline-overchart-label">
 462                                 <b>EU - London</b>, CPU % of a single core
 463                         </div>
 464                         <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
 465                         </div>
 466                         <div data-netdata="users.cpu"
 467                                         data-dimensions="netdata"
 468                                         data-host="//netdata1.firehol.org"
 469                                         data-chart-library="dygraph"
 470                                         data-dygraph-theme="sparkline"
 471                                         data-dygraph-type="area"
 472                                         data-width="100%"
 473                                         data-height="100%"
 474                                         data-after="-300"
 475                                         data-colors="#558855"
 476                                         data-show-value-of-netdata-at="users.cpu.netdata1"
 477                                         ></div>
 478                 </div>
 479
 480                 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
 481                         <div class="mysparkline-overchart-label">
 482                                 <b>US - Atlanta</b>, CPU % of a single core
 483                         </div>
 484                         <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
 485                         </div>
 486                         <div data-netdata="users.cpu"
 487                                         data-dimensions="netdata"
 488                                         data-host="//netdata2.firehol.org"
 489                                         data-chart-library="dygraph"
 490                                         data-dygraph-theme="sparkline"
 491                                         data-dygraph-type="area"
 492                                         data-width="100%"
 493                                         data-height="100%"
 494                                         data-after="-300"
 495                                         data-colors="#885555"
 496                                         data-show-value-of-netdata-at="users.cpu.netdata2"
 497                                         ></div>
 498                 </div>
 499
 500                 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
 501                         <div class="mysparkline-overchart-label">
 502                                 <b>EU - Greece</b>, CPU % of a single core
 503                         </div>
 504                         <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
 505                         </div>
 506                         <div data-netdata="users.cpu"
 507                                         data-dimensions="netdata"
 508                                         data-host="//netdata3.firehol.org"
 509                                         data-chart-library="dygraph"
 510                                         data-dygraph-theme="sparkline"
 511                                         data-dygraph-type="area"
 512                                         data-width="100%"
 513                                         data-height="100%"
 514                                         data-after="-300"
 515                                         data-colors="#555588"
 516                                         data-show-value-of-netdata-at="users.cpu.netdata3"
 517                                         ></div>
 518                 </div>
 519         </div>
 520         <div style="width: 100%; text-align: right; font-size: 1vw;">
 521                 <i class="fa fa-comment" aria-hidden="true"></i> <i>this utilization is about the whole netdata process tree and the percentage is of <b>a single core</b>!
 522                 <br/>including <b>BASH</b> plugins (it monitors <code>mysql</code> on the demo sites), <b>node.js</b> plugins (it monitors <code>bind9</code> on the demo sites), etc.
 523                 <br/>and including the chart refreshes for the dashboards of all viewers.</i>
 524         </div>
 525
 526         <div style="padding-top: 6vw; width: 100%; text-align: center; font-size: 2vw;">
 527                 want to know more?
 528                 <br/>
 529                 jump to <a href="https://github.com/firehol/netdata/">the netdata page at github</a>!
 530                 <br/>
 531                 remember to motivate us with a <b>Github Star</b>.
 532                 <br/>
 533                 &nbsp;
 534         </div>
 535 </div>
 536 </body>
 537 </html>