web/demosites.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <title>NetData Multi-Server 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 body {
  70         font-size: 1vw;
  71 }
  72
  73 .mysparkline {
  74         position: relative;
  75         display: inline-block;
  76         min-height: 50px;
  77         width: 100%;
  78         height: 8vw;
  79         text-align: left;
  80 }
  81
  82 .mysparkline-overchart-label {
  83         position: absolute;
  84         display: block;
  85         top: 0;
  86         left: 10px;
  87         bottom: 0;
  88         right: 0;
  89         font-size: 1vw;
  90         z-index: 1;
  91 }
  92
  93 .mysparkline-overchart-value {
  94         position: absolute;
  95         display: block;
  96         top: 1.1vw;
  97         left: 10px;
  98         bottom: 0;
  99         right: 0;
 100         font-size: 5vw;
 101         z-index: 2;
 102         text-shadow: #333 0px 0px 2px;
 103 }
 104
 105 .myfullchart {
 106         position: relative;
 107         display: inline-block;
 108         width: 100%;
 109         height: 16vw;
 110         min-height: 150px;
 111         text-align: left;
 112 }
 113
 114 .mygauge-combo {
 115         display: inline-block;
 116 }
 117
 118 .mygauge {
 119         position: relative;
 120         display: block;
 121         width: 20vw;
 122         height: 12vw;
 123 }
 124
 125 .mygauge-button {
 126         display: block;
 127 }
 128
 129         </style>
 130
 131 </head>
 132 <body style="text-align: center;">
 133
 134 <div class="container">
 135
 136         <div style="text-align: center; font-size: 13vw; height: 14vw;">
 137                 <b>netdata</b>
 138         </div>
 139         <div style="text-align: center; font-size: 2vw; height: 2.5vw;">
 140                 real-time performance monitoring
 141         </div>
 142         <div style="width:80%; text-align: right; font-size: 2.7vw;">
 143                 done... <strong>real-time</strong>!
 144         </div>
 145         <div style="padding-top: 3vw; padding-bottom: 1vw; text-align: center; font-size: 2vw;">
 146                 this dashboard gets its charts, from <b>3 netdata</b> servers
 147         </div>
 148
 149         <div style="width: 100%; text-align: center; padding-top: 2vw;">
 150                 <div style="width: 100%; text-align: center;">
 151
 152                         <div class="mygauge-combo">
 153                                 <div class="mygauge">
 154                                         <div data-netdata="netdata.requests"
 155                                                         data-host="//netdata1.firehol.org"
 156                                                         data-title="EU - London"
 157                                                         data-chart-library="gauge"
 158                                                         data-width="100%"
 159                                                         data-after="-300"
 160                                                         data-points="300"
 161                                                         data-colors="#558855"
 162                                                         ></div>
 163                                 </div>
 164                                 <div class="mygauge-button">
 165                                         <br/>&nbsp;<br/>
 166                                         <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>
 167                                         <div style="font-size: 0.8vw;">
 168                                                 Donated by DigitalOcean.com
 169                                         </div>
 170                                 </div>
 171                         </div>
 172                         <div class="mygauge-combo">
 173                                 <div class="mygauge">
 174                                         <div data-netdata="netdata.requests"
 175                                                         data-host="//netdata2.firehol.org"
 176                                                         data-title="US - Atlanta"
 177                                                         data-chart-library="gauge"
 178                                                         data-width="100%"
 179                                                         data-after="-300"
 180                                                         data-points="300"
 181                                                         data-colors="#AA5555"
 182                                                         ></div>
 183                                 </div>
 184                                 <div class="mygauge-button">
 185                                         <br/>&nbsp;<br/>
 186                                         <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>
 187                                         <div style="font-size: 0.8vw;">
 188                                                 Donated by CDN77.com
 189                                         </div>
 190                                 </div>
 191                         </div>
 192                         <div class="mygauge-combo">
 193                                 <div class="mygauge">
 194                                         <div data-netdata="netdata.requests"
 195                                                         data-host="//netdata3.firehol.org"
 196                                                         data-title="EU - Greece"
 197                                                         data-chart-library="gauge"
 198                                                         data-width="100%"
 199                                                         data-after="-300"
 200                                                         data-points="300"
 201                                                         data-colors="#5555AA"
 202                                                         ></div>
 203                                 </div>
 204                                 <div class="mygauge-button">
 205                                         <br/>&nbsp;<br/>
 206                                         <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>
 207                                         <div style="font-size: 0.8vw;">
 208                                                 &nbsp;
 209                                         </div>
 210                                 </div>
 211                         </div>
 212                 </div>
 213         </div>
 214
 215         <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 2vw;">
 216                 the servers are not aware of this unified dashboard,
 217                 <br/>
 218                 each server is not aware of the other 2 servers,
 219                 <br/>
 220                 but on this dashboard they <b>behave like one</b>!
 221         </div>
 222         <div style="padding-top: 1vw; width: 100%; text-align: center; font-size: 1.5vw;">
 223                 <i class="fa fa-comment" aria-hidden="true"></i>
 224                 hover on a chart below, or drag it to show the past - <b>the others will follow</b>!
 225                 <br/>
 226                 (double click on a chart to reset them all)
 227         </div>
 228
 229         <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
 230                 <div style="padding-top: 1vw; padding-bottom: 1vw;">
 231                         Our <code>nginx</code> web servers recent requests/s:
 232                 </div>
 233
 234                 <div class="mysparkline">
 235                         <div class="mysparkline-overchart-label">
 236                                 <b>EU - London</b> web requests/s
 237                         </div>
 238                         <div class="mysparkline-overchart-value" id="nginx.requests.netdata" >
 239                         </div>
 240                         <div data-netdata="nginx.requests"
 241                                         data-dimensions="requests"
 242                                         data-host="//netdata1.firehol.org"
 243                                         data-chart-library="dygraph"
 244                                         data-dygraph-theme="sparkline"
 245                                         data-dygraph-type="area"
 246                                         data-width="100%"
 247                                         data-height="100%"
 248                                         data-after="-300"
 249                                         data-colors="#558855"
 250                                         data-show-value-of-requests-at="nginx.requests.netdata"
 251                                         ></div>
 252                 </div>
 253
 254                 <div class="mysparkline">
 255                         <div class="mysparkline-overchart-label">
 256                                 <b>US - Atlanta</b> web requests/s
 257                         </div>
 258                         <div class="mysparkline-overchart-value" id="nginx.requests.netdata2" >
 259                         </div>
 260                         <div data-netdata="nginx.requests"
 261                                         data-dimensions="requests"
 262                                         data-host="//netdata2.firehol.org"
 263                                         data-chart-library="dygraph"
 264                                         data-dygraph-theme="sparkline"
 265                                         data-dygraph-type="area"
 266                                         data-width="100%"
 267                                         data-height="100%"
 268                                         data-after="-300"
 269                                         data-colors="#AA5555"
 270                                         data-show-value-of-requests-at="nginx.requests.netdata2"
 271                                         ></div>
 272                 </div>
 273
 274                 <div class="mysparkline">
 275                         <div class="mysparkline-overchart-label">
 276                                 <b>EU - Greece</b> web requests/s
 277                         </div>
 278                         <div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
 279                         </div>
 280                         <div data-netdata="nginx.requests"
 281                                         data-dimensions="requests"
 282                                         data-host="//netdata3.firehol.org"
 283                                         data-chart-library="dygraph"
 284                                         data-dygraph-theme="sparkline"
 285                                         data-dygraph-type="area"
 286                                         data-width="100%"
 287                                         data-height="100%"
 288                                         data-after="-300"
 289                                         data-colors="#5555AA"
 290                                         data-show-value-of-requests-at="nginx.requests.netdata3"
 291                                         ></div>
 292                 </div>
 293         </div>
 294
 295         <div style="width: 100%; text-align: right; font-size: 1vw;">
 296                 <i class="fa fa-comment" aria-hidden="true"></i> these charts are draggable and touchable, double click them to reset them
 297         </div>
 298
 299
 300         <div style="padding-top: 4vw; font-size: 1.5vw;">
 301                 Our bandwidth consumption per service
 302                 <br/>
 303                 (Linux QoS configured by our <a href="https://github.com/firehol/netdata/wiki/You-should-install-QoS-on-all-your-servers">FireQOS</a>):
 304         </div>
 305
 306         <!-- Nav tabs -->
 307         <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
 308                 <li role="presentation" class="active"><a href="#outbout" aria-controls="outbout" role="tab" data-toggle="tab">Outbound</a></li>
 309                 <li role="presentation"><a href="#inbound" aria-controls="inbound" role="tab" data-toggle="tab">Inbound</a></li>
 310         </ul>
 311
 312         <!-- Tab panes -->
 313         <div class="tab-content">
 314                 <div role="tabpanel" class="tab-pane active" id="outbout">
 315                         <div class="myfullchart">
 316                                 <div data-netdata="tc.world_out"
 317                                         data-host="//netdata1.firehol.org"
 318                                         data-chart-library="dygraph"
 319                                         data-title="EU - London, traffic we send per service"
 320                                         data-width="100%"
 321                                         data-height="100%"
 322                                         data-after="-300"
 323                                         ></div>
 324                         </div>
 325
 326                         <div class="myfullchart">
 327                                 <div data-netdata="tc.world_out"
 328                                         data-host="//netdata2.firehol.org"
 329                                         data-chart-library="dygraph"
 330                                         data-title="US - Atlanta, traffic we send per service"
 331                                         data-width="100%"
 332                                         data-height="100%"
 333                                         data-after="-300"
 334                                         ></div>
 335
 336                         </div>
 337
 338                         <div class="myfullchart">
 339                                 <div data-netdata="tc.world_out"
 340                                         data-host="//netdata3.firehol.org"
 341                                         data-chart-library="dygraph"
 342                                         data-title="EU - Greece, traffic we send per service"
 343                                         data-width="100%"
 344                                         data-height="100%"
 345                                         data-after="-300"
 346                                         ></div>
 347                         </div>
 348                 </div>
 349                 <div role="tabpanel" class="tab-pane" id="inbound">
 350                         <div class="myfullchart">
 351                                 <div data-netdata="tc.world_in"
 352                                         data-host="//netdata1.firehol.org"
 353                                         data-chart-library="dygraph"
 354                                         data-title="EU - London, traffic we receive per service"
 355                                         data-width="100%"
 356                                         data-height="100%"
 357                                         data-after="-300"
 358                                         ></div>
 359
 360                         </div>
 361
 362                         <div class="myfullchart">
 363                                 <div data-netdata="tc.world_in"
 364                                         data-host="//netdata2.firehol.org"
 365                                         data-chart-library="dygraph"
 366                                         data-title="US - Atlanta, traffic we receive per service"
 367                                         data-width="100%"
 368                                         data-height="100%"
 369                                         data-after="-300"
 370                                         ></div>
 371
 372                         </div>
 373
 374                         <div class="myfullchart">
 375                                 <div data-netdata="tc.world_in"
 376                                         data-host="//netdata3.firehol.org"
 377                                         data-chart-library="dygraph"
 378                                         data-title="EU - Greece, traffic we receive per service"
 379                                         data-width="100%"
 380                                         data-height="100%"
 381                                         data-after="-300"
 382                                         ></div>
 383                         </div>
 384                 </div>
 385         </div>
 386         <div style="width: 100%; text-align: right; font-size: 1vw;">
 387                 <i class="fa fa-comment" aria-hidden="true"></i> <i>these legends are interactive and the charts are resizable here ^^^</i>
 388         </div>
 389
 390         <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
 391                 <div style="padding-top: 1vw; padding-bottom: 1vw;">
 392                         Our DDoS protection
 393                         <br/>
 394                         (iptables SYNPROXY configured by our <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>):
 395                 </div>
 396
 397                 <div class="mysparkline">
 398                         <div class="mysparkline-overchart-label">
 399                                 <b>EU - London</b>, TCP SYN packets/s received
 400                         </div>
 401                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata1" >
 402                         </div>
 403                         <div data-netdata="netfilter.synproxy_syn_received"
 404                                         data-dimensions="received"
 405                                         data-host="//netdata1.firehol.org"
 406                                         data-chart-library="dygraph"
 407                                         data-dygraph-theme="sparkline"
 408                                         data-dygraph-type="area"
 409                                         data-width="100%"
 410                                         data-height="100%"
 411                                         data-after="-300"
 412                                         data-colors="#558855"
 413                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata1"
 414                                         ></div>
 415                 </div>
 416
 417                 <div class="mysparkline">
 418                         <div class="mysparkline-overchart-label">
 419                                 <b>US - Atlanta</b>, TCP SYN packets/s received
 420                         </div>
 421                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata2" >
 422                         </div>
 423                         <div data-netdata="netfilter.synproxy_syn_received"
 424                                         data-dimensions="received"
 425                                         data-host="//netdata2.firehol.org"
 426                                         data-chart-library="dygraph"
 427                                         data-dygraph-theme="sparkline"
 428                                         data-dygraph-type="area"
 429                                         data-width="100%"
 430                                         data-height="100%"
 431                                         data-after="-300"
 432                                         data-colors="#885555"
 433                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata2"
 434                                         ></div>
 435                 </div>
 436
 437                 <div class="mysparkline">
 438                         <div class="mysparkline-overchart-label">
 439                                 <b>EU - Greece</b>, TCP SYN packets/s received
 440                         </div>
 441                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
 442                         </div>
 443                         <div data-netdata="netfilter.synproxy_syn_received"
 444                                         data-dimensions="received"
 445                                         data-host="//netdata3.firehol.org"
 446                                         data-chart-library="dygraph"
 447                                         data-dygraph-theme="sparkline"
 448                                         data-dygraph-type="area"
 449                                         data-width="100%"
 450                                         data-height="100%"
 451                                         data-after="-300"
 452                                         data-colors="#555588"
 453                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
 454                                         ></div>
 455                 </div>
 456         </div>
 457         <div style="width: 100%; text-align: right; font-size: 1vw;">
 458                 <i class="fa fa-comment" aria-hidden="true"></i> <i>did you notice the decimal numbers?
 459                 <br/>netdata interpolates collected values at second boundaries, with nanosecond detail!</i>
 460         </div>
 461
 462
 463         <div style="padding-top: 4vw; font-size: 1.5vw;">
 464                 CPU Utilization on our servers
 465         </div>
 466
 467         <div style="padding-top: 1vw;">
 468                 <div class="myfullchart">
 469                         <div data-netdata="system.cpu"
 470                                 data-host="//netdata1.firehol.org"
 471                                 data-chart-library="dygraph"
 472                                 data-title="EU - London, CPU Usage"
 473                                 data-width="100%"
 474                                 data-height="100%"
 475                                 data-after="-300"
 476                                 ></div>
 477                 </div>
 478
 479                 <div class="myfullchart">
 480                         <div data-netdata="system.cpu"
 481                                 data-host="//netdata2.firehol.org"
 482                                 data-chart-library="dygraph"
 483                                 data-title="US - Atlanta, CPU Usage"
 484                                 data-width="100%"
 485                                 data-height="100%"
 486                                 data-after="-300"
 487                                 ></div>
 488                 </div>
 489
 490                 <div class="myfullchart">
 491                         <div data-netdata="system.cpu"
 492                                 data-host="//netdata3.firehol.org"
 493                                 data-chart-library="dygraph"
 494                                 data-title="EU - Greece, CPU Usage"
 495                                 data-width="100%"
 496                                 data-height="100%"
 497                                 data-after="-300"
 498                                 ></div>
 499                 </div>
 500         </div>
 501         <div style="width: 100%; text-align: right; font-size: 1vw;">
 502                 <i class="fa fa-comment" aria-hidden="true"></i> <i>what does it take so much CPU?
 503                 <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>
 504         </div>
 505
 506         <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
 507                 <div style="padding-top: 1vw; padding-bottom: 1vw;">
 508                         CPU Usage of the netdata user
 509                         <br/>
 510                         netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
 511                         <br/>
 512                         and <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.)
 513                 </div>
 514
 515                 <div class="mysparkline">
 516                         <div class="mysparkline-overchart-label">
 517                                 <b>EU - London</b>, CPU % of a single core
 518                         </div>
 519                         <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
 520                         </div>
 521                         <div data-netdata="users.cpu"
 522                                         data-dimensions="netdata"
 523                                         data-host="//netdata1.firehol.org"
 524                                         data-chart-library="dygraph"
 525                                         data-dygraph-theme="sparkline"
 526                                         data-dygraph-type="area"
 527                                         data-width="100%"
 528                                         data-height="100%"
 529                                         data-after="-300"
 530                                         data-colors="#558855"
 531                                         data-show-value-of-netdata-at="users.cpu.netdata1"
 532                                         ></div>
 533                 </div>
 534
 535                 <div class="mysparkline">
 536                         <div class="mysparkline-overchart-label">
 537                                 <b>US - Atlanta</b>, CPU % of a single core
 538                         </div>
 539                         <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
 540                         </div>
 541                         <div data-netdata="users.cpu"
 542                                         data-dimensions="netdata"
 543                                         data-host="//netdata2.firehol.org"
 544                                         data-chart-library="dygraph"
 545                                         data-dygraph-theme="sparkline"
 546                                         data-dygraph-type="area"
 547                                         data-width="100%"
 548                                         data-height="100%"
 549                                         data-after="-300"
 550                                         data-colors="#885555"
 551                                         data-show-value-of-netdata-at="users.cpu.netdata2"
 552                                         ></div>
 553                 </div>
 554
 555                 <div class="mysparkline">
 556                         <div class="mysparkline-overchart-label">
 557                                 <b>EU - Greece</b>, CPU % of a single core
 558                         </div>
 559                         <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
 560                         </div>
 561                         <div data-netdata="users.cpu"
 562                                         data-dimensions="netdata"
 563                                         data-host="//netdata3.firehol.org"
 564                                         data-chart-library="dygraph"
 565                                         data-dygraph-theme="sparkline"
 566                                         data-dygraph-type="area"
 567                                         data-width="100%"
 568                                         data-height="100%"
 569                                         data-after="-300"
 570                                         data-colors="#555588"
 571                                         data-show-value-of-netdata-at="users.cpu.netdata3"
 572                                         ></div>
 573                 </div>
 574         </div>
 575         <div style="width: 100%; text-align: right; font-size: 1vw;">
 576                 <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>!
 577                 <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.
 578                 <br/>and including the chart refreshes for the dashboards of all viewers.</i>
 579         </div>
 580
 581         <div style="padding-top: 6vw; width: 100%; text-align: center; font-size: 2vw;">
 582                 want to know more?
 583                 <br/>
 584                 jump to <a href="https://github.com/firehol/netdata/">the netdata page at github</a>!
 585                 <br/>
 586                 remember to motivate us with a <b>Github Star</b>.
 587                 <br/>
 588                 &nbsp;
 589         </div>
 590 </div>
 591 </body>
 592 </html>