web/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <title>netdata 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         <meta name="author" content="costa@tsaousis.gr">
  13
  14         <link rel="shortcut icon" href="images/seo-performance-multi-size.ico">
  15
  16         <link rel="apple-touch-icon" href="images/seo-performance-72.png">
  17         <link rel="apple-touch-icon" sizes="72x72" href="images/seo-performance-72.png">
  18         <link rel="apple-touch-icon" sizes="114x114" href="images/seo-performance-114.png">
  19
  20         <link rel="icon" type="image/png" sizes="512x512" href="images/seo-performance-512.png">
  21         <link rel="icon" type="image/png" sizes="256x256" href="images/seo-performance-256.png">
  22         <link rel="icon" type="image/png" sizes="128x128" href="images/seo-performance-128.png">
  23         <link rel="icon" type="image/png" sizes="64x64" href="images/seo-performance-64.png">
  24         <link rel="icon" type="image/png" sizes="48x48" href="images/seo-performance-48.png">
  25         <link rel="icon" type="image/png" sizes="32x32" href="images/seo-performance-32.png">
  26         <link rel="icon" type="image/png" sizes="24x24" href="images/seo-performance-24.png">
  27         <link rel="icon" type="image/png" sizes="16x16" href="images/seo-performance-16.png">
  28
  29         <meta property="og:locale" content="en_US" />
  30         <meta property="og:image" content="http://my-netdata.io/images/post.png"/>
  31         <meta property="og:url" content="http://my-netdata.io/"/>
  32         <meta property="og:type" content="website"/>
  33         <meta property="og:site_name" content="netdata"/>
  34         <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
  35         <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
  36
  37         <style>
  38
  39         /* prevent body from hiding under the navbar */
  40         body {
  41                 padding-top: 50px;
  42         }
  43
  44         .modal-wide .modal-dialog {
  45                 width: 80%;
  46         }
  47
  48         /* fix # anchors scrolling under the navbar
  49            https://github.com/twbs/bootstrap/issues/1768#issuecomment-46519033
  50          */
  51         h1 {
  52                 position: relative;
  53                 z-index: -1;
  54         }
  55         h2 {
  56                 position: relative;
  57                 z-index: -2;
  58         }
  59         h1:before, h2:before {
  60                 display: block;
  61                 content: " ";
  62                 margin-top: -70px;
  63                 height: 70px;
  64                 visibility: hidden;
  65         }
  66
  67         .p {
  68                 display: block;
  69                 margin-top: 15px;
  70         }
  71
  72         .option-row,
  73         .option-control {
  74                 vertical-align: top;
  75                 padding: 10px;
  76                 padding-top: 30px;
  77                 padding-left: 30px;
  78         }
  79
  80         .option-info {
  81                 padding: 10px;
  82         }
  83
  84         .chart-message {
  85                 display: block;
  86                 margin-top: 10px;
  87         }
  88
  89         .container {
  90                 width: 90% !important;
  91         }
  92
  93         #masthead h1 {
  94                 /*font-size: 30px;*/
  95                 line-height: 1;
  96                 padding-top: 30px;
  97         }
  98
  99         #masthead .well {
 100                 margin-top:4%;
 101         }
 102
 103         /* fix the navbar shifting when a modal is open */
 104         /* https://github.com/twbs/bootstrap/issues/14040#issuecomment-159891033 */
 105         body.modal-open{
 106                 width: 100% !important;
 107                 padding-right: 0 !important;
 108 /*              overflow-y: scroll !important; */
 109 /*              position: fixed !important;*/
 110                 overflow: visible;
 111         }
 112
 113         /*
 114          * Side navigation
 115          *
 116          * Scrollspy and affixed enhanced navigation to highlight sections and secondary
 117          * sections of docs content.
 118          */
 119
 120         .affix {
 121                 position: static;
 122                 top: 70px !important;
 123                 /*width: 220px;*/
 124         }
 125
 126         .affix-top {
 127                 /*width: 220px;*/
 128         }
 129
 130         .dashboard-sidebar {
 131                 max-height: calc(100% - 70px) !important;
 132                 overflow-y: auto;
 133                 /*width: 220px !important;*/
 134         }
 135
 136         /* By default it's not affixed in mobile views, so undo that */
 137         .dashboard-sidebar.affix {
 138                 position: static;
 139         }
 140
 141         @media (min-width: 768px) {
 142                 .dashboard-sidebar {
 143                         padding-left: 20px;
 144                 }
 145         }
 146
 147         /* First level of nav */
 148         .dashboard-sidenav {
 149                 margin-top: 20px;
 150                 margin-bottom: 20px;
 151         }
 152
 153         /* All levels of nav */
 154         .dashboard-sidebar .nav > li > a {
 155                 display: block;
 156                 padding: 4px 20px;
 157                 font-size: 13px;
 158                 font-weight: 500;
 159                 color: #767676;
 160         }
 161         .dashboard-sidebar .nav > li > a:hover,
 162         .dashboard-sidebar .nav > li > a:focus {
 163                 padding-left: 19px;
 164                 color: #563d7c;
 165                 text-decoration: none;
 166                 background-color: transparent;
 167                 border-left: 1px solid #563d7c;
 168         }
 169         .dashboard-sidebar .nav > .active > a,
 170         .dashboard-sidebar .nav > .active:hover > a,
 171         .dashboard-sidebar .nav > .active:focus > a {
 172                 padding-left: 18px;
 173                 font-weight: bold;
 174                 color: #563d7c;
 175                 background-color: transparent;
 176                 border-left: 2px solid #563d7c;
 177         }
 178
 179         /* Nav: second level (shown on .active) */
 180         .dashboard-sidebar .nav .nav {
 181                 display: none; /* Hide by default, but at >768px, show it */
 182                 padding-bottom: 10px;
 183         }
 184         .dashboard-sidebar .nav .nav > li > a {
 185                 padding-top: 1px;
 186                 padding-bottom: 1px;
 187                 padding-left: 30px;
 188                 font-size: 12px;
 189                 font-weight: normal;
 190         }
 191         .dashboard-sidebar .nav .nav > li > a:hover,
 192         .dashboard-sidebar .nav .nav > li > a:focus {
 193                 padding-left: 29px;
 194         }
 195         .dashboard-sidebar .nav .nav > .active > a,
 196         .dashboard-sidebar .nav .nav > .active:hover > a,
 197         .dashboard-sidebar .nav .nav > .active:focus > a {
 198                 padding-left: 28px;
 199                 font-weight: 500;
 200         }
 201
 202         .dropdown-menu {
 203                 min-width: 200px;
 204         }
 205         .dropdown-menu.columns-2 {
 206                 margin: 0;
 207                 padding: 0;
 208                 width: 400px;
 209         }
 210         .dropdown-menu li a {
 211                 padding: 5px 15px;
 212                 font-weight: 300;
 213         }
 214         .dropdown-menu.multi-column {
 215                 overflow-x: hidden;
 216         }
 217         .multi-column-dropdown {
 218                 list-style: none;
 219                 padding: 0;
 220         }
 221         .multi-column-dropdown li a {
 222                 display: block;
 223                 clear: both;
 224                 line-height: 1.428571429;
 225                 white-space: normal;
 226         }
 227         .multi-column-dropdown li a:hover {
 228                 text-decoration: none;
 229                 color: #f5f5f5;
 230                 background-color: #262626;
 231         }
 232         .scrollable-menu {
 233                 height: auto;
 234                 max-height: 80vh;
 235                 overflow-x: hidden;
 236         }
 237
 238         /* Back to top (hidden on mobile) */
 239         .back-to-top,
 240         .dashboard-theme-toggle {
 241                 display: none;
 242                 padding: 4px 10px;
 243                 margin-top: 10px;
 244                 margin-left: 10px;
 245                 font-size: 12px;
 246                 font-weight: 500;
 247                 color: #999;
 248         }
 249         .back-to-top:hover,
 250         .dashboard-theme-toggle:hover {
 251                 color: #563d7c;
 252                 text-decoration: none;
 253         }
 254         .dashboard-theme-toggle {
 255                 margin-top: 0;
 256         }
 257
 258         @media (min-width: 768px) {
 259                 .back-to-top,
 260                 .dashboard-theme-toggle {
 261                         display: block;
 262                 }
 263
 264                 /* Widen the fixed sidebar */
 265                 .dashboard-sidebar.affix,
 266                 .dashboard-sidebar.affix-top,
 267                 .dashboard-sidebar.affix-bottom {
 268                         width: 200px !important;
 269                 }
 270
 271                 .dashboard-sidebar.affix {
 272                         position: fixed; /* Undo the static from mobile first approach */
 273                         top: 20px;
 274                 }
 275
 276                 .dashboard-sidebar.affix-bottom {
 277                         position: absolute; /* Undo the static from mobile first approach */
 278                 }
 279
 280                 .dashboard-sidebar.affix-bottom .dashboard-sidenav,
 281                 .dashboard-sidebar.affix .dashboard-sidenav {
 282                         margin-top: 0;
 283                         margin-bottom: 0;
 284                 }
 285         }
 286
 287         /* Show and affix the side nav when space allows it */
 288         @media (min-width: 992px) {
 289                 .dashboard-sidebar .nav > .active > ul {
 290                         display: block;
 291                 }
 292
 293                 /* Widen the fixed sidebar */
 294                 .dashboard-sidebar.affix,
 295                 .dashboard-sidebar.affix-top,
 296                 .dashboard-sidebar.affix-bottom {
 297                         width: 200px !important;
 298                 }
 299                 .dashboard-sidebar.affix {
 300                         position: fixed; /* Undo the static from mobile first approach */
 301                         top: 20px;
 302                 }
 303                 .dashboard-sidebar.affix-bottom {
 304                         position: absolute; /* Undo the static from mobile first approach */
 305                 }
 306                 .dashboard-sidebar.affix-bottom .dashboard-sidenav,
 307                 .dashboard-sidebar.affix .dashboard-sidenav {
 308                         margin-top: 0;
 309                         margin-bottom: 0;
 310                 }
 311         }
 312
 313         @media (min-width: 1200px) {
 314                 /* Widen the fixed sidebar again */
 315                 .dashboard-sidebar.affix-bottom,
 316                 .dashboard-sidebar.affix-top,
 317                 .dashboard-sidebar.affix {
 318                         width: 263px;
 319                 }
 320         }
 321         </style>
 322
 323         <!-- you can set your netdata server globally, by ucommenting this -->
 324         <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
 325         <!-- <script> netdataServer = "http://box:19999"; </script> -->
 326
 327         <!-- check which theme to use -->
 328         <script>
 329                 function loadLocalStorage(name) {
 330                         var ret = null;
 331
 332                         try {
 333                                 if(typeof Storage !== "undefined" && typeof localStorage === 'object')
 334                                         ret = localStorage.getItem(name);
 335                         }
 336                         catch(error) {
 337                                 ;
 338                         }
 339
 340                         if(typeof ret === 'undefined' || ret === null)
 341                                 return null;
 342
 343                         return ret;
 344                 }
 345
 346                 function saveLocalStorage(name, value) {
 347                         try {
 348                                 if(typeof Storage !== "undefined" && typeof localStorage === 'object') {
 349                                         localStorage.setItem(name, value.toString());
 350                                         return true;
 351                                 }
 352                         }
 353                         catch(error) {
 354                                 ;
 355                         }
 356
 357                         return false;
 358                 }
 359
 360                 function getTheme(def) {
 361                         var ret = loadLocalStorage('netdataTheme');
 362                         if(typeof ret === 'undefined' || ret === null || ret === 'undefined')
 363                                 return def;
 364                         else
 365                                 return ret;
 366                 }
 367
 368                 var netdataTheme = getTheme('slate');
 369
 370                 function setTheme(theme) {
 371                         if(theme === netdataTheme) return false;
 372
 373                         return saveLocalStorage('netdataTheme', theme);
 374                 }
 375
 376                 var netdataRegistryCallback = function(machines_array) {
 377                         var el = '';
 378                         var a1 = '';
 379                         var found = 0;
 380
 381                         if(machines_array) {
 382                                 function name_comparator_desc(a, b) {
 383                                         if (a.name > b.name) return -1;
 384                                         if (a.name < b.name) return 1;
 385                                         return 0;
 386                                 }
 387
 388                                 var machines = machines_array.sort(name_comparator_desc);
 389                                 var len = machines.length;
 390                                 while(len--) {
 391                                         var u = machines[len];
 392                                         found++;
 393                                         el += '<li id="registry_server_' + u.guid + '"><a class="registry_link" href="#" onClick="return gotoServerModalHandler(\'' + u.guid + '\');">' + u.name + '</a></li>';
 394                                         a1 += '<li id="registry_action_' + u.guid + '"><a href="#" onclick="deleteRegistryModalHandler(\'' + u.guid + '\',\'' + u.name + '\',\'' + u.url + '\'); return false;"><i class="fa fa-trash-o" aria-hidden="true" style="color: #999;"></i></a></li>';
 395                                 }
 396                         }
 397
 398                         if(!found) {
 399                                 if(machines)
 400                                         el += '<li><a href="https://github.com/firehol/netdata/wiki/mynetdata-menu-item" style="color: #666;" target="_blank">your netdata server list is empty...</a></li>';
 401                                 else
 402                                         el += '<li><a href="https://github.com/firehol/netdata/wiki/mynetdata-menu-item" style="color: #666;" target="_blank">failed to contact the registry...</a></li>';
 403
 404                                 a1 += '<li><a href="#" onClick="return false;">&nbsp;</a></li>';
 405
 406                                 el += '<li role="separator" class="divider"></li>' +
 407                                                 '<li><a href="//london.netdata.rocks/default.html">EU - London (DigitalOcean.com)</a></li>' +
 408                                                 '<li><a href="//atlanta.netdata.rocks/default.html">US - Atlanta (CDN77.com)</a></li>' +
 409                                                 '<li><a href="//athens.netdata.rocks/default.html">EU - Athens</a></li>';
 410                                 a1 += '<li role="separator" class="divider"></li>' +
 411                                                 '<li><a href="#">&nbsp;</a></li>' +
 412                                                 '<li><a href="#">&nbsp;</a></li>'+
 413                                                 '<li><a href="#">&nbsp;</a></li>';
 414                         }
 415
 416                         el += '<li role="separator" class="divider"></li>';
 417                         a1 += '<li role="separator" class="divider"></li>';
 418
 419                         el += '<li><a href="https://github.com/firehol/netdata/wiki/mynetdata-menu-item" style="color: #999;" target="_blank">What is this?</a></li>';
 420                         a1 += '<li><a href="#" style="color: #999;" onclick="switchRegistryModalHandler(); return false;"><i class="fa fa-cog" aria-hidden="true" style="color: #999;"></i></a></li>'
 421
 422                         document.getElementById('mynetdata_servers').innerHTML = el;
 423                         document.getElementById('mynetdata_servers2').innerHTML = el;
 424                         document.getElementById('mynetdata_actions1').innerHTML = a1;
 425
 426                         gotoServerInit();
 427                 };
 428
 429         </script>
 430
 431         <!-- load the dashboard manager - it will do the rest -->
 432         <script type="text/javascript" src="dashboard.js?v39"></script>
 433 </head>
 434
 435 <body data-spy="scroll" data-target="#sidebar">
 436         <nav class="navbar navbar-default navbar-fixed-top" role="banner">
 437                 <div class="container">
 438                         <nav id="mynetdata_nav" class="collapse navbar-collapse navbar-left hidden-sm hidden-xs" role="navigation" style="padding-right: 20px;">
 439                                 <ul class="nav navbar-nav">
 440                                         <li class="dropdown">
 441                                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">my-netdata <strong class="caret"></strong></a>
 442                                                 <ul class="dropdown-menu scrollable-menu inpagemenu multi-column columns-2" role="menu">
 443                                                         <div class="row">
 444                                                                 <div class="col-sm-6" style="width: 85%; padding-right: 0;">
 445                                                                         <ul id="mynetdata_servers" class="multi-column-dropdown">
 446                                                                                 <li><a href="#" onclick="return false;" style="color: #999;">loading...</a></li>
 447                                                                         </ul>
 448                                                                 </div>
 449                                                                 <div class="col-sm-3 hidden-xs" style="width: 15%; padding-left: 0;">
 450                                                                         <ul id="mynetdata_actions1" class="multi-column-dropdown">
 451                                                                         <li style="color: #999;">&nbsp;</li>
 452                                                                         </ul>
 453                                                                 </div>
 454                                                         </div>
 455                                                 </ul>
 456                                         </li>
 457                                 </ul>
 458                         </nav>
 459                         <div class="navbar-header">
 460                                 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
 461                                         <span class="sr-only">Toggle navigation</span>
 462                                         <span class="icon-bar"></span>
 463                                         <span class="icon-bar"></span>
 464                                         <span class="icon-bar"></span>
 465                                 </button>
 466                                 <a href="/" class="navbar-brand" id="hostname">netdata</a>
 467                         </div>
 468                         <nav class="collapse navbar-collapse navbar-right" role="navigation">
 469                                 <ul class="nav navbar-nav">
 470                                         <li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-cog"></i> settings</a></li>
 471                                         <li class="hidden-sm"><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
 472                                         <li class="hidden-sm" id="updateButton"><a href="#" class="btn" data-toggle="modal" data-target="#updateModal"><i class="fa fa-cloud-download"></i> update</a></li>
 473                                         <li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> help</a></li>
 474                                         <li class="dropdown hidden-md hidden-lg hidden-xs">
 475                                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">Menu <strong class="caret"></strong></a>
 476                                                 <ul class="dropdown-menu scrollable-menu inpagemenu" role="menu">
 477                                                         <li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-cog"></i> settings</a></li>
 478                                                         <li><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
 479                                                         <li><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> help</a></li>
 480                                                 </ul>
 481                                         </li>
 482                                         <li class="dropdown hidden-sm hidden-md hidden-lg">
 483                                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">my-netdata <strong class="caret"></strong></a>
 484                                                 <ul id="mynetdata_servers2" class="dropdown-menu scrollable-menu inpagemenu" role="menu">
 485                                                         <li><a href="#" onclick="return false;" style="color: #999;">loading...</a></li>
 486                                                 </ul>
 487                                         </li>
 488                                 </ul>
 489                         </nav>
 490         </nav>
 491                 </div>
 492         </nav>
 493
 494         <div id="masthead" style="display: none;">
 495                 <div class="container">
 496                         <div class="row">
 497                                 <div class="col-md-7">
 498                                         <h1>Netdata
 499                                                 <p class="lead">Real-time performance monitoring, in the greatest possible detail</p>
 500                                         </h1>
 501                                 </div>
 502                                 <div class="col-md-5">
 503                                         <div class="well well-lg">
 504                                                 <div class="row">
 505                                                 <div class="col-md-6">
 506                                                         <b>Drag</b> charts to pan.
 507                                                         <b>Shift + wheel</b> on them, to zoom in and out.
 508                                                         <b>Double-click</b> on them, to reset.
 509                                                         <b>Hover</b> on them too!
 510                                                         </div>
 511                                                 <div class="col-md-6">
 512                                                         <div data-netdata="system.intr" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dygraph-type="line" data-dygraph-strokewidth="3" data-dygraph-smooth="true" data-dygraph-highlightcirclesize="6" data-after="-90" data-height="60px" data-colors="#C66"></div>
 513                                                         </div>
 514                                                 </div>
 515                                         </div>
 516                                 </div>
 517                         </div>
 518                 </div>
 519         </div>
 520
 521         <div class="container">
 522                 <div class="row">
 523                         <div class="col-md-10" role="main">
 524                                 <div id="charts_div"></div>
 525                         </div>
 526                         <div class="col-md-2" role="complementary">
 527                                 <nav class="dashboard-sidebar hidden-print hidden-xs hidden-sm" id="sidebar" role="menu"></nav>
 528                         </div>
 529                 </div>
 530         </div>
 531
 532         <div id="footer" class="container" style="display: none;">
 533                 <div class="row">
 534                         <div class="col-md-10" role="main">
 535                                 <div class="p">
 536                                         <big><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></big><br/>
 537                                         <i class="fa fa-copyright"></i> Copyright 2016, Costa Tsaousis.<br/>
 538                                         Released under <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GPL v3 or later</a>.<br/>
 539                                 </div>
 540                                 <div class="p">
 541                                         <small>
 542                                                 <a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a> re-distributes these software tools:
 543
 544                                                 <i class="fa fa-circle"></i> The excellent <a href="http://dygraphs.com/" target="_blank">Dygraphs.com</a> web chart library,
 545                                                 <i class="fa fa-copyright"></i> Copyright 2009, Dan Vanderkam, <a href="http://dygraphs.com/legal.html" target="_blank">MIT License</a>
 546
 547                                                 <i class="fa fa-circle"></i> <a href="http://omnipotent.net/jquery.sparkline/" target="_blank">jQuery Sparklines</a> web chart library,
 548                                                 <i class="fa fa-copyright"></i> Copyright 2009-2012, Splunk Inc., <a href="http://opensource.org/licenses/BSD-3-Clause" target="_blank">New BSD License</a>
 549
 550                                                 <i class="fa fa-circle"></i> <a href="http://benpickles.github.io/peity/" target="_blank">Peity</a> web chart library,
 551                                                 <i class="fa fa-copyright"></i> Copyright 2009-2015, Ben Pickles, <a href="https://github.com/benpickles/peity/blob/master/MIT-LICENCE" target="_blank">MIT License</a>
 552
 553                                                 <i class="fa fa-circle"></i> <a href="https://rendro.github.io/easy-pie-chart/" target="_blank">Easy Pie Chart</a> web chart library,
 554                                                 <i class="fa fa-copyright"></i> Copyright 2013, Robert Fleischmann, <a href="https://github.com/rendro/easy-pie-chart/blob/master/LICENSE" target="_blank">MIT License</a>
 555
 556                                                 <i class="fa fa-circle"></i> <a href="http://bernii.github.io/gauge.js/" target="_blank">Gauge.js</a> web chart library,
 557                                                 <i class="fa fa-copyright"></i> Copyright, Bernard Kobos, <a href="http://bernii.github.io/gauge.js/" target="_blank">MIT License</a>
 558
 559                                                 <i class="fa fa-circle"></i> <a href="https://jquery.org/" target="_blank">jQuery</a>,
 560                                                 <i class="fa fa-copyright"></i> Copyright 2015, jQuery Foundation, <a href="https://jquery.org/license/" target="_blank">MIT License</a>
 561
 562                                                 <i class="fa fa-circle"></i> <a href="http://getbootstrap.com/getting-started/" target="_blank">Bootstrap</a>,
 563                                                 <i class="fa fa-copyright"></i> Copyright 2015, Twitter, <a href="http://getbootstrap.com/getting-started/#license-faqs" target="_blank">MIT License</a>
 564
 565                                                 <i class="fa fa-circle"></i> <a href="http://www.bootstraptoggle.com/" target="_blank">Bootstrap Toggle</a>,
 566                                                 <i class="fa fa-copyright"></i> Copyright (c) 2011-2014 Min Hur, The New York Times Company, <a href="https://github.com/minhur/bootstrap-toggle/blob/master/LICENSE" target="_blank">MIT License</a>
 567
 568                                                 <i class="fa fa-circle"></i> <a href="https://jamesflorentino.github.io/nanoScrollerJS/" target="_blank">NanoScroller</a>,
 569                                                 <i class="fa fa-copyright"></i> Copyright 2012, James Florentino, <a href="https://github.com/jamesflorentino/nanoScrollerJS/blob/master/LICENSE" target="_blank">MIT License</a>
 570
 571                                                 <i class="fa fa-circle"></i> <a href="https://github.com/marcj/css-element-queries" target="_blank">CSS Element Queries</a>,
 572                                                 <i class="fa fa-copyright"></i> Copyright Marc J. Schmidt, <a href="https://github.com/marcj/css-element-queries/blob/master/LICENSE" target="_blank">MIT License</a>
 573
 574                                                 <i class="fa fa-circle"></i> <a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">FontAwesome</a>,
 575                                                 <i class="fa fa-copyright"></i> Created by Dave Gandy, Font: <a href="http://scripts.sil.org/OFL" target="_blank">SIL OFL 1.1 License</a>, CSS: <a href="http://opensource.org/licenses/mit-license.html" target="_blank">MIT License</a>
 576
 577                                                 <i class="fa fa-circle"></i> <a href="http://www.iconsdb.com/soylent-red-icons/seo-performance-icon.html" target="_blank">IconsDB.com Icons</a>, Icons provided as CC0 1.0 Universal (CC0 1.0) Public Domain Dedication.
 578
 579                                                 <i class="fa fa-circle"></i> <a href="http://morrisjs.github.io/morris.js/" target="_blank">morris.js</a>,
 580                                                 <i class="fa fa-copyright"></i> Copyright 2013, Olly Smith, <a href="http://morrisjs.github.io/morris.js/" target="_blank">Simplified BSD License</a>
 581
 582                                                 <i class="fa fa-circle"></i> <a href="http://raphaeljs.com/" target="_blank">Raphaël</a>,
 583                                                 <i class="fa fa-copyright"></i> Copyright 2008, Dmitry Baranovskiy, <a href="http://raphaeljs.com/license.html" target="_blank">MIT License</a>
 584
 585                                                 <i class="fa fa-circle"></i> <a href="http://C3js.org/" target="_blank">C3</a>,
 586                                                 <i class="fa fa-copyright"></i> Copyright 2013, Masayuki Tanaka, <a href="https://github.com/masayuki0812/c3/blob/master/LICENSE" target="_blank">MIT License</a>
 587
 588                                                 <i class="fa fa-circle"></i> <a href="http://D3js.org/" target="_blank">D3</a>,
 589                                                 <i class="fa fa-copyright"></i> Copyright 2015, Mike Bostock, <a href="http://opensource.org/licenses/BSD-3-Clause" target="_blank">BSD License</a>
 590
 591                                         </small>
 592                                 </div>
 593                         </div>
 594                 </div>
 595         </div>
 596
 597         <div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="welcomeModalLabel">
 598                 <div class="modal-dialog modal-lg" role="document">
 599                         <div class="modal-content">
 600                                 <div class="modal-header">
 601                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 602                                         <h4 class="modal-title" id="welcomeModalLabel">Welcome!</h4>
 603                                 </div>
 604                                 <div class="modal-body">
 605                                                 <div class="p">
 606                                                 <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> is the fastest way to visualize metrics. It is a resource efficient, highly optimized system for collecting and visualizing any type of real-time time series data, from CPU usage, disk activity, SQL queries, API calls, web site visitors, etc.
 607                                                 </div>
 608                                                 <div class="p">
 609                                                 <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> tries to visualize the truth of <b>now</b>, in its <b>greatest detail</b>, so that you can get insights of what is happening now and what just happened, on your systems and applications.
 610                                                 </div>
 611                                                 <div class="p">
 612                                                 To make a chart in <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b>, you just need a <b>number</b>. Just a number you can read somehow. <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> will turn this number to a real time, interactive, web chart. For collecting these numbers, it supports <a href="https://github.com/firehol/netdata/wiki/External-Plugins" target="_blank">external plugins</a>, even <a href="https://github.com/firehol/netdata/wiki/General-Info---charts.d" target="_blank">shell</a> or <a href="https://github.com/firehol/netdata/wiki/General-Info---charts.d" target="_blank">node.js</a> plugins. Any computer program, in any language, that can print a few lines of text on its standard output, can be a netdata data collector.
 613                                                 </div>
 614                                                 <div class="p">
 615                                                 <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> can embed charts everywhere, like this one <div data-netdata="system.cpu" data-dimensions="system" data-after="-120" data-width="25%" data-height="15px" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-show-value-of-system-at="system.cpu.system.modal.1"></div> (my CPU system usage which is <span id="system.cpu.system.modal.1" style="display: inline-block; width: 40px; text-align: right;"></span>%),
 616                                                 or this one <div data-netdata="ipv4.tcppackets" data-dimensions="received" data-after="-120" data-width="25%" data-height="15px" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-show-value-of-received-at="ipv4.tcppackets.received.modal.1"></div> (my IPv4 received TCP packets, which are <span id="ipv4.tcppackets.received.modal.1" style="display: inline-block; width: 60px; text-align: right;"></span>/second).
 617                                                 </div>
 618                                                 <div class="p">
 619                                                 You can have <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> charts on your site too. Just give it a <code>div</code> and a real time chart, zoomable and draggable will appear (try it even on these tiny ones - <b>drag</b> them to pan horizontally, <b>shift + drag</b> to zoom in, on <b>chrome shift + mouse wheel</b> to zoom in/out, <b>double click</b> on them to reset them - don't be afraid of <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> performance - <a href="https://github.com/firehol/netdata/wiki/Performance" target="_blank">a raspberry pi 2 can sustain 300 charts updates per second</a>!).
 620                                                 </div>
 621                                                 <div class="p">
 622                                                 For more information please refer to the <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata wiki</a></b>.
 623                                                 </div>
 624                                 </div>
 625                                 <div class="modal-footer">
 626                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 627                                 </div>
 628                         </div>
 629                 </div>
 630         </div>
 631
 632         <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel">
 633                 <div class="modal-dialog modal-lg" role="document">
 634                         <div class="modal-content">
 635                                 <div class="modal-header">
 636                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 637                                         <h4 class="modal-title" id="helpModalLabel">Dashboard Help</h4>
 638                                 </div>
 639                                 <div class="modal-body">
 640
 641                                         <h4>Dygraphs (line, area and stacked area charts)</h4>
 642
 643                                         <!-- Nav tabs -->
 644                                         <ul class="nav nav-tabs" role="tablist">
 645                                                 <li role="presentation" class="active"><a href="#help_mouse" aria-controls="help_mouse" role="tab" data-toggle="tab">Mouse Interface</a></li>
 646                                                 <li role="presentation"><a href="#help_touch" aria-controls="help_touch" role="tab" data-toggle="tab">Touch Interface</a></li>
 647                                         </ul>
 648
 649                                         <!-- Tab panes -->
 650                                         <div class="tab-content">
 651                                                 <div role="tabpanel" class="tab-pane active" id="help_mouse">
 652                                                         <div class="p">
 653                                                                 <h4>Mouse Over / Hover</h4>
 654                                                                 Mouse over on a chart to show, at its legend, the values for the timestamp under the mouse (the chart will also highlight the point at the chart).
 655                                                                 <br/>
 656                                                                 All the other visible charts will also show and highlight their values for the same timestamp.
 657                                                         </div>
 658                                                         <hr/>
 659                                                         <div class="p">
 660                                                                 <h4>Drag Chart Contents</h4>
 661                                                                 Drag the contents of a chart to pan it horizontally.
 662                                                                 <br/>
 663                                                                 All the charts will follow soon after you let the chart alone (this little delay is by design: it speeds up your browser and lets you focus on what you are exploring).
 664                                                                 <br/>
 665                                                                 Once a chart is panned, auto refreshing stops for all charts. To enable it again, <b>double click</b> a panned chart.
 666                                                         </div>
 667                                                         <hr/>
 668                                                         <div class="p">
 669                                                                 <h4>Double Click</h4>
 670                                                                 Double Click a chart to reset all the charts to their default auto-refreshing state.
 671                                                         </div>
 672                                                         <hr/>
 673                                                         <div class="p">
 674                                                                 <h4>SHIFT + Drag</h4>
 675                                                                 While pressing the shift key, click on the contents of a chart and move the mouse to select an area, to zoom in. The other charts will follow too. Zooming is performed in two phases:
 676                                                                 <ul>
 677                                                                         <li>The already loaded chart contents are zoomed (low resolution)</li>
 678                                                                         <li>New data are transferred from the netdata server, to refresh the chart with possibly more detail.</li>
 679                                                                 </ul>
 680                                                                 Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, <b>double click</b> a zoomed chart.
 681                                                         </div>
 682                                                         <hr/>
 683                                                         <div class="p">
 684                                                                 <h4>SHIFT + Mouse Wheel <small>(does not work on firefox and IE/Edge)</small></h4>
 685                                                                 While pressing the shift key and the mouse pointer is over the contents of a chart, scroll the mouse wheel to zoom in or out. This kind of zooming is aligned to center below the mouse pointer. The other charts will follow too.
 686                                                                 <br/>
 687                                                                 Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, <b>double click</b> a zoomed chart.
 688                                                         </div>
 689                                                         <hr/>
 690                                                         <div class="p">
 691                                                                 <h4>Legend Operations</h4>
 692                                                                 Click on the label or value of a dimension, will select / un-select this dimension.
 693                                                                 <br/>
 694                                                                 You can press any of the SHIFT or CONTROL keys and then click on legend labels or values, to select / un-select multiple dimensions.
 695                                                         </div>
 696                                                 </div>
 697                                                 <div role="tabpanel" class="tab-pane" id="help_touch">
 698                                                         <div class="p">
 699                                                                 <h4>Single Tap</h4>
 700                                                                 Single Tap on the contents of a chart to show, at its legend, the values for the timestamp tapped (the chart will also highlight the point at the chart).
 701                                                                 <br/>
 702                                                                 All the other visible charts will also show and highlight their values for the same timestamp.
 703                                                         </div>
 704                                                         <hr/>
 705                                                         <div class="p">
 706                                                                 <h4>Drag Chart Contents</h4>
 707                                                                 Touch and Drag the contents of a chart to pan it horizontally.
 708                                                                 <br/>
 709                                                                 All the charts will follow soon after you let the chart alone (this little delay is by design: it speeds up your browser and lets you focus on what you are exploring).
 710                                                                 <br/>
 711                                                                 Once a chart is panned, auto refreshing stops for all charts. To enable it again, <b>double tap</b> a panned chart.
 712                                                         </div>
 713                                                         <hr/>
 714                                                         <div class="p">
 715                                                                 <h4>Double Tap</h4>
 716                                                                 Double tap a chart to reset all the charts to their default auto-refreshing state.
 717                                                         </div>
 718                                                         <hr/>
 719                                                         <div class="p">
 720                                                                 <h4>Zoom <small>(does not work on firefox and IE/Edge)</small></h4>
 721                                                                 With two fingers, zoom in or out.
 722                                                                 <br/>
 723                                                                 Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, <b>double click</b> a zoomed chart.
 724                                                         </div>
 725                                                         <hr/>
 726                                                         <div class="p">
 727                                                                 <h4>Legend Operations</h4>
 728                                                                 Tap on the label or value of a dimension, will select / un-select this dimension.
 729                                                         </div>
 730                                                 </div>
 731                                         </div>
 732                                 </div>
 733                                 <div class="modal-footer">
 734                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 735                                 </div>
 736                         </div>
 737                 </div>
 738         </div>
 739
 740         <div class="modal fade" id="optionsModal" tabindex="-1" role="dialog" aria-labelledby="optionsModalLabel">
 741                 <div class="modal-dialog modal-lg" role="document">
 742                         <div class="modal-content">
 743                                 <div class="modal-header">
 744                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 745                                         <h4 class="modal-title" id="optionsModalLabel">netdata dashboard options</h4>
 746                                 </div>
 747                                 <div class="modal-body">
 748                                         <center>
 749                                                 <small style="color: #BBBBBB;">These are browser settings. Each viewer has its own. They do not affect the operation of your netdata server.
 750                                                 <br/>
 751                                                 Settings take effect immediately and are saved permanently to browser local storage (except the refresh on focus / always option).
 752                                                 <br/>
 753                                                 To reset all options (including charts sizes) to their defaults, click <a href="#" onclick="resetDashboardOptions(); return false;">here</a>.</small>
 754                                         </center>
 755                                         <div style="padding: 10px;"></div>
 756
 757                                         <!-- Nav tabs -->
 758                                         <ul class="nav nav-tabs" role="tablist">
 759                                                 <li role="presentation" class="active"><a href="#settings_performance" aria-controls="settings_performance" role="tab" data-toggle="tab">Performance</a></li>
 760                                                 <li role="presentation"><a href="#settings_sync" aria-controls="settings_sync" role="tab" data-toggle="tab">Synchronization</a></li>
 761                                                 <li role="presentation"><a href="#settings_visual" aria-controls="settings_visual" role="tab" data-toggle="tab">Visual</a></li>
 762                                         </ul>
 763
 764                                         <!-- Tab panes -->
 765                                         <div class="tab-content">
 766                                                 <div role="tabpanel" class="tab-pane active" id="settings_performance">
 767                                                         <form id="optionsForm1" method="get" class="form-horizontal">
 768                                                                 <div class="form-group">
 769                                                                         <table>
 770                                                                         <tr class="option-row">
 771                                                                                 <td class="option-control"><input id="stop_updates_when_focus_is_lost" type="checkbox" checked data-toggle="toggle" data-offstyle="danger" data-onstyle="success" data-on="On Focus" data-off="Always" data-width="110px"></td>
 772                                                                                 <td class="option-info"><strong>When to refresh the charts?</strong><br/>
 773                                                                                         <small>When set to <b>On Focus</b>, the charts will stop being updated if the page / tab does not have the focus of the user. When set to <b>Always</b>, the charts will always be refreshed. Set it to <b>On Focus</b> it to lower the CPU requirements of the browser (and extend the battery of laptops and tablets) when this page does not have your focus. Set to <b>Always</b> to work on another window (i.e. change the settings of something) and have the charts auto-refresh in this window.</small>
 774                                                                                 </td>
 775                                                                                 </tr>
 776                                                                         <tr class="option-row">
 777                                                                                 <td class="option-control">
 778                                                                                 <input id="eliminate_zero_dimensions" type="checkbox" checked data-toggle="toggle" data-on="Non Zero" data-off="All" data-width="110px">
 779                                                                                 </td>
 780                                                                                 <td class="option-info"><strong>Which dimensions to show?</strong><br/>
 781                                                                                         <small>When set to <b>Non Zero</b>, dimensions that have all their values (within the current view) set to zero will not be transferred from the netdata server (except if all dimensions of the chart are zero, in which case this setting does nothing - all dimensions are transferred and shown). When set to <b>All</b>, all dimensions will always be shown. Set it to <b>Non Zero</b> to lower the data transferred between netdata and your browser, lower the CPU requirements of your browser (fewer lines to draw) and increase the focus on the legends (fewer entries at the legends).</small>
 782                                                                                 </td>
 783                                                                                 </tr>
 784                                                                         <tr class="option-row">
 785                                                                                 <td class="option-control"><input id="destroy_on_hide" type="checkbox" data-toggle="toggle" data-on="Destroy" data-off="Hide" data-width="110px"></td>
 786                                                                                 <td class="option-info"><strong>How to handle hidden charts?</strong><br/>
 787                                                                                         <small>When set to <b>Destroy</b>, charts that are not in the current viewport of the browser (are above, or below the visible area of the page), will be destroyed and re-created if and when they become visible again. When set to <b>Hide</b>, the not-visible charts will be just hidden, to simplify the DOM and speed up your browser. Set it to <b>Destroy</b>, to lower the memory requirements of your browser. Set it to <b>Hide</b> for smoother page scrolling.</small>
 788                                                                                 </td>
 789                                                                                 </tr>
 790                                                                         </table>
 791                                                                 </div>
 792                                                         </form>
 793                                                 </div>
 794                                                 <div role="tabpanel" class="tab-pane" id="settings_sync">
 795                                                         <form id="optionsForm2" method="get" class="form-horizontal">
 796                                                                 <div class="form-group">
 797                                                                         <table>
 798                                                                         <tr class="option-row">
 799                                                                                 <td class="option-control"><input id="parallel_refresher" type="checkbox" checked data-toggle="toggle" data-on="Parallel" data-off="Sequential" data-width="110px"></td>
 800                                                                                 <td class="option-info"><strong>Which chart refresh policy to use?</strong><br/>
 801                                                                                         <small>When set to <b>parallel</b>, visible charts are refreshed in parallel (all queries are sent to netdata server in parallel) and are rendered asynchronously. When set to <b>sequential</b> charts are refreshed one after another. Set it to parallel if your browser can cope with it (most modern browsers do), set it to sequential if you work on an older/slower computer.</small>
 802                                                                                 </td>
 803                                                                                 </tr>
 804                                                                         <tr class="option-row" id="concurrent_refreshes_row">
 805                                                                                 <td class="option-control"></td>
 806                                                                                 <td class="option-info">
 807                                                                                         <table>
 808                                                                                         <tr class="option-row">
 809                                                                                         <td class="option-control">
 810                                                                                         <input id="concurrent_refreshes" type="checkbox" checked data-toggle="toggle" data-on="Resync" data-off="Best Effort" data-width="110px">
 811                                                                                         </td>
 812                                                                                         <td class="option-info">
 813                                                                                         <strong>Shall we re-sync chart refreshes?</strong><br/>
 814                                                                                         <small>When set to <b>Resync</b>, the dashboard will attempt to re-synchronize all the charts so that they are refreshed concurrently. When set to <b>Best Effort</b>, each chart may be refreshed with a little time difference to the others. Normally, the dashboard starts refreshing them in parallel, but depending on the speed of your computer and the network latencies, charts start having a slight time difference. Setting this to <b>Resync</b> will attempt to re-synchronize the charts on every update. Setting it to <b>Best Effort</b> may lower the pressure on your browser and the network.</small>
 815                                                                                         </td>
 816                                                                                         </tr>
 817                                                                                         </table>
 818                                                                                 </td>
 819                                                                                 </tr>
 820                                                                         <tr class="option-row">
 821                                                                                 <td class="option-control"><input id="sync_selection" type="checkbox" checked data-toggle="toggle" data-on="Sync" data-off="Don't Sync" data-onstyle="success" data-offstyle="danger" data-width="110px"></td>
 822                                                                                 <td class="option-info"><strong>Sync hover selection on all charts?</strong><br/>
 823                                                                                         <small>When enabled, a selection on one chart will automatically select the same time on all other visible charts and the legends of all visible charts will be updated to show the selected values. When disabled, only the chart getting the user's attention will be selected. Enable it to get better insights of the data. Disable it if you are on a very slow computer that cannot actually do it.</small>
 824                                                                                 </td>
 825                                                                                 </tr>
 826                                                                         <tr class="option-row">
 827                                                                                 <td class="option-control"><input id="sync_pan_and_zoom" type="checkbox" checked data-toggle="toggle"  data-on="Sync" data-off="Don't Sync" data-onstyle="success" data-offstyle="danger" data-width="110px"></td>
 828                                                                                 <td class="option-info"><strong>Sync pan and zoom on all charts?</strong><br/>
 829                                                                                         <small>When enabled, pan and zoom operations on a chart will be replicated to all charts (even the ones that are not currently visible - of course only when they will become visible). When disabled, pan and zoom operations will not be propagated to other charts.</small>
 830                                                                                 </td>
 831                                                                                 </tr>
 832                                                                         </table>
 833                                                                 </div>
 834                                                         </form>
 835                                                 </div>
 836                                                 <div role="tabpanel" class="tab-pane" id="settings_visual">
 837                                                         <form id="optionsForm3" method="get" class="form-horizontal">
 838                                                                 <div class="form-group">
 839                                                                         <table>
 840                                                                         <tr class="option-row">
 841                                                                                 <td class="option-control"><input id="netdata_theme_control" type="checkbox" checked data-toggle="toggle" data-offstyle="danger" data-onstyle="success" data-on="Dark" data-off="White" data-width="110px"></td>
 842                                                                                 <td class="option-info"><strong>Which theme to use?</strong><br/>
 843                                                                                         <small>Netdata comes with two themes: <b>Dark</b> (the default) and <b>White</b>.
 844                                                                                         <br/>
 845                                                                                         <b>Switching this will reload the dashboard</b>.
 846                                                                                         </small>
 847                                                                                 </td>
 848                                                                                 </tr>
 849                                                                         <tr class="option-row">
 850                                                                                 <td class="option-control"><input id="show_help" type="checkbox" checked data-toggle="toggle" data-on="Help Me" data-off="No Help" data-width="110px"></td>
 851                                                                                 <td class="option-info"><strong>Do you need help?</strong><br/>
 852                                                                                         <small>Netdata can show some help in some areas to help you use the dashboard. If all these balloons bother you, disable them using this switch.
 853                                                                                         <br/>
 854                                                                                         <b>Switching this will reload the dashboard</b>.
 855                                                                                         </small>
 856                                                                                 </td>
 857                                                                                 </tr>
 858                                                                         <tr class="option-row">
 859                                                                                 <td class="option-control"><input id="pan_and_zoom_data_padding" type="checkbox" checked data-toggle="toggle"  data-on="Pad" data-off="Don't Pad" data-width="110px"></td>
 860                                                                                 <td class="option-info"><strong>Enable data padding when panning and zooming?</strong><br/>
 861                                                                                         <small>When set to <b>Pad</b> the charts will be padded with more data, both before and after the visible area, thus giving the impression the whole database is loaded. This padding will happen only after the first pan or zoom operation on the chart (initially all charts have only the visible data). When set to <b>Don't Pad</b> only the visible data will be transfered from the netdata server, even after the first pan and zoom operation.</small>
 862                                                                                 </td>
 863                                                                                 </tr>
 864                                                                         <tr class="option-row">
 865                                                                                 <td class="option-control"><input id="smooth_plot" type="checkbox" checked data-toggle="toggle"  data-on="Smooth" data-off="Rough" data-width="110px"></td>
 866                                                                                 <td class="option-info"><strong>Enable Bézier lines on charts?</strong><br/>
 867                                                                                         <small>When set to <b>Smooth</b> the charts libraries that support it, will plot smooth curves instead of simple straight lines to connect the points.
 868                                                                                         <br/>
 869                                                                                         Keep in mind <a href="http://dygraphs.com" target="_blank">dygraphs</a>, the main charting library in netdata dashboards, can only smooth line charts. It cannot smooth area or stacked charts. When set to <b>Rough</b>, this setting can lower the CPU resources consumed by your browser.</small>
 870                                                                                 </td>
 871                                                                                 </tr>
 872                                                                         </table>
 873                                                                 </div>
 874                                                         </form>
 875                                                 </div>
 876                                         </div>
 877                                 </div>
 878                                 <div class="modal-footer">
 879                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 880                                 </div>
 881                         </div>
 882                 </div>
 883         </div>
 884
 885
 886         <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
 887                 <div class="modal-dialog" role="document">
 888                         <div class="modal-content">
 889                                 <div class="modal-header">
 890                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 891                                         <h4 class="modal-title" id="updateModalLabel">Update Check</h4>
 892                                 </div>
 893                                 <div class="modal-body">
 894                                         Your netdata version: <b><code><span id="netdataVersion">Unknown</span></code></b>
 895                                         <br/>
 896                                         <div style="padding: 10px;"></div>
 897                                         <div id="versionCheckLog">Not checked yet. Please press the Check Now button.</div>
 898                                 </div>
 899                                 <div class="modal-footer">
 900                                         <a href="#" onclick="notifyForUpdate(true); return false;" type="button" class="btn btn-default">Check Now</a>
 901                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 902                                 </div>
 903                         </div>
 904                 </div>
 905         </div>
 906
 907         <div class="modal fade" id="deleteRegistryModal" tabindex="-1" role="dialog" aria-labelledby="deleteRegistryModalLabel">
 908                 <div class="modal-dialog" role="document">
 909                         <div class="modal-content">
 910                                 <div class="modal-header">
 911                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 912                                         <h4 class="modal-title" id="deleteRegistryModalLabel">Delete <span id="deleteRegistryServerName"></span>?</h4>
 913                                 </div>
 914                                 <div class="modal-body">
 915                                         You are about to delete, from your personal list of netdata servers, the following server:
 916                                         <p style="text-align: center; padding-top: 10px; padding-bottom: 10px; line-height: 2;">
 917                                         <b><span id="deleteRegistryServerName2"></span></b>
 918                                         <br/>
 919                                         <b><span id="deleteRegistryServerURL"></span></b>
 920                                         </p>
 921                                         Are you sure you want to do this?
 922                                         <br/>
 923                                         <div style="padding: 10px;"></div>
 924                                         <small>Keep in mind, this server will be added back if and when you visit it again.</small>
 925                                         <br/>
 926                                         <div id="deleteRegistryResponse" style="display: block; width: 100%; text-align: center; padding-top: 20px;"></div>
 927                                 </div>
 928                                 <div class="modal-footer">
 929                                         <button type="button" class="btn btn-success" data-dismiss="modal">keep it</button>
 930                                         <a href="#" onclick="notifyForDeleteRegistry(true); return false;" type="button" class="btn btn-danger">delete it</a>
 931                                 </div>
 932                         </div>
 933                 </div>
 934         </div>
 935
 936         <div class="modal fade" id="switchRegistryModal" tabindex="-1" role="dialog" aria-labelledby="switchRegistryModalLabel">
 937                 <div class="modal-dialog" role="document">
 938                         <div class="modal-content">
 939                                 <div class="modal-header">
 940                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 941                                         <h4 class="modal-title" id="switchRegistryModalLabel">Switch Netdata Registry Identity</h4>
 942                                 </div>
 943                                 <div class="modal-body">
 944                                         You can copy and paste the following ID to all your browsers (e.g. work and home).
 945                                         <br/>
 946                                         All the browsers with the same ID will identify <b>you</b>, so please don't share this with others.
 947                                         <p style="text-align: center; padding-top: 10px; padding-bottom: 10px; line-height: 2;">
 948                                         <form action="#">
 949                                         <input type="text" class="form-control" id="switchRegistryPersonGUID" placeholder="your personal ID" maxlength="36" autocomplete="off" style="text-align: center; font-size: 1.4em;">
 950                                         </form>
 951                                         </p>
 952                                         Either copy this ID and paste it to another browser, or paste here the ID you have taken from another browser.
 953                                         <p style="padding-top: 10px;"><small>
 954                                                 Keep in mind that:
 955                                                 <ul>
 956                                                         <li>when you switch ID, your previous ID will be lost forever - this is irreversible.</li>
 957                                                         <li>both IDs (your old and the new) must list this netdata at their personal lists.</li>
 958                                                         <li>both IDs have to be known by the registry: <b><span id="switchRegistryURL"></span></b>.</li>
 959                                                         <li>to get a new ID, just clear your browser cookies.</li>
 960                                                 </ul>
 961                                         </small></p>
 962                                         <div id="switchRegistryResponse" style="display: block; width: 100%; text-align: center; padding-top: 20px;"></div>
 963                                 </div>
 964                                 <div class="modal-footer">
 965                                         <button type="button" class="btn btn-success" data-dismiss="modal">cancel</button>
 966                                         <a href="#" onclick="notifyForSwitchRegistry(true); return false;" type="button" class="btn btn-danger">impersonate</a>
 967                                 </div>
 968                         </div>
 969                 </div>
 970         </div>
 971
 972         <div class="modal fade" id="gotoServerModal" tabindex="-1" role="dialog" aria-labelledby="gotoServerModalLabel">
 973                 <div class="modal-dialog" role="document">
 974                         <div class="modal-content">
 975                                 <div class="modal-header">
 976                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 977                                         <h4 class="modal-title" id="gotoServerModalLabel"><span id="gotoServerName"></span></h4>
 978                                 </div>
 979                                 <div class="modal-body">
 980                                         Checking known URLs for this server...
 981                                         <div  style="padding-top: 20px;">
 982                                                 <table id="gotoServerList">
 983                                                 </table>
 984                                         </div>
 985                                         <p style="padding-top: 10px;"><small>
 986                                                 Checks may fail if you are viewing an HTTPS page and the server to be checked is HTTP only.
 987                                         </small></p>
 988                                         <div id="gotoServerResponse" style="display: block; width: 100%; text-align: center; padding-top: 20px;"></div>
 989                                 </div>
 990                                 <div class="modal-footer">
 991                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 992                                 </div>
 993                         </div>
 994                 </div>
 995         </div>
 996
 997 <script>
 998 var this_is_demo = null;
 999 function isdemo() {
1000         if(this_is_demo !== null) return this_is_demo;
1001         this_is_demo = false;
1002
1003         try {
1004                 if(typeof document.location.hostname === 'string') {
1005                         if(document.location.hostname.endsWith('.my-netdata.io') ||
1006                                         document.location.hostname.endsWith('.mynetdata.io') ||
1007                                         document.location.hostname.endsWith('.netdata.rocks') ||
1008                                         document.location.hostname.endsWith('.firehol.org') ||
1009                                         document.location.hostname.endsWith('.netdata.online'))
1010                                         this_is_demo = true;
1011                 }
1012         }
1013         catch(error) {
1014                 ;
1015         }
1016
1017         return this_is_demo;
1018 }
1019
1020 if(isdemo()) {
1021         document.getElementById('masthead').style.display = 'block';
1022 }
1023 var gotoServerValidateRemaining = 0;
1024 var gotoServerMiddleClick = false;
1025 var gotoServerStop = false;
1026 function gotoServerValidateUrl(id, guid, url) {
1027         var penaldy = 0;
1028         if(document.location.toString().startsWith('http://') && url.toString().startsWith('https://'))
1029                         // we penalize https only if the current url is http
1030                         // to allow the user walk through all its servers.
1031                         penaldy = 500;
1032
1033         setTimeout(function() {
1034                 document.getElementById('gotoServerList').innerHTML += '<tr><td style="padding-left: 20px;"><a href="' + url + '" target="_blank">' + url + '</a></td><td style="padding-left: 30px;"><code id="' + guid + '-' + id + '-status">checking...</code></td></tr>';
1035
1036                 NETDATA.registry.hello(url, function(data) {
1037                         if (data) {
1038                                 // console.log('OK ' + id + ' URL: ' + url);
1039                                 document.getElementById(guid + '-' + id + '-status').innerHTML = "OK";
1040                                 var hash = document.location.hash || '';
1041
1042                                 if(!gotoServerStop) {
1043                                         gotoServerStop = true;
1044
1045                                         if(gotoServerMiddleClick) {
1046                                                 window.open(url + hash, '_blank');
1047                                                 gotoServerMiddleClick = false;
1048                                                 document.getElementById('gotoServerResponse').innerHTML = '<b>Opening new window to ' + NETDATA.registry.machines[guid].name + '<br/><a href="' + url + hash + '">' + url + hash + '</a></b><br/>(check your pop-up blocker if it fails)';
1049                                         }
1050                                         else
1051                                                 document.location = url + hash;
1052                                 }
1053                         }
1054                         else {
1055                                 document.getElementById(guid + '-' + id + '-status').innerHTML = "failed!";
1056                                 gotoServerValidateRemaining--;
1057                                 if(gotoServerValidateRemaining <= 0) {
1058                                         gotoServerMiddleClick = false;
1059                                         document.getElementById('gotoServerResponse').innerHTML = '<b>Sorry! I cannot find any operational URL for this server</b>';
1060                                 }
1061                         }
1062                 });
1063         }, (id * 50) + penaldy);
1064 }
1065
1066 function gotoServerModalHandler(guid) {
1067         // console.log('goto server: ' + guid);
1068
1069         gotoServerStop = false;
1070         var len = NETDATA.registry.machines[guid].alternate_urls.length;
1071
1072         document.getElementById('gotoServerResponse').innerHTML = '';
1073         document.getElementById('gotoServerList').innerHTML = '';
1074         document.getElementById('gotoServerName').innerHTML = NETDATA.registry.machines[guid].name;
1075         $('#gotoServerModal').modal('show');
1076
1077         gotoServerValidateRemaining = len;
1078         while(len--)
1079                 gotoServerValidateUrl(len, guid, NETDATA.registry.machines[guid].alternate_urls[len]);
1080
1081         return false;
1082 }
1083
1084 function gotoServerInit() {
1085         $(".registry_link").on('click', function(e) {
1086                 if(e.which == 2) {
1087                         e.preventDefault();
1088                         gotoServerMiddleClick = true;
1089                 }
1090                 else
1091                         gotoServerMiddleClick = false;
1092         });
1093 }
1094
1095 function switchRegistryModalHandler() {
1096         document.getElementById('switchRegistryPersonGUID').value = NETDATA.registry.person_guid;
1097         document.getElementById('switchRegistryURL').innerHTML = NETDATA.registry.server;
1098         document.getElementById('switchRegistryResponse').innerHTML = '';
1099         $('#switchRegistryModal').modal('show');
1100 }
1101
1102 function notifyForSwitchRegistry() {
1103         var n = document.getElementById('switchRegistryPersonGUID').value;
1104
1105         if(n !== '' && n.length === 36) {
1106                 NETDATA.registry.switch(n, function(result) {
1107                         if(result !== null) {
1108                                 $('#switchRegistryModal').modal('hide');
1109                                 NETDATA.registry.init();
1110                         }
1111                         else {
1112                                 document.getElementById('switchRegistryResponse').innerHTML = "<b>Sorry! The registry rejected your request.</b>";
1113                         }
1114                 });
1115         }
1116         else
1117                 document.getElementById('switchRegistryResponse').innerHTML = "<b>The ID you have entered is not a GUID.</b>";
1118 }
1119
1120 var deleteRegistryUrl = null;
1121 function deleteRegistryModalHandler(guid, name, url) {
1122         deleteRegistryUrl = url;
1123         document.getElementById('deleteRegistryServerName').innerHTML = name;
1124         document.getElementById('deleteRegistryServerName2').innerHTML = name;
1125         document.getElementById('deleteRegistryServerURL').innerHTML = url;
1126         document.getElementById('deleteRegistryResponse').innerHTML = '';
1127         $('#deleteRegistryModal').modal('show');
1128 }
1129
1130 function notifyForDeleteRegistry() {
1131         if(deleteRegistryUrl) {
1132                 NETDATA.registry.delete(deleteRegistryUrl, function(result) {
1133                         if(result !== null) {
1134                                 deleteRegistryUrl = null;
1135                                 $('#deleteRegistryModal').modal('hide');
1136                                 NETDATA.registry.init();
1137                         }
1138                         else {
1139                                 document.getElementById('deleteRegistryResponse').innerHTML = "<b>Sorry! this command was rejected by the registry server.</b>";
1140                         }
1141                 });
1142         }
1143 }
1144
1145 var options = {
1146         sparklines_registry: {},
1147         submenu_names: {},
1148         data: null,
1149         hostname: 'netdata_server', // will be overwritten by the netdata server
1150         categories: new Array(),
1151         categories_idx: {},
1152         families: new Array(),
1153         families_idx: {},
1154
1155         chartsPerRow: 0,
1156         chartsMinWidth: 1450,
1157         chartsHeight: 180,
1158         sparklinesHeight: 60,
1159 };
1160
1161 // generate a sparkline
1162 // used in the documentation
1163 function sparkline(chart, dimension, units) {
1164         var key = chart + '.' + dimension;
1165
1166         if(typeof units === 'undefined')
1167                 units = '';
1168
1169         if(typeof options.sparklines_registry[key] === 'undefined')
1170                 options.sparklines_registry[key] = { count: 1 };
1171         else
1172                 options.sparklines_registry[key].count++;
1173
1174         key = key + '.' + options.sparklines_registry[key].count;
1175
1176         var h = '<div data-netdata="' + chart + '" data-after="-120" data-width="25%" data-height="15px" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dimensions="' + dimension + '" data-show-value-of-' + dimension + '-at="' + key + '"></div> (<span id="' + key + '" style="display: inline-block; min-width: 50px; text-align: right;">X</span>' + units + ')';
1177
1178         return h;
1179 }
1180
1181 function chartsPerRow(total) {
1182         if(options.chartsPerRow === 0) {
1183                 width = Math.floor(total / options.chartsMinWidth);
1184                 if(width === 0) width = 1;
1185                 return width;
1186         }
1187         else return options.chartsPerRow;
1188 }
1189
1190 function prioritySort(a, b) {
1191         if(a.priority < b.priority) return -1;
1192         if(a.priority > b.priority) return 1;
1193         if(a.name < b.name) return -1;
1194         return 1;
1195 }
1196
1197 function sortObjectByPriority(object) {
1198         var idx = {};
1199         var sorted = new Array();
1200
1201         for(var i in object) {
1202                 if(typeof idx[i] === 'undefined') {
1203                         idx[i] = object[i];
1204                         sorted.push(i);
1205                 }
1206         }
1207
1208         sorted.sort(function(a, b) {
1209                 if(idx[a].priority < idx[b].priority) return -1;
1210                 if(idx[a].priority > idx[b].priority) return 1;
1211                 if(a < b) return -1;
1212                 return 1;
1213         });
1214
1215         return sorted;
1216 }
1217
1218
1219 // ----------------------------------------------------------------------------
1220 // scroll to a section, without changing the browser history
1221
1222 function scrollToId(hash) {
1223         if(hash && hash != '') {
1224                 var offset = $('#' + hash).offset();
1225                 if(typeof offset !== 'undefined')
1226                         $('html, body').animate({ scrollTop: offset.top }, 0);
1227         }
1228
1229         // we must return false to prevent the default action
1230         return false;
1231 }
1232
1233 // ----------------------------------------------------------------------------
1234
1235 function gaugeChart(title, width, dimensions, colors) {
1236         if(typeof colors === 'undefined')
1237                 colors = '';
1238
1239         if(typeof dimensions === 'undefined')
1240                 dimensions = '';
1241
1242         return '<div data-netdata="CHART_UNIQUE_ID"'
1243                                                         + ' data-dimensions="' + dimensions + '"'
1244                                                         + ' data-chart-library="gauge"'
1245                                                         + ' data-gauge-adjust="width"'
1246                                                         + ' data-title="' + title + '"'
1247                                                         + ' data-width="' + width + '"'
1248                                                         + ' data-before="0"'
1249                                                         + ' data-after="-CHART_DURATION"'
1250                                                         + ' data-points="CHART_DURATION"'
1251                                                         + ' data-colors="' + colors + '"'
1252                                                         + ' role="application"></div>';
1253 }
1254
1255 // ----------------------------------------------------------------------------
1256
1257 var menuData = {
1258         'system': {
1259                 title: 'System Overview',
1260                 info: 'Overview of the key system metrics.'
1261         },
1262
1263         'ap': {
1264                 title: 'Access Points',
1265                 info: undefined
1266         },
1267
1268         'tc': {
1269                 title: 'Quality of Service',
1270                 info: 'Netdata collects and visualizes tc class utilization using its <a href="https://github.com/firehol/netdata/blob/master/plugins.d/tc-qos-helper.sh" target="_blank">tc-helper plugin</a>. If you also use <a href="http://firehol.org/#fireqos" target="_blank">FireQOS</a> for setting up QoS, netdata automatically collects interface and class names. If your QoS configuration includes overheads calculation, the values shown here will include these overheads (the total bandwidth for the same interface as reported in the Network Interfaces section, will be lower than the total bandwidth reported here). Also, data collection may have a slight time difference compared to the interface (QoS data collection is implemented with a BASH script, so a shift in data collection of a few milliseconds should be justified).'
1271         },
1272
1273         'net': {
1274                 title: 'Network Interfaces',
1275                 info: 'Per network interface statistics collected from <code>/proc/net/dev</code>.'
1276         },
1277
1278         'ipv4': {
1279                 title: 'IPv4 Networking',
1280                 info: undefined
1281         },
1282
1283         'ipv6': {
1284                 title: 'IPv6 Networking',
1285                 info: undefined
1286         },
1287
1288         'ipvs': {
1289                 title: 'IP Virtual Server',
1290                 info: undefined
1291         },
1292
1293         'netfilter': {
1294                 title: 'Firewall (netfilter)',
1295                 info: undefined
1296         },
1297
1298         'cpu': {
1299                 title: 'CPUs',
1300                 info: undefined
1301         },
1302
1303         'mem': {
1304                 title: 'Memory',
1305                 info: undefined
1306         },
1307
1308         'disk': {
1309                 title: 'Disks',
1310                 info: 'Charts with performance information for all the system disks. Special care has been given to present disk performance metrics in a way compatible with <code>iostat -x</code>. netdata by default prevents rendering performance charts for individual partitions and unmounted virtual disks. Disabled charts can still be enabled by altering the relative settings in the netdata configuration file.'
1311         },
1312
1313         'sensors': {
1314                 title: 'Sensors',
1315                 info: undefined
1316         },
1317
1318         'nfsd': {
1319                 title: 'File Server (nfsd)',
1320                 info: undefined
1321         },
1322
1323         'apps': {
1324                 title: 'Applications',
1325                 info: 'Per application statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics for applications of interest, defined in <code>/etc/netdata/apps_groups.conf</code> (the default is <a href="https://github.com/firehol/netdata/blob/master/conf.d/apps_groups.conf" target="_blank">here</a>). The plugin internally builds a process tree (much like <code>ps fax</code> does), and groups processes together (evaluating both child and parent processes) so that the result is always a chart with a predefined set of dimensions (of course, only application groups found running are reported).<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning children continuously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited children of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealistic utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
1326                 height: 1.5
1327         },
1328
1329         'users': {
1330                 title: 'Users',
1331                 info: 'Per user statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics per user.<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning children continuously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited children of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealistic utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
1332                 height: 1.5
1333         },
1334
1335         'groups': {
1336                 title: 'User Groups',
1337                 info: 'Per user group statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics per user group.<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning children continuously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited children of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealistic utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
1338                 height: 1.5
1339         },
1340
1341         'netdata': {
1342                 title: 'Netdata Monitoring',
1343                 info: undefined
1344         },
1345
1346         'example': {
1347                 title: 'Example Charts',
1348                 info: undefined
1349         },
1350
1351         'cgroup': {
1352                 title: 'Container',
1353                 info: undefined
1354         },
1355
1356         'mysql': {
1357                 title: 'MySQL',
1358                 info: undefined
1359         },
1360
1361         'named': {
1362                 title: 'named',
1363                 info: undefined
1364         },
1365 };
1366
1367 var submenuData = {
1368         'mem.ksm': {
1369                 title: 'Memory Deduper',
1370                 info: 'Kernel Same-page Merging (KSM) performance monitoring, read from several files in <code>/sys/kernel/mm/ksm/</code>. KSM is a memory-saving de-duplication feature in the Linux kernel (since version 2.6.32). The KSM daemon ksmd periodically scans those areas of user memory which have been registered with it, looking for pages of identical content which can be replaced by a single write-protected page (which is automatically copied if a process later wants to update its content). KSM was originally developed for use with KVM (where it was known as Kernel Shared Memory), to fit more virtual machines into physical memory, by sharing the data common between them.  But it can be useful to any application which generates many instances of the same data.'
1371         },
1372
1373         'netfilter.conntrack': {
1374                 title: 'Connection Tracker',
1375                 info: 'Netfilter Connection Tracker performance monitoring, read from <code>/proc/net/stat/nf_conntrack</code>. The connection tracker keeps track of all connections of the machine, inbound and outbound. It works by keeping a database with all open connections, tracking network and address translation and connection expectations.'
1376         },
1377
1378         'netfilter.nfacct': {
1379                 title: 'Bandwidth Accounting',
1380                 info: 'The following information is read using the <code>nfacct.plugin</code>.'
1381         },
1382
1383         'netfilter.synproxy': {
1384                 title: 'DDoS Protection',
1385                 info: 'DDoS Protection performance monitoring read from <code>/proc/net/stat/synproxy</code>. <a href="https://github.com/firehol/firehol/wiki/Working-with-SYNPROXY" target="_blank">SYNPROXY</a> is a TCP SYN packets proxy. It is used to protect any TCP server (like a web server) from SYN floods and similar DDoS attacks. It is a netfilter module, in the Linux kernel (since version 3.12). It is optimized to handle millions of packets per second utilizing all CPUs available without any concurrency locking between the connections. It can be used for any kind of TCP traffic (even encrypted), since it does not interfere with the content itself.'
1386         }
1387 };
1388
1389 var chartData = {
1390         'mysql.net': {
1391                 info: 'The amount of data sent to mysql clients (<strong>out</strong>) and received from mysql clients (<strong>in</strong>).'
1392         },
1393
1394         'mysql.queries': {
1395                 info: 'The number of statements executed by the server.<ul>' +
1396                 '<li><strong>queries</strong> counts the statements executed within stored SQL programs.</li>' +
1397                 '<li><strong>questions</strong> counts the statements sent to the mysql server by mysql clients.</li>' +
1398                 '<li><strong>slow queries</strong> counts the number of statements that took more than <a href="http://dev.mysql.com/doc/refman/5.7/en/server-system-variables.html#sysvar_long_query_time" target="_blank">long_query_time</a> seconds to be executed.' +
1399                 ' For more information about slow queries check the mysql <a href="http://dev.mysql.com/doc/refman/5.7/en/slow-query-log.html" target="_blank">slow query log</a>.</li>' +
1400                 '</ul>'
1401         },
1402
1403         'mysql.handlers': {
1404                 info: 'Usage of the internal handlers of mysql. This chart provides very good insights of what the mysql server is actually doing.' +
1405                 ' (if the chart is not showing all these dimensions it is because they are zero - set <strong>Which dimensions to show?</strong> to <strong>All</strong> from the dashboard settings, to render even the zero values)<ul>' +
1406                 '<li><strong>commit</strong>, the number of internal <a href="http://dev.mysql.com/doc/refman/5.7/en/commit.html" target="_blank">COMMIT</a> statements.</li>' +
1407                 '<li><strong>delete</strong>, the number of times that rows have been deleted from tables.</li>' +
1408                 '<li><strong>prepare</strong>, a counter for the prepare phase of two-phase commit operations.</li>' +
1409                 '<li><strong>read first</strong>, the number of times the first entry in an index was read. A high value suggests that the server is doing a lot of full index scans; e.g. <strong>SELECT col1 FROM foo</strong>, with col1 indexed.</li>' +
1410                 '<li><strong>read key</strong>, the number of requests to read a row based on a key. If this value is high, it is a good indication that your tables are properly indexed for your queries.</li>' +
1411                 '<li><strong>read next</strong>, the number of requests to read the next row in key order. This value is incremented if you are querying an index column with a range constraint or if you are doing an index scan.</li>' +
1412                 '<li><strong>read prev</strong>, the number of requests to read the previous row in key order. This read method is mainly used to optimize <strong>ORDER BY ... DESC</strong>.</li>' +
1413                 '<li><strong>read rnd</strong>, the number of requests to read a row based on a fixed position. A high value indicates you are doing a lot of queries that require sorting of the result. You probably have a lot of queries that require MySQL to scan entire tables or you have joins that do not use keys properly.</li>' +
1414                 '<li><strong>read rnd next</strong>, the number of requests to read the next row in the data file. This value is high if you are doing a lot of table scans. Generally this suggests that your tables are not properly indexed or that your queries are not written to take advantage of the indexes you have.</li>' +
1415                 '<li><strong>rollback</strong>, the number of requests for a storage engine to perform a rollback operation.</li>' +
1416                 '<li><strong>savepoint</strong>, the number of requests for a storage engine to place a savepoint.</li>' +
1417                 '<li><strong>savepoint rollback</strong>, the number of requests for a storage engine to roll back to a savepoint.</li>' +
1418                 '<li><strong>update</strong>, the number of requests to update a row in a table.</li>' +
1419                 '<li><strong>write</strong>, the number of requests to insert a row in a table.</li>' +
1420                 '</ul>'
1421         },
1422
1423         'mysql.table_locks': {
1424                 info: 'MySQL table locks counters: <ul>' +
1425                 '<li><strong>immediate</strong>, the number of times that a request for a table lock could be granted immediately.</li>' +
1426                 '<li><strong>waited</strong>, the number of times that a request for a table lock could not be granted immediately and a wait was needed. If this is high and you have performance problems, you should first optimize your queries, and then either split your table or tables or use replication.</li>' +
1427                 '</ul>'
1428         },
1429
1430         'system.cpu': {
1431                 info: 'Total CPU utilization (all cores). 100% here means there is no CPU idle time at all. You can get per core usage at the <a href="#cpu">CPUs</a> section and per application usage at the <a href="#apps">Applications Monitoring</a> section.<br/>Keep an eye on <b>iowait</b> ' + sparkline('system.cpu', 'iowait', '%') + '. If it is constantly high, your disks are a bottleneck and they slow your system down.<br/>Another important metric worth monitoring, is <b>softirq</b> ' + sparkline('system.cpu', 'softirq', '%') + '. A constantly high percentage of softirq may indicate network drivers issues.'
1432         },
1433
1434         'system.load': {
1435                 info: 'Current system load read from <code>/proc/loadavg</code>.',
1436                 height: 0.7
1437         },
1438
1439         'system.io': {
1440                 info: 'Total Disk I/O, for all disks, read from <code>/proc/vmstat</code>. You can get detailed information about each disk at the <a href="#disk">Disks</a> section and per application Disk usage at the <a href="#apps">Applications Monitoring</a> section.'
1441         },
1442
1443         'system.swapio': {
1444                 info: 'Total Swap I/O, read from <code>/proc/vmstat</code>. (netdata measures both <code>in</code> and <code>out</code>. If either of them is not shown in the chart, it is because it is zero - you can change the page settings to always render all the available dimensions on all charts).'
1445         },
1446
1447         'system.pgfaults': {
1448                 info: 'Total page faults, read from <code>/proc/vmstat</code>. <b>Major page faults</b> indicates that the system is using its swap. You can find which applications use the swap at the <a href="#apps">Applications Monitoring</a> section.'
1449         },
1450
1451         'system.entropy': {
1452                 colors: '#CC22AA',
1453                 info: '<a href="https://en.wikipedia.org/wiki/Entropy_(computing)" target="_blank">Entropy</a>, read from <code>/proc/sys/kernel/random/entropy_avail</code>, is like a pool of random numbers that are mainly used in cryptography. It is advised that the pool remains always <a href="https://blog.cloudflare.com/ensuring-randomness-with-linuxs-random-number-generator/" target="_blank">above 200</a>. If the pool of entropy gets empty, you risk your security to be predictable and you should install a user-space random numbers generating daemon, like <a href="http://www.issihosts.com/haveged/" target="_blank">haveged</a>, to keep the pool in healthy levels.'
1454         },
1455
1456         'system.forks': {
1457                 colors: '#5555DD',
1458                 info: 'The number of new processes created per second, read from <code>/proc/stat</code>.'
1459         },
1460
1461         'system.intr': {
1462                 colors: '#DD5555',
1463                 info: 'Total number of CPU interrupts, read from <code>/proc/stat</code>. Check <code>system.interrupts</code> that gives more detail about each interrupt and also the <a href="#cpu">CPUs</a> section where interrupts are analyzed per CPU core.'
1464         },
1465
1466         'system.interrupts': {
1467                 info: 'CPU interrupts in detail, read from <code>/proc/interrupts</code>. At the <a href="#cpu">CPUs</a> section, interrupts are analyzed per CPU core.'
1468         },
1469
1470         'system.softirqs': {
1471                 info: 'CPU softirqs in detail, read from <code>/proc/softirqs</code>. At the <a href="#cpu">CPUs</a> section, softirqs are analyzed per CPU core.'
1472         },
1473
1474         'system.processes': {
1475                 info: 'System processes, read from <code>/proc/stat</code>. <b>Blocked</b> are processes that are willing to execute but they cannot, e.g. because they wait for disk activity.'
1476         },
1477
1478         'system.active_processes': {
1479                 info: 'All system active processes, read from <code>/proc/loadavg</code>.'
1480         },
1481
1482         'system.ctxt': {
1483                 info: '<a href="https://en.wikipedia.org/wiki/Context_switch" target="_blank">Context Switches</a>, read from <code>/proc/stat</code>, is the switching of the CPU from one process, task or thread to another. If there are many processes or threads willing to execute and very few CPU cores available to handle them, the system is making more context switching to balance the CPU resources among them. The whole process is computationally intensive. The more the context switches, the slower the system gets.'
1484         },
1485
1486         'system.idlejitter': {
1487                 colors: '#5555AA',
1488                 info: 'Idle jitter is calculated by netdata. A thread is spawned that requests to sleep for a few microseconds. When the system wakes it up, it measures how many microseconds have passed. The difference between the requested and the actual duration of the sleep, is the <b>idle jitter</b>. This number is useful in real-time environments, where CPU jitter can affect the quality of the service (like VoIP media gateways).'
1489         },
1490
1491         'system.ipv4': {
1492                 info: 'Total IPv4 Traffic, read from <code>/proc/net/netstat</code>.'
1493         },
1494
1495         'system.ipv6': {
1496                 info: 'Total IPv6 Traffic, read from <code>/proc/net/snmp6</code>.'
1497         },
1498
1499         'system.ram': {
1500                 info: 'System memory, read from <code>/proc/meminfo</code>.'
1501         },
1502
1503         'system.swap': {
1504                 info: 'System swap memory, read from <code>/proc/meminfo</code>.'
1505         },
1506
1507         'mem.ksm_savings': {
1508                 heads: [
1509                         gaugeChart('Saved', '12%', 'savings', '#0099CC')
1510                 ]
1511         },
1512
1513         'mem.ksm_ratios': {
1514                 heads: [
1515                         function(id) {
1516                                 return  '<div data-netdata="' + id + '"'
1517                                         + ' data-gauge-max-value="100"'
1518                                         + ' data-chart-library="gauge"'
1519                                         + ' data-title="Savings"'
1520                                         + ' data-units="percentage %"'
1521                                         + ' data-gauge-adjust="width"'
1522                                         + ' data-width="12%"'
1523                                         + ' data-before="0"'
1524                                         + ' data-after="-CHART_DURATION"'
1525                                         + ' data-points="CHART_DURATION"'
1526                                         + ' role="application"></div>';
1527                         }
1528                 ]
1529         },
1530
1531         'mem.committed': {
1532                 colors: NETDATA.colors[3]
1533         },
1534
1535         'apps.cpu': {
1536                 height: 2.0
1537         },
1538
1539         'apps.preads': {
1540                 height: 2.0
1541         },
1542
1543         'apps.pwrites': {
1544                 height: 2.0
1545         },
1546
1547         'users.cpu': {
1548                 height: 2.0
1549         },
1550
1551         'users.preads': {
1552                 height: 2.0
1553         },
1554
1555         'users.pwrites': {
1556                 height: 2.0
1557         },
1558
1559         'groups.cpu': {
1560                 height: 2.0
1561         },
1562
1563         'groups.preads': {
1564                 height: 2.0
1565         },
1566
1567         'groups.pwrites': {
1568                 height: 2.0
1569         },
1570
1571         'tc.qos': {
1572                 heads: [
1573                         function(id) {
1574                                 if(id.match(/.*-ifb$/))
1575                                         return gaugeChart('Inbound', '12%', '', '#5555AA');
1576                                 else
1577                                         return gaugeChart('Outbound', '12%', '', '#AA9900');
1578                         }
1579                 ]
1580         },
1581
1582         'net.net': {
1583                 heads: [
1584                         gaugeChart('Received', '12%', 'received'),
1585                         gaugeChart('Sent', '12%', 'sent')
1586                 ]
1587         },
1588
1589         'disk.util': {
1590                 colors: '#FF5588',
1591                 heads: [
1592                         gaugeChart('Utilization', '12%', '', '#FF5588')
1593                 ],
1594                 info: 'Disk Utilization measures the amount of time the disk was busy with something. This is not related to its performance. 100% means that the Linux kernel always had an outstanding operation on the disk. Keep in mind that depending on the underlying technology of the disk, 100% here may or may not be an indication of congestion.'
1595         },
1596
1597         'disk.backlog': {
1598                 colors: '#0099CC',
1599                 info: 'Backlog is an indication of the duration of pending disk operations. On every I/O event the Linux kernel is multiplying the time spent doing I/O since the last update of this field with the number of pending operations. While not accurate, this metric can provide an indication of the expected completion time of the operations in progress.'
1600         },
1601
1602         'disk.io': {
1603                 heads: [
1604                         gaugeChart('Read', '12%', 'reads'),
1605                         gaugeChart('Write', '12%', 'writes')
1606                 ],
1607                 info: 'Amount of data transferred to and from disk.'
1608         },
1609
1610         'disk.ops': {
1611                 info: 'Completed disk I/O operations. Keep in mind the number of operations requested might be higher, since the Linux kernel is able to merge adjacent to each other (see merged operations chart).'
1612         },
1613
1614         'disk.qops': {
1615                 info: 'I/O operations currently in progress. This metric is a snapshot - it is not an average over the last interval.'
1616         },
1617
1618         'netfilter.sockets': {
1619                 colors: '#88AA00',
1620                 heads: [
1621                         gaugeChart('Active Connections', '12%', '', '#88AA00')
1622                 ]
1623         },
1624
1625         'netfilter.new': {
1626                 heads: [
1627                         gaugeChart('New Connections', '12%', 'new', '#5555AA')
1628                 ]
1629         },
1630
1631         'disk.iotime': {
1632                 height: 0.5,
1633                 info: 'The sum of the duration of all completed I/O operations. This number can exceed the interval if the disk is able to execute I/O operations in parallel.'
1634         },
1635         'disk.mops': {
1636                 height: 0.5,
1637                 info: 'The number of merged disk operations. The Linux kernel is able to merge adjacent I/O operations, for example two 4KB reads can become one 8KB read before given to disk.'
1638         },
1639         'disk.svctm': {
1640                 height: 0.5,
1641                 info: 'The average service time for completed I/O operations. This metric is calculated using the total busy time of the disk and the number of completed operations. If the disk is able to execute multiple parallel operations the reporting average service time will be misleading.'
1642         },
1643         'disk.avgsz': {
1644                 height: 0.5,
1645                 info: 'The average I/O operation size.'
1646         },
1647         'disk.await': {
1648                 height: 0.5,
1649                 info: 'The average time for I/O requests issued to the device to be served. This includes the time spent by the requests in queue and the time spent servicing them.'
1650         },
1651
1652         'disk.space': {
1653                 info: 'Disk space utilization. reserved for root is automatically reserved by the system to prevent the root user from getting out of space.'
1654         },
1655         'disk.inodes': {
1656                 info: 'inodes (or index nodes) are filesystem objects (e.g. files and directories). On many types of file system implementations, the maximum number of inodes is fixed at filesystem creation, limiting the maximum number of files the filesystem can hold. It is possible for a device to run out of inodes. When this happens, new files cannot be created on the device, even though there may be free space available.'
1657         },
1658         'apache.connections': {
1659                 colors: NETDATA.colors[4],
1660                 mainheads: [
1661                         gaugeChart('Connections', '12%', '', NETDATA.colors[4])
1662                 ]
1663         },
1664
1665         'apache.requests': {
1666                 colors: NETDATA.colors[0],
1667                 mainheads: [
1668                         gaugeChart('Connections', '12%', '', NETDATA.colors[0])
1669                 ]
1670         },
1671
1672         'apache.net': {
1673                 colors: NETDATA.colors[3],
1674                 mainheads: [
1675                         gaugeChart('Bandwidth', '12%', '', NETDATA.colors[3])
1676                 ]
1677         },
1678
1679         'apache.workers': {
1680                 mainheads: [
1681                         function(id) {
1682                                 return  '<div data-netdata="' + id + '"'
1683                                         + ' data-dimensions="busy"'
1684                                         + ' data-append-options="percentage"'
1685                                         + ' data-gauge-max-value="100"'
1686                                         + ' data-chart-library="gauge"'
1687                                         + ' data-title="Workers Utilization"'
1688                                         + ' data-units="percentage %"'
1689                                         + ' data-gauge-adjust="width"'
1690                                         + ' data-width="12%"'
1691                                         + ' data-before="0"'
1692                                         + ' data-after="-CHART_DURATION"'
1693                                         + ' data-points="CHART_DURATION"'
1694                                         + ' role="application"></div>';
1695                         }
1696                 ]
1697         },
1698
1699         'apache.bytesperreq': {
1700                 colors: NETDATA.colors[3],
1701                 height: 0.5
1702         },
1703
1704         'apache.reqpersec': {
1705                 colors: NETDATA.colors[4],
1706                 height: 0.5
1707         },
1708
1709         'apache.bytespersec': {
1710                 colors: NETDATA.colors[6],
1711                 height: 0.5
1712         },
1713
1714         'nginx.connections': {
1715                 colors: NETDATA.colors[4],
1716                 mainheads: [
1717                         gaugeChart('Connections', '12%', '', NETDATA.colors[4])
1718                 ]
1719         },
1720
1721         'nginx.requests': {
1722                 colors: NETDATA.colors[0],
1723                 mainheads: [
1724                         gaugeChart('Requests', '12%', '', NETDATA.colors[0])
1725                 ]
1726         }
1727 };
1728
1729 function anyAttribute(obj, attr, key, def) {
1730         if(typeof obj[key] !== 'undefined') {
1731                 if(typeof obj[key][attr] !== 'undefined')
1732                         return obj[key][attr];
1733         }
1734         return def;
1735 }
1736
1737 function menuTitle(chart) {
1738         if(typeof chart.menu_pattern !== 'undefined') {
1739                 return anyAttribute(menuData, 'title', chart.menu_pattern, chart.menu_pattern).toString()
1740                                 + ': ' + chart.type.slice(-(chart.type.length - chart.menu_pattern.length - 1)).toString();
1741         }
1742
1743         return anyAttribute(menuData, 'title', chart.menu, chart.menu);
1744 }
1745
1746 function menuInfo(menu) {
1747         return anyAttribute(menuData, 'info', menu, null);
1748 }
1749
1750 function menuHeight(menu, relative) {
1751         return anyAttribute(menuData, 'height', menu, 1.0) * relative;
1752 }
1753
1754 function submenuTitle(menu, submenu) {
1755         var key = menu + '.' + submenu;
1756         return anyAttribute(submenuData, 'title', key, submenu);
1757 }
1758
1759 function submenuInfo(menu, submenu) {
1760         var key = menu + '.' + submenu;
1761         return anyAttribute(submenuData, 'info', key, null);
1762 }
1763
1764 function submenuHeight(menu, submenu, relative) {
1765         var key = menu + '.' + submenu;
1766         return anyAttribute(submenuData, 'height', key, 1.0) * relative;
1767 }
1768
1769
1770 function chartInfo(id) {
1771         if(typeof chartData[id] !== 'undefined' && typeof chartData[id].info !== 'undefined')
1772                 return '<div class="chart-message netdata-chart-alignment" role="document">' + chartData[id].info + '</div>';
1773         else
1774                 return '';
1775 }
1776
1777 function chartHeight(id, def) {
1778         if(typeof chartData[id] !== 'undefined' && typeof chartData[id].height !== 'undefined')
1779                 return def * chartData[id].height;
1780         else
1781                 return def;
1782 }
1783
1784
1785 // ----------------------------------------------------------------------------
1786
1787 // enrich the data structure returned by netdata
1788 // to reflect our menu system and content
1789 function enrichChartData(chart) {
1790         var tmp = chart.type.split('_')[0];
1791
1792         switch(tmp) {
1793                 case 'ap':
1794                 case 'net':
1795                 case 'disk':
1796                         chart.menu = tmp;
1797                         break;
1798
1799                 case 'mysql':
1800                 case 'named':
1801                 case 'cgroup':
1802                         chart.menu = chart.type;
1803                         chart.menu_pattern = tmp;
1804                         break;
1805
1806                 case 'tc':
1807                         chart.menu = tmp;
1808
1809                         // find a name for this device from fireqos info
1810                         // we strip '_(in|out)' or '(in|out)_'
1811                         if(typeof options.submenu_names[chart.family] === 'undefined' || options.submenu_names[chart.family] === chart.family) {
1812                                 var n = chart.name.split('.')[1];
1813                                 if(n.endsWith('_in'))
1814                                         options.submenu_names[chart.family] = n.slice(0, n.lastIndexOf('_in'));
1815                                 else if(n.endsWith('_out'))
1816                                         options.submenu_names[chart.family] = n.slice(0, n.lastIndexOf('_out'));
1817                                 else if(n.startsWith('in_'))
1818                                         options.submenu_names[chart.family] = n.slice(3, n.length);
1819                                 else if(n.startsWith('out_'))
1820                                         options.submenu_names[chart.family] = n.slice(4, n.length);
1821                         }
1822
1823                         // increase the priority of IFB devices
1824                         // to have inbound appear before outbound
1825                         if(chart.id.match(/.*-ifb$/))
1826                                 chart.priority--;
1827
1828                         break;
1829
1830                 default:
1831                         chart.menu = chart.type;
1832                         break;
1833         }
1834
1835         chart.submenu = chart.family;
1836 }
1837
1838 // ----------------------------------------------------------------------------
1839
1840 function name2id(s) {
1841         return s
1842                 .replace(/ /g, '_')
1843                 .replace(/\(/g, '_')
1844                 .replace(/\)/g, '_')
1845                 .replace(/\./g, '_')
1846                 .replace(/\//g, '_');
1847 }
1848
1849 function headMain(charts, duration) {
1850         var head = '';
1851
1852         if(typeof charts['system.swap'] !== 'undefined')
1853                 head += '<div style="margin-right: 10px;" data-netdata="system.swap"'
1854                 + ' data-dimensions="free"'
1855                 + ' data-append-options="percentage"'
1856                 + ' data-chart-library="easypiechart"'
1857                 + ' data-title="Free Swap"'
1858                 + ' data-units="%"'
1859                 + ' data-easypiechart-max-value="100"'
1860                 + ' data-width="8%"'
1861                 + ' data-before="0"'
1862                 + ' data-after="-' + duration.toString() + '"'
1863                 + ' data-points="' + duration.toString() + '"'
1864                 + ' data-colors="#DD4400"'
1865                 + ' role="application"></div>';
1866
1867         if(typeof charts['system.io'] !== 'undefined') {
1868                 head += '<div style="margin-right: 10px;" data-netdata="system.io"'
1869                 + ' data-dimensions="in"'
1870                 + ' data-chart-library="easypiechart"'
1871                 + ' data-title="Disk Read"'
1872                 + ' data-units="KB / s"'
1873                 + ' data-width="10%"'
1874                 + ' data-before="0"'
1875                 + ' data-after="-' + duration.toString() + '"'
1876                 + ' data-points="' + duration.toString() + '"'
1877                 + ' role="application"></div>';
1878
1879                 head += '<div style="margin-right: 10px;" data-netdata="system.io"'
1880                 + ' data-dimensions="out"'
1881                 + ' data-chart-library="easypiechart"'
1882                 + ' data-title="Disk Write"'
1883                 + ' data-units="KB / s"'
1884                 + ' data-width="10%"'
1885                 + ' data-before="0"'
1886                 + ' data-after="-' + duration.toString() + '"'
1887                 + ' data-points="' + duration.toString() + '"'
1888                 + ' role="application"></div>';
1889         }
1890
1891         if(typeof charts['system.cpu'] !== 'undefined')
1892                 head += '<div data-netdata="system.cpu"'
1893                 + ' data-chart-library="gauge"'
1894                 + ' data-title="CPU"'
1895                 + ' data-units="%"'
1896                 + ' data-gauge-max-value="100"'
1897                 + ' data-width="18%"'
1898                 + ' data-after="-' + duration.toString() + '"'
1899                 + ' data-points="' + duration.toString() + '"'
1900                 + ' data-colors="' + NETDATA.colors[12] + '"'
1901                 + ' role="application"></div>';
1902
1903         if(typeof charts['system.ipv4'] !== 'undefined') {
1904                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
1905                 + ' data-dimensions="received"'
1906                 + ' data-chart-library="easypiechart"'
1907                 + ' data-title="IPv4 Inbound"'
1908                 + ' data-units="kbps"'
1909                 + ' data-width="10%"'
1910                 + ' data-before="0"'
1911                 + ' data-after="-' + duration.toString() + '"'
1912                 + ' data-points="' + duration.toString() + '"'
1913                 + ' role="application"></div>';
1914
1915                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
1916                 + ' data-dimensions="sent"'
1917                 + ' data-chart-library="easypiechart"'
1918                 + ' data-title="IPv4 Outbound"'
1919                 + ' data-units="kbps"'
1920                 + ' data-width="10%"'
1921                 + ' data-before="0"'
1922                 + ' data-after="-' + duration.toString() + '"'
1923                 + ' data-points="' + duration.toString() + '"'
1924                 + ' role="application"></div>';
1925         }
1926         else if(typeof charts['system.ipv6'] !== 'undefined') {
1927                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv6"'
1928                 + ' data-dimensions="received"'
1929                 + ' data-chart-library="easypiechart"'
1930                 + ' data-title="IPv6 Inbound"'
1931                 + ' data-units="kbps"'
1932                 + ' data-width="10%"'
1933                 + ' data-before="0"'
1934                 + ' data-after="-' + duration.toString() + '"'
1935                 + ' data-points="' + duration.toString() + '"'
1936                 + ' role="application"></div>';
1937
1938                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv6"'
1939                 + ' data-dimensions="sent"'
1940                 + ' data-chart-library="easypiechart"'
1941                 + ' data-title="IPv6 Outbound"'
1942                 + ' data-units="kbps"'
1943                 + ' data-width="10%"'
1944                 + ' data-before="0"'
1945                 + ' data-after="-' + duration.toString() + '"'
1946                 + ' data-points="' + duration.toString() + '"'
1947                 + ' role="application"></div>';
1948         }
1949
1950         if(typeof charts['system.ram'] !== 'undefined')
1951                 head += '<div style="margin-right: 10px;" data-netdata="system.ram"'
1952                 + ' data-dimensions="cached|free"'
1953                 + ' data-append-options="percentage"'
1954                 + ' data-chart-library="easypiechart"'
1955                 + ' data-title="Available RAM"'
1956                 + ' data-units="%"'
1957                 + ' data-easypiechart-max-value="100"'
1958                 + ' data-width="8%"'
1959                 + ' data-after="-' + duration.toString() + '"'
1960                 + ' data-points="' + duration.toString() + '"'
1961                 + ' data-colors="' + NETDATA.colors[7] + '"'
1962                 + ' role="application"></div>';
1963
1964         return head;
1965 }
1966
1967 function generateHeadCharts(type, chart, duration) {
1968         var head = '';
1969         var hcharts = anyAttribute(chartData, type, chart.context, []);
1970         if(hcharts.length > 0) {
1971                 var hi = 0, hlen = hcharts.length;
1972                 while(hi < hlen) {
1973                         if(typeof hcharts[hi] === 'function')
1974                                 head += hcharts[hi](chart.id).replace('CHART_DURATION', duration.toString()).replace('CHART_UNIQUE_ID', chart.id);
1975                         else
1976                                 head += hcharts[hi].replace('CHART_DURATION', duration.toString()).replace('CHART_UNIQUE_ID', chart.id);
1977                         hi++;
1978                 }
1979         }
1980         return head;
1981 }
1982
1983 function renderPage(menus, data) {
1984         var div = document.getElementById('charts_div');
1985         var pcent_width = Math.floor(100 / chartsPerRow($(div).width()));
1986
1987         // find the proper duration for per-second updates
1988         var duration = Math.round(($(div).width() * pcent_width / 100 * data.update_every / 3) / 60) * 60;
1989         var html = '';
1990         var sidebar = '<ul class="nav dashboard-sidenav" data-spy="affix" id="sidebar_ul">';
1991         var mainhead = headMain(data.charts, duration);
1992
1993         // sort the menus
1994         var main = sortObjectByPriority(menus);
1995         var i = 0, len = main.length;
1996         while(i < len) {
1997                 var menu = main[i++];
1998
1999                 // generate an entry at the main menu
2000
2001                 var menuid = name2id(menu);
2002                 sidebar += '<li class=""><a href="#' + menuid + '" onClick="return scrollToId(\'' + menuid + '\');">' + menus[menu].title + '</a><ul class="nav">';
2003                 html += '<div role="section"><div role="sectionhead"><h1 id="' + menuid + '" role="heading">' + menus[menu].title + '</h1></div><div id="menu_' + menuid + '" role="document">';
2004
2005                 if(menus[menu].info !== null)
2006                         html += menus[menu].info;
2007
2008                 // console.log(' >> ' + menu + ' (' + menus[menu].priority + '): ' + menus[menu].title);
2009
2010                 var shtml = '';
2011                 var mhead = '<div class="netdata-chart-row">' + mainhead;
2012                 mainhead = '';
2013
2014                 // sort the submenus of this menu
2015                 var sub = sortObjectByPriority(menus[menu].submenus);
2016                 var si = 0, slen = sub.length;
2017                 while(si < slen) {
2018                         var submenu = sub[si++];
2019
2020                         // generate an entry at the submenu
2021                         var submenuid = name2id(menu + '_' + submenu);
2022                         sidebar += '<li class><a href="#' + submenuid + '" onClick="return scrollToId(\'' + submenuid + '\');">' + menus[menu].submenus[submenu].title + '</a></li>';
2023                         shtml += '<div class="netdata-group-container" id="submenu_' + submenuid + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + submenuid + '" class="netdata-chart-alignment" role="heading">' + menus[menu].submenus[submenu].title + '</h2>';
2024
2025                         if(menus[menu].submenus[submenu].info !== null)
2026                                 shtml += '<div class="chart-message netdata-chart-alignment" role="document">' + menus[menu].submenus[submenu].info + '</div>';
2027
2028                         var head = '<div class="netdata-chart-row">';
2029                         var chtml = '';
2030
2031                         // console.log('    \------- ' + submenu + ' (' + menus[menu].submenus[submenu].priority + '): ' + menus[menu].submenus[submenu].title);
2032
2033                         // sort the charts in this submenu of this menu
2034                         menus[menu].submenus[submenu].charts.sort(prioritySort);
2035                         var ci = 0, clen = menus[menu].submenus[submenu].charts.length;
2036                         while(ci < clen) {
2037                                 var chart = menus[menu].submenus[submenu].charts[ci++];
2038
2039                                 // generate the submenu heading charts
2040                                 mhead += generateHeadCharts('mainheads', chart, duration);
2041                                 head += generateHeadCharts('heads', chart, duration);
2042
2043                                 // generate the chart
2044                                 chtml += chartInfo(chart.context) + '<div data-netdata="' + chart.id + '"'
2045                                         + ' data-width="' + pcent_width.toString() + '%"'
2046                                         + ' data-height="' + chartHeight(chart.context, options.chartsHeight).toString() + 'px"'
2047                                         + ' data-before="0"'
2048                                         + ' data-after="-' + duration.toString() + '"'
2049                                         + ' data-id="' + name2id(options.hostname + '/' + chart.id) + '"'
2050                                         + ' data-colors="' + anyAttribute(chartData, 'colors', chart.context, '') + '"'
2051                                         + ' role="application"></div>';
2052
2053                                 // console.log('         \------- ' + chart.id + ' (' + chart.priority + '): ' + chart.context  + ' height: ' + menus[menu].submenus[submenu].height);
2054                         }
2055
2056                         head += '</div>';
2057                         shtml += head + chtml + '</div>';
2058                 }
2059
2060                 mhead += '</div>';
2061                 sidebar += '</ul></li>';
2062                 html += mhead + shtml + '</div></div><hr role="separator"/>';
2063         }
2064
2065         sidebar += '</ul>';
2066         div.innerHTML = html;
2067         document.getElementById('sidebar').innerHTML = sidebar;
2068         finalizePage();
2069 }
2070
2071 function renderChartsAndMenu(data) {
2072         var menus = {};
2073         var charts = data.charts;
2074
2075         for(var c in charts) {
2076                 enrichChartData(charts[c]);
2077
2078                 // create the menu
2079                 if(typeof menus[charts[c].menu] === 'undefined') {
2080                         menus[charts[c].menu] = {
2081                                 priority: charts[c].priority,
2082                                 submenus: {},
2083                                 title: menuTitle(charts[c]),
2084                                 info: menuInfo(charts[c].menu),
2085                                 height: menuHeight(charts[c].menu, options.chartsHeight)
2086                         };
2087                 }
2088
2089                 if(charts[c].priority < menus[charts[c].menu].priority)
2090                         menus[charts[c].menu].priority = charts[c].priority;
2091
2092                 // create the submenu
2093                 if(typeof menus[charts[c].menu].submenus[charts[c].submenu] === 'undefined') {
2094                         menus[charts[c].menu].submenus[charts[c].submenu] = {
2095                                 priority: charts[c].priority,
2096                                 charts: new Array(),
2097                                 title: null,
2098                                 info: submenuInfo(charts[c].menu, charts[c].submenu),
2099                                 height: submenuHeight(charts[c].menu, charts[c].submenu, menus[charts[c].menu].height)
2100                         };
2101                 }
2102
2103                 if(charts[c].priority < menus[charts[c].menu].submenus[charts[c].submenu].priority)
2104                         menus[charts[c].menu].submenus[charts[c].submenu].priority = charts[c].priority;
2105
2106                 // index the chart in the menu/submenu
2107                 menus[charts[c].menu].submenus[charts[c].submenu].charts.push(charts[c]);
2108         }
2109
2110         // propagate the descriptive subname given to QoS
2111         // to all the other submenus with the same name
2112         for(var m in menus) {
2113                 for(var s in menus[m].submenus) {
2114                         // set the family using a name
2115                         if(typeof options.submenu_names[s] !== 'undefined') {
2116                                 menus[m].submenus[s].title = s + ' (' + options.submenu_names[s] + ')';
2117                         }
2118                         else {
2119                                 menus[m].submenus[s].title = submenuTitle(m, s);
2120                         }
2121                 }
2122         }
2123
2124         renderPage(menus, data);
2125 }
2126
2127 function downloadAllCharts(netdata_url) {
2128         if(typeof netdata_url === 'undefined' || netdata_url === null)
2129                 netdata_url = NETDATA.serverDefault;
2130
2131         NETDATA.pause(function() {
2132
2133                 // download all the charts the server knows
2134                 NETDATA.chartRegistry.downloadAll(netdata_url, function(data) {
2135
2136                         options.data = data;
2137                         options.hostname = data.hostname;
2138                         document.getElementById('hostname').innerHTML = options.hostname;
2139                         document.getElementById('hostname').href = NETDATA.serverDefault;
2140                         document.title = options.hostname + ' netdata dashboard';
2141
2142                         renderChartsAndMenu(data);
2143
2144                         // prepare our DOM
2145 //                      prepareScreen(data);
2146
2147                         // due to affix issues, prepareScreen() will unpause
2148                         // netdata as needed
2149                 });
2150         });
2151 }
2152
2153 // ----------------------------------------------------------------------------
2154
2155 function versionLog(msg) {
2156         document.getElementById('versionCheckLog').innerHTML = msg;
2157 }
2158
2159 function getNetdataVersion(callback) {
2160         versionLog('Downloading installed version info from netdata...');
2161
2162         $.ajax({
2163                 url: 'version.txt',
2164                 async: true,
2165                 cache: false
2166         })
2167         .done(function(data) {
2168                 data = data.replace(/(\r\n|\n|\r| |\t)/gm,"");
2169                 if(data.length !== 40) {
2170                         versionLog('Received version string is invalid.');
2171                         callback(null);
2172                 }
2173                 else {
2174                         versionLog('Installed version of netdata is ' + data);
2175                         document.getElementById('netdataVersion').innerHTML = data;
2176                         callback(data);
2177                 }
2178         })
2179         .fail(function() {
2180                 versionLog('Failed to download installed version info from netdata!');
2181                 callback(null);
2182         });
2183 }
2184
2185 function getGithubLatestCommit(callback) {
2186         versionLog('Downloading latest version info from github...');
2187
2188         $.ajax({
2189                 url: 'https://api.github.com/repos/firehol/netdata/commits',
2190                 async: true,
2191                 cache: false
2192         })
2193         .done(function(data) {
2194                 versionLog('Latest version info from github is ' + data[0].sha);
2195                 callback(data[0].sha);
2196         })
2197         .fail(function() {
2198                 versionLog('Failed to download installed version info from github!');
2199                 callback(null);
2200         });
2201 }
2202
2203 function checkForUpdate(callback) {
2204         getNetdataVersion(function(sha1) {
2205                 if(sha1 === null) callback(null, null);
2206
2207                 getGithubLatestCommit(function(sha2) {
2208                         callback(sha1, sha2);
2209                 });
2210         });
2211
2212         return null;
2213 }
2214
2215 var updateBlinkCounter = 0;
2216 function notifyForUpdate(force) {
2217         versionLog('<p>checking for updates...</p>');
2218
2219         var now = new Date().getTime();
2220
2221         if(typeof force === 'undefined' || force !== true) {
2222                 var last = loadLocalStorage('last_update_check');
2223
2224                 if(typeof last === 'string')
2225                         last = parseInt(last);
2226                 else
2227                         last = 0;
2228
2229                 if(now - last < 3600000 * 8) {
2230                         // no need to check it - too soon
2231                         return;
2232                 }
2233         }
2234
2235         checkForUpdate(function(sha1, sha2) {
2236                 var save = false;
2237
2238                 if(sha1 === null) {
2239                         save = false;
2240                         versionLog('<p><big>Failed to get your netdata version!</big></p><p>You can always get the latest version of netdata from <a href="https://github.com/firehol/netdata" target="_blank">its github page</a>.</p>');
2241                 }
2242                 else if(sha2 === null) {
2243                         save = false;
2244                         versionLog('<p><big>Failed to get the latest version from github.</big></p><p>You can always get the latest version of netdata from <a href="https://github.com/firehol/netdata" target="_blank">its github page</a>.</p>');
2245                 }
2246                 else if(sha1 === sha2) {
2247                         save = true;
2248                         versionLog('<p><big>You already have the latest version of netdata!</big></p><p>No update yet?<br/>Probably, we need some motivation to keep going on!</p><p>If you haven\'t already, <a href="https://github.com/firehol/netdata" target="_blank">give netdata a <b>Star</b> at its github page</a>.</p>');
2249                 }
2250                 else {
2251                         save = true;
2252                         var compare = 'https://github.com/firehol/netdata/compare/' + sha1.toString() + '...' + sha2.toString();
2253
2254                         versionLog('<p><big><strong>New version of netdata available!</strong></big></p><p>Latest version: ' + sha2.toString() + '</p><p><a href="' + compare + '" target="_blank">Click here for the changes log</a> since your installed version, and<br/><a href="https://github.com/firehol/netdata/wiki/Updating-Netdata" target="_blank">click here for directions on updating</a> your netdata installation.</p><p>We suggest to review the changes log for new features you may be interested, or important bug fixes you may need.<br/>Keeping your netdata updated, is generally a good idea.</p>');
2255
2256                         function updateButtonBlink() {
2257                                 updateBlinkCounter--;
2258                                 if(updateBlinkCounter > 0)
2259                                         $('#updateButton').fadeOut(500).fadeIn(500, updateButtonBlink);
2260                         }
2261
2262                         if(updateBlinkCounter === 0) {
2263                                 updateBlinkCounter = 300;
2264                                 updateButtonBlink();
2265                         }
2266                 }
2267
2268                 if(save)
2269                         saveLocalStorage('last_update_check', now.toString());
2270         });
2271 }
2272
2273 // ----------------------------------------------------------------------------
2274
2275 function getUrlParameter(sParam) {
2276     var sPageURL = decodeURIComponent(window.location.search.substring(1)),
2277         sURLVariables = sPageURL.split('&'),
2278         sParameterName,
2279         i;
2280
2281     for (i = 0; i < sURLVariables.length; i++) {
2282         sParameterName = sURLVariables[i].split('=');
2283
2284         if (sParameterName[0] === sParam) {
2285             return sParameterName[1] === undefined ? true : sParameterName[1];
2286         }
2287     }
2288 }
2289
2290 function finalizePage() {
2291         // resize all charts - without starting the background thread
2292         // this has to be done while NETDATA is paused
2293         // if we ommit this, the affix menu will be wrong, since all
2294         // the Dom elements are initially zero-sized
2295         NETDATA.parseDom();
2296
2297         var before = 0, after = 0, nowelcome = 0;
2298         after = getUrlParameter('force_after_ms');
2299         before = getUrlParameter('force_before_ms');
2300         nowelcome = (getUrlParameter('nowelcome') === true)?true:false;
2301
2302         if(before > 0 && after > 0) {
2303                 nowelcome = true;
2304                 NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], after, before);
2305         }
2306
2307         // ------------------------------------------------------------------------
2308         // https://github.com/viralpatel/jquery.shorten/blob/master/src/jquery.shorten.js
2309         $.fn.shorten = function(settings) {
2310                 "use strict";
2311
2312                 var config = {
2313                         showChars: 750,
2314                         minHideChars: 10,
2315                         ellipsesText: "...",
2316                         moreText: '<i class="fa fa-expand" aria-hidden="true"></i> show more information',
2317                         lessText: '<i class="fa fa-compress" aria-hidden="true"></i> show less information',
2318                         onLess: function() { NETDATA.onscroll(); },
2319                         onMore: function() { NETDATA.onscroll(); },
2320                         errMsg: null,
2321                         force: false
2322                 };
2323
2324                 if (settings) {
2325                         $.extend(config, settings);
2326                 }
2327
2328                 if ($(this).data('jquery.shorten') && !config.force) {
2329                         return false;
2330                 }
2331                 $(this).data('jquery.shorten', true);
2332
2333                 $(document).off("click", '.morelink');
2334
2335                 $(document).on({
2336                         click: function() {
2337
2338                                 var $this = $(this);
2339                                 if ($this.hasClass('less')) {
2340                                         $this.removeClass('less');
2341                                         $this.html(config.moreText);
2342                                         $this.parent().prev().animate({'height':'0'+'%'}, 0, function () { $this.parent().prev().prev().show(); }).hide(0, function() {
2343                                                 config.onLess();
2344                                         });
2345
2346                                 } else {
2347                                         $this.addClass('less');
2348                                         $this.html(config.lessText);
2349                                         $this.parent().prev().animate({'height':'100'+'%'}, 0, function () { $this.parent().prev().prev().hide(); }).show(0, function() {
2350                                                 config.onMore();
2351                                         });
2352                                 }
2353                                 return false;
2354                         }
2355                 }, '.morelink');
2356
2357                 return this.each(function() {
2358                         var $this = $(this);
2359
2360                         var content = $this.html();
2361                         var contentlen = $this.text().length;
2362                         if (contentlen > config.showChars + config.minHideChars) {
2363                                 var c = content.substr(0, config.showChars);
2364                                 if (c.indexOf('<') >= 0) // If there's HTML don't want to cut it
2365                                 {
2366                                         var inTag = false; // I'm in a tag?
2367                                         var bag = ''; // Put the characters to be shown here
2368                                         var countChars = 0; // Current bag size
2369                                         var openTags = []; // Stack for opened tags, so I can close them later
2370                                         var tagName = null;
2371
2372                                         for (var i = 0, r = 0; r <= config.showChars; i++) {
2373                                                 if (content[i] == '<' && !inTag) {
2374                                                         inTag = true;
2375
2376                                                         // This could be "tag" or "/tag"
2377                                                         tagName = content.substring(i + 1, content.indexOf('>', i));
2378
2379                                                         // If its a closing tag
2380                                                         if (tagName[0] == '/') {
2381
2382
2383                                                                 if (tagName != '/' + openTags[0]) {
2384                                                                         config.errMsg = 'ERROR en HTML: the top of the stack should be the tag that closes';
2385                                                                 } else {
2386                                                                         openTags.shift(); // Pops the last tag from the open tag stack (the tag is closed in the retult HTML!)
2387                                                                 }
2388
2389                                                         } else {
2390                                                                 // There are some nasty tags that don't have a close tag like <br/>
2391                                                                 if (tagName.toLowerCase() != 'br') {
2392                                                                         openTags.unshift(tagName); // Add to start the name of the tag that opens
2393                                                                 }
2394                                                         }
2395                                                 }
2396                                                 if (inTag && content[i] == '>') {
2397                                                         inTag = false;
2398                                                 }
2399
2400                                                 if (inTag) { bag += content.charAt(i); } // Add tag name chars to the result
2401                                                 else {
2402                                                         r++;
2403                                                         if (countChars <= config.showChars) {
2404                                                                 bag += content.charAt(i); // Fix to ie 7 not allowing you to reference string characters using the []
2405                                                                 countChars++;
2406                                                         } else // Now I have the characters needed
2407                                                         {
2408                                                                 if (openTags.length > 0) // I have unclosed tags
2409                                                                 {
2410                                                                         //console.log('They were open tags');
2411                                                                         //console.log(openTags);
2412                                                                         for (j = 0; j < openTags.length; j++) {
2413                                                                                 //console.log('Cierro tag ' + openTags[j]);
2414                                                                                 bag += '</' + openTags[j] + '>'; // Close all tags that were opened
2415
2416                                                                                 // You could shift the tag from the stack to check if you end with an empty stack, that means you have closed all open tags
2417                                                                         }
2418                                                                         break;
2419                                                                 }
2420                                                         }
2421                                                 }
2422                                         }
2423                                         c = $('<div/>').html(bag + '<span class="ellip">' + config.ellipsesText + '</span>').html();
2424                                 }else{
2425                                         c+=config.ellipsesText;
2426                                 }
2427
2428                                 var html = '<div class="shortcontent">' + c +
2429                                                 '</div><div class="allcontent">' + content +
2430                                                 '</div><span><a href="javascript://nop/" class="morelink">' + config.moreText + '</a></span>';
2431
2432                                 $this.html(html);
2433                                 $this.find(".allcontent").hide(); // Hide all text
2434                                 $('.shortcontent p:last', $this).css('margin-bottom', 0); //Remove bottom margin on last paragraph as it's likely shortened
2435                         }
2436                 });
2437
2438         };
2439         $(".chart-message").shorten();
2440         // ------------------------------------------------------------------------
2441
2442         // let it run (update the charts)
2443         NETDATA.unpause();
2444
2445         // check if we have to jump to a specific section
2446         scrollToId(location.hash.replace('#',''));
2447
2448         /* activate bootstrap sidebar (affix) */
2449         $('#sidebar').affix({
2450                 offset: {
2451                         top: (isdemo())?150:0,
2452                         bottom: 0
2453                 }
2454         });
2455
2456         /* fix scrolling of very long affix lists
2457            http://stackoverflow.com/questions/21691585/bootstrap-3-1-0-affix-too-long
2458          */
2459         $('#sidebar').on('affixed.bs.affix', function() {
2460                 $(this).removeAttr('style');
2461         });
2462
2463         /* activate bootstrap scrollspy (needed for sidebar) */
2464         $(document.body).scrollspy({
2465                 target: '#sidebar',
2466                 offset: $(window).height() / 3 // controls the diff of the <hX> element to the top, to select it
2467         });
2468
2469         // change the URL based on the current position of the screen
2470         $('#sidebar').on('activate.bs.scrollspy', function (e) {
2471                 var el = $(e.target);
2472                 if(el.find('ul').size() == 0)
2473                         history.replaceState(null, document.title, el.find('a').attr('href'));
2474         });
2475
2476         document.getElementById('footer').style.display = 'block';
2477
2478         var update_options_modal = function() {
2479                 // console.log('update_options_modal');
2480
2481                 var sync_option = function(option) {
2482                         var self = $('#' + option);
2483
2484                         if(self.prop('checked') !== NETDATA.getOption(option)) {
2485                                 // console.log('switching ' + option.toString());
2486                                 self.bootstrapToggle(NETDATA.getOption(option)?'on':'off');
2487                         }
2488                 }
2489
2490                 var theme_sync_option = function(option) {
2491                         var self = $('#' + option);
2492
2493                         self.bootstrapToggle(netdataTheme === 'slate'?'on':'off');
2494                 }
2495
2496                 sync_option('eliminate_zero_dimensions');
2497                 sync_option('destroy_on_hide');
2498                 sync_option('parallel_refresher');
2499                 sync_option('concurrent_refreshes');
2500                 sync_option('sync_selection');
2501                 sync_option('sync_pan_and_zoom');
2502                 sync_option('stop_updates_when_focus_is_lost');
2503                 sync_option('smooth_plot');
2504                 sync_option('pan_and_zoom_data_padding');
2505                 sync_option('show_help');
2506                 theme_sync_option('netdata_theme_control');
2507
2508                 if(NETDATA.getOption('parallel_refresher') === false) {
2509                         $('#concurrent_refreshes_row').hide();
2510                 }
2511                 else {
2512                         $('#concurrent_refreshes_row').show();
2513                 }
2514         };
2515         NETDATA.setOption('setOptionCallback', update_options_modal);
2516
2517         // handle options changes
2518         $('#eliminate_zero_dimensions').change(function()       { NETDATA.setOption('eliminate_zero_dimensions', $(this).prop('checked')); });
2519         $('#destroy_on_hide').change(function()                 { NETDATA.setOption('destroy_on_hide', $(this).prop('checked')); });
2520         $('#parallel_refresher').change(function()              { NETDATA.setOption('parallel_refresher', $(this).prop('checked')); });
2521         $('#concurrent_refreshes').change(function()            { NETDATA.setOption('concurrent_refreshes', $(this).prop('checked')); });
2522         $('#sync_selection').change(function()                  { NETDATA.setOption('sync_selection', $(this).prop('checked')); });
2523         $('#sync_pan_and_zoom').change(function()               { NETDATA.setOption('sync_pan_and_zoom', $(this).prop('checked')); });
2524         $('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); });
2525         $('#smooth_plot').change(function()                     { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
2526         $('#pan_and_zoom_data_padding').change(function()       { NETDATA.setOption('pan_and_zoom_data_padding', $(this).prop('checked')); });
2527         $('#show_help').change(function()                       { NETDATA.setOption('show_help', $(this).prop('checked')); location.reload(); });
2528
2529         // this has to be the last
2530         // it reloads the page
2531         $('#netdata_theme_control').change(function() {
2532                 if(setTheme($(this).prop('checked')?'slate':'white'))
2533                         location.reload();
2534         });
2535
2536         $('#updateModal').on('shown.bs.modal', function() {
2537                 notifyForUpdate(true);
2538         });
2539
2540         $('#deleteRegistryModal').on('hidden.bs.modal', function() {
2541                 deleteRegistryGuid = null;
2542         });
2543
2544         if(isdemo()) {
2545                 if(!nowelcome) {
2546                         setTimeout(function() {
2547                                 $('#welcomeModal').modal();
2548                         }, 1000);
2549                 }
2550
2551                 // google analytics when this is used for the home page of the demo sites
2552                 // this does not run on user's installations
2553                 setTimeout(function() {
2554                         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
2555                         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
2556                         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
2557                         })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
2558
2559                         ga('create', 'UA-64295674-3', 'auto');
2560                         ga('send', 'pageview');
2561                 }, 2000);
2562         }
2563         else notifyForUpdate();
2564 }
2565
2566 function resetDashboardOptions() {
2567         var help = NETDATA.options.current.show_help;
2568
2569         NETDATA.resetOptions();
2570         if(setTheme('slate'))
2571                 location.reload();
2572
2573         if(help !== NETDATA.options.current.show_help)
2574                 location.reload();
2575 }
2576
2577 downloadAllCharts();
2578
2579 </script>
2580
2581 </body>
2582 </html>