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="' + u.url + '" 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?v40"></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                 return true;
1095         });
1096 }
1097
1098 function switchRegistryModalHandler() {
1099         document.getElementById('switchRegistryPersonGUID').value = NETDATA.registry.person_guid;
1100         document.getElementById('switchRegistryURL').innerHTML = NETDATA.registry.server;
1101         document.getElementById('switchRegistryResponse').innerHTML = '';
1102         $('#switchRegistryModal').modal('show');
1103 }
1104
1105 function notifyForSwitchRegistry() {
1106         var n = document.getElementById('switchRegistryPersonGUID').value;
1107
1108         if(n !== '' && n.length === 36) {
1109                 NETDATA.registry.switch(n, function(result) {
1110                         if(result !== null) {
1111                                 $('#switchRegistryModal').modal('hide');
1112                                 NETDATA.registry.init();
1113                         }
1114                         else {
1115                                 document.getElementById('switchRegistryResponse').innerHTML = "<b>Sorry! The registry rejected your request.</b>";
1116                         }
1117                 });
1118         }
1119         else
1120                 document.getElementById('switchRegistryResponse').innerHTML = "<b>The ID you have entered is not a GUID.</b>";
1121 }
1122
1123 var deleteRegistryUrl = null;
1124 function deleteRegistryModalHandler(guid, name, url) {
1125         deleteRegistryUrl = url;
1126         document.getElementById('deleteRegistryServerName').innerHTML = name;
1127         document.getElementById('deleteRegistryServerName2').innerHTML = name;
1128         document.getElementById('deleteRegistryServerURL').innerHTML = url;
1129         document.getElementById('deleteRegistryResponse').innerHTML = '';
1130         $('#deleteRegistryModal').modal('show');
1131 }
1132
1133 function notifyForDeleteRegistry() {
1134         if(deleteRegistryUrl) {
1135                 NETDATA.registry.delete(deleteRegistryUrl, function(result) {
1136                         if(result !== null) {
1137                                 deleteRegistryUrl = null;
1138                                 $('#deleteRegistryModal').modal('hide');
1139                                 NETDATA.registry.init();
1140                         }
1141                         else {
1142                                 document.getElementById('deleteRegistryResponse').innerHTML = "<b>Sorry! this command was rejected by the registry server.</b>";
1143                         }
1144                 });
1145         }
1146 }
1147
1148 var options = {
1149         sparklines_registry: {},
1150         submenu_names: {},
1151         data: null,
1152         hostname: 'netdata_server', // will be overwritten by the netdata server
1153         categories: new Array(),
1154         categories_idx: {},
1155         families: new Array(),
1156         families_idx: {},
1157
1158         chartsPerRow: 0,
1159         chartsMinWidth: 1450,
1160         chartsHeight: 180,
1161         sparklinesHeight: 60,
1162 };
1163
1164 // generate a sparkline
1165 // used in the documentation
1166 function sparkline(chart, dimension, units) {
1167         var key = chart + '.' + dimension;
1168
1169         if(typeof units === 'undefined')
1170                 units = '';
1171
1172         if(typeof options.sparklines_registry[key] === 'undefined')
1173                 options.sparklines_registry[key] = { count: 1 };
1174         else
1175                 options.sparklines_registry[key].count++;
1176
1177         key = key + '.' + options.sparklines_registry[key].count;
1178
1179         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 + ')';
1180
1181         return h;
1182 }
1183
1184 function chartsPerRow(total) {
1185         if(options.chartsPerRow === 0) {
1186                 width = Math.floor(total / options.chartsMinWidth);
1187                 if(width === 0) width = 1;
1188                 return width;
1189         }
1190         else return options.chartsPerRow;
1191 }
1192
1193 function prioritySort(a, b) {
1194         if(a.priority < b.priority) return -1;
1195         if(a.priority > b.priority) return 1;
1196         if(a.name < b.name) return -1;
1197         return 1;
1198 }
1199
1200 function sortObjectByPriority(object) {
1201         var idx = {};
1202         var sorted = new Array();
1203
1204         for(var i in object) {
1205                 if(typeof idx[i] === 'undefined') {
1206                         idx[i] = object[i];
1207                         sorted.push(i);
1208                 }
1209         }
1210
1211         sorted.sort(function(a, b) {
1212                 if(idx[a].priority < idx[b].priority) return -1;
1213                 if(idx[a].priority > idx[b].priority) return 1;
1214                 if(a < b) return -1;
1215                 return 1;
1216         });
1217
1218         return sorted;
1219 }
1220
1221
1222 // ----------------------------------------------------------------------------
1223 // scroll to a section, without changing the browser history
1224
1225 function scrollToId(hash) {
1226         if(hash && hash != '') {
1227                 var offset = $('#' + hash).offset();
1228                 if(typeof offset !== 'undefined')
1229                         $('html, body').animate({ scrollTop: offset.top }, 0);
1230         }
1231
1232         // we must return false to prevent the default action
1233         return false;
1234 }
1235
1236 // ----------------------------------------------------------------------------
1237
1238 function gaugeChart(title, width, dimensions, colors) {
1239         if(typeof colors === 'undefined')
1240                 colors = '';
1241
1242         if(typeof dimensions === 'undefined')
1243                 dimensions = '';
1244
1245         return '<div data-netdata="CHART_UNIQUE_ID"'
1246                                                         + ' data-dimensions="' + dimensions + '"'
1247                                                         + ' data-chart-library="gauge"'
1248                                                         + ' data-gauge-adjust="width"'
1249                                                         + ' data-title="' + title + '"'
1250                                                         + ' data-width="' + width + '"'
1251                                                         + ' data-before="0"'
1252                                                         + ' data-after="-CHART_DURATION"'
1253                                                         + ' data-points="CHART_DURATION"'
1254                                                         + ' data-colors="' + colors + '"'
1255                                                         + ' role="application"></div>';
1256 }
1257
1258 // ----------------------------------------------------------------------------
1259
1260 var menuData = {
1261         'system': {
1262                 title: 'System Overview',
1263                 info: 'Overview of the key system metrics.'
1264         },
1265
1266         'ap': {
1267                 title: 'Access Points',
1268                 info: undefined
1269         },
1270
1271         'tc': {
1272                 title: 'Quality of Service',
1273                 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).'
1274         },
1275
1276         'net': {
1277                 title: 'Network Interfaces',
1278                 info: 'Per network interface statistics collected from <code>/proc/net/dev</code>.'
1279         },
1280
1281         'ipv4': {
1282                 title: 'IPv4 Networking',
1283                 info: undefined
1284         },
1285
1286         'ipv6': {
1287                 title: 'IPv6 Networking',
1288                 info: undefined
1289         },
1290
1291         'ipvs': {
1292                 title: 'IP Virtual Server',
1293                 info: undefined
1294         },
1295
1296         'netfilter': {
1297                 title: 'Firewall (netfilter)',
1298                 info: undefined
1299         },
1300
1301         'cpu': {
1302                 title: 'CPUs',
1303                 info: undefined
1304         },
1305
1306         'mem': {
1307                 title: 'Memory',
1308                 info: undefined
1309         },
1310
1311         'disk': {
1312                 title: 'Disks',
1313                 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.'
1314         },
1315
1316         'sensors': {
1317                 title: 'Sensors',
1318                 info: undefined
1319         },
1320
1321         'nfsd': {
1322                 title: 'File Server (nfsd)',
1323                 info: undefined
1324         },
1325
1326         'apps': {
1327                 title: 'Applications',
1328                 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>.',
1329                 height: 1.5
1330         },
1331
1332         'users': {
1333                 title: 'Users',
1334                 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>.',
1335                 height: 1.5
1336         },
1337
1338         'groups': {
1339                 title: 'User Groups',
1340                 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>.',
1341                 height: 1.5
1342         },
1343
1344         'netdata': {
1345                 title: 'Netdata Monitoring',
1346                 info: undefined
1347         },
1348
1349         'example': {
1350                 title: 'Example Charts',
1351                 info: undefined
1352         },
1353
1354         'cgroup': {
1355                 title: 'Container',
1356                 info: undefined
1357         },
1358
1359         'mysql': {
1360                 title: 'MySQL',
1361                 info: undefined
1362         },
1363
1364         'phpfpm': {
1365                 title: 'PHP-FPM',
1366                 info: undefined,
1367         },
1368
1369         'nginx': {
1370                 title: 'nginx',
1371                 info: undefined,
1372         },
1373
1374         'apache': {
1375                 title: 'Apache',
1376                 info: undefined,
1377         },
1378
1379         'named': {
1380                 title: 'named',
1381                 info: undefined
1382         }
1383 };
1384
1385 var submenuData = {
1386         'mem.ksm': {
1387                 title: 'Memory Deduper',
1388                 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.'
1389         },
1390
1391         'netfilter.conntrack': {
1392                 title: 'Connection Tracker',
1393                 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.'
1394         },
1395
1396         'netfilter.nfacct': {
1397                 title: 'Bandwidth Accounting',
1398                 info: 'The following information is read using the <code>nfacct.plugin</code>.'
1399         },
1400
1401         'netfilter.synproxy': {
1402                 title: 'DDoS Protection',
1403                 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.'
1404         }
1405 };
1406
1407 var chartData = {
1408         'mysql.net': {
1409                 info: 'The amount of data sent to mysql clients (<strong>out</strong>) and received from mysql clients (<strong>in</strong>).'
1410         },
1411
1412         'mysql.queries': {
1413                 info: 'The number of statements executed by the server.<ul>' +
1414                 '<li><strong>queries</strong> counts the statements executed within stored SQL programs.</li>' +
1415                 '<li><strong>questions</strong> counts the statements sent to the mysql server by mysql clients.</li>' +
1416                 '<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.' +
1417                 ' 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>' +
1418                 '</ul>'
1419         },
1420
1421         'mysql.handlers': {
1422                 info: 'Usage of the internal handlers of mysql. This chart provides very good insights of what the mysql server is actually doing.' +
1423                 ' (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>' +
1424                 '<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>' +
1425                 '<li><strong>delete</strong>, the number of times that rows have been deleted from tables.</li>' +
1426                 '<li><strong>prepare</strong>, a counter for the prepare phase of two-phase commit operations.</li>' +
1427                 '<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>' +
1428                 '<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>' +
1429                 '<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>' +
1430                 '<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>' +
1431                 '<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>' +
1432                 '<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>' +
1433                 '<li><strong>rollback</strong>, the number of requests for a storage engine to perform a rollback operation.</li>' +
1434                 '<li><strong>savepoint</strong>, the number of requests for a storage engine to place a savepoint.</li>' +
1435                 '<li><strong>savepoint rollback</strong>, the number of requests for a storage engine to roll back to a savepoint.</li>' +
1436                 '<li><strong>update</strong>, the number of requests to update a row in a table.</li>' +
1437                 '<li><strong>write</strong>, the number of requests to insert a row in a table.</li>' +
1438                 '</ul>'
1439         },
1440
1441         'mysql.table_locks': {
1442                 info: 'MySQL table locks counters: <ul>' +
1443                 '<li><strong>immediate</strong>, the number of times that a request for a table lock could be granted immediately.</li>' +
1444                 '<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>' +
1445                 '</ul>'
1446         },
1447
1448         'system.cpu': {
1449                 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.'
1450         },
1451
1452         'system.load': {
1453                 info: 'Current system load read from <code>/proc/loadavg</code>.',
1454                 height: 0.7
1455         },
1456
1457         'system.io': {
1458                 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.'
1459         },
1460
1461         'system.swapio': {
1462                 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).'
1463         },
1464
1465         'system.pgfaults': {
1466                 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.'
1467         },
1468
1469         'system.entropy': {
1470                 colors: '#CC22AA',
1471                 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.'
1472         },
1473
1474         'system.forks': {
1475                 colors: '#5555DD',
1476                 info: 'The number of new processes created per second, read from <code>/proc/stat</code>.'
1477         },
1478
1479         'system.intr': {
1480                 colors: '#DD5555',
1481                 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.'
1482         },
1483
1484         'system.interrupts': {
1485                 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.'
1486         },
1487
1488         'system.softirqs': {
1489                 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.'
1490         },
1491
1492         'system.processes': {
1493                 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.'
1494         },
1495
1496         'system.active_processes': {
1497                 info: 'All system active processes, read from <code>/proc/loadavg</code>.'
1498         },
1499
1500         'system.ctxt': {
1501                 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.'
1502         },
1503
1504         'system.idlejitter': {
1505                 colors: '#5555AA',
1506                 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).'
1507         },
1508
1509         'system.ipv4': {
1510                 info: 'Total IPv4 Traffic, read from <code>/proc/net/netstat</code>.'
1511         },
1512
1513         'system.ipv6': {
1514                 info: 'Total IPv6 Traffic, read from <code>/proc/net/snmp6</code>.'
1515         },
1516
1517         'system.ram': {
1518                 info: 'System memory, read from <code>/proc/meminfo</code>.'
1519         },
1520
1521         'system.swap': {
1522                 info: 'System swap memory, read from <code>/proc/meminfo</code>.'
1523         },
1524
1525         'mem.ksm_savings': {
1526                 heads: [
1527                         gaugeChart('Saved', '12%', 'savings', '#0099CC')
1528                 ]
1529         },
1530
1531         'mem.ksm_ratios': {
1532                 heads: [
1533                         function(id) {
1534                                 return  '<div data-netdata="' + id + '"'
1535                                         + ' data-gauge-max-value="100"'
1536                                         + ' data-chart-library="gauge"'
1537                                         + ' data-title="Savings"'
1538                                         + ' data-units="percentage %"'
1539                                         + ' data-gauge-adjust="width"'
1540                                         + ' data-width="12%"'
1541                                         + ' data-before="0"'
1542                                         + ' data-after="-CHART_DURATION"'
1543                                         + ' data-points="CHART_DURATION"'
1544                                         + ' role="application"></div>';
1545                         }
1546                 ]
1547         },
1548
1549         'mem.committed': {
1550                 colors: NETDATA.colors[3]
1551         },
1552
1553         'apps.cpu': {
1554                 height: 2.0
1555         },
1556
1557         'apps.preads': {
1558                 height: 2.0
1559         },
1560
1561         'apps.pwrites': {
1562                 height: 2.0
1563         },
1564
1565         'users.cpu': {
1566                 height: 2.0
1567         },
1568
1569         'users.preads': {
1570                 height: 2.0
1571         },
1572
1573         'users.pwrites': {
1574                 height: 2.0
1575         },
1576
1577         'groups.cpu': {
1578                 height: 2.0
1579         },
1580
1581         'groups.preads': {
1582                 height: 2.0
1583         },
1584
1585         'groups.pwrites': {
1586                 height: 2.0
1587         },
1588
1589         'tc.qos': {
1590                 heads: [
1591                         function(id) {
1592                                 if(id.match(/.*-ifb$/))
1593                                         return gaugeChart('Inbound', '12%', '', '#5555AA');
1594                                 else
1595                                         return gaugeChart('Outbound', '12%', '', '#AA9900');
1596                         }
1597                 ]
1598         },
1599
1600         'net.net': {
1601                 heads: [
1602                         gaugeChart('Received', '12%', 'received'),
1603                         gaugeChart('Sent', '12%', 'sent')
1604                 ]
1605         },
1606
1607         'disk.util': {
1608                 colors: '#FF5588',
1609                 heads: [
1610                         gaugeChart('Utilization', '12%', '', '#FF5588')
1611                 ],
1612                 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.'
1613         },
1614
1615         'disk.backlog': {
1616                 colors: '#0099CC',
1617                 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.'
1618         },
1619
1620         'disk.io': {
1621                 heads: [
1622                         gaugeChart('Read', '12%', 'reads'),
1623                         gaugeChart('Write', '12%', 'writes')
1624                 ],
1625                 info: 'Amount of data transferred to and from disk.'
1626         },
1627
1628         'disk.ops': {
1629                 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).'
1630         },
1631
1632         'disk.qops': {
1633                 info: 'I/O operations currently in progress. This metric is a snapshot - it is not an average over the last interval.'
1634         },
1635
1636         'netfilter.sockets': {
1637                 colors: '#88AA00',
1638                 heads: [
1639                         gaugeChart('Active Connections', '12%', '', '#88AA00')
1640                 ]
1641         },
1642
1643         'netfilter.new': {
1644                 heads: [
1645                         gaugeChart('New Connections', '12%', 'new', '#5555AA')
1646                 ]
1647         },
1648
1649         'disk.iotime': {
1650                 height: 0.5,
1651                 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.'
1652         },
1653         'disk.mops': {
1654                 height: 0.5,
1655                 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.'
1656         },
1657         'disk.svctm': {
1658                 height: 0.5,
1659                 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.'
1660         },
1661         'disk.avgsz': {
1662                 height: 0.5,
1663                 info: 'The average I/O operation size.'
1664         },
1665         'disk.await': {
1666                 height: 0.5,
1667                 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.'
1668         },
1669
1670         'disk.space': {
1671                 info: 'Disk space utilization. reserved for root is automatically reserved by the system to prevent the root user from getting out of space.'
1672         },
1673         'disk.inodes': {
1674                 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.'
1675         },
1676         'apache.connections': {
1677                 colors: NETDATA.colors[4],
1678                 mainheads: [
1679                         gaugeChart('Connections', '12%', '', NETDATA.colors[4])
1680                 ]
1681         },
1682
1683         'apache.requests': {
1684                 colors: NETDATA.colors[0],
1685                 mainheads: [
1686                         gaugeChart('Connections', '12%', '', NETDATA.colors[0])
1687                 ]
1688         },
1689
1690         'apache.net': {
1691                 colors: NETDATA.colors[3],
1692                 mainheads: [
1693                         gaugeChart('Bandwidth', '12%', '', NETDATA.colors[3])
1694                 ]
1695         },
1696
1697         'apache.workers': {
1698                 mainheads: [
1699                         function(id) {
1700                                 return  '<div data-netdata="' + id + '"'
1701                                         + ' data-dimensions="busy"'
1702                                         + ' data-append-options="percentage"'
1703                                         + ' data-gauge-max-value="100"'
1704                                         + ' data-chart-library="gauge"'
1705                                         + ' data-title="Workers Utilization"'
1706                                         + ' data-units="percentage %"'
1707                                         + ' data-gauge-adjust="width"'
1708                                         + ' data-width="12%"'
1709                                         + ' data-before="0"'
1710                                         + ' data-after="-CHART_DURATION"'
1711                                         + ' data-points="CHART_DURATION"'
1712                                         + ' role="application"></div>';
1713                         }
1714                 ]
1715         },
1716
1717         'apache.bytesperreq': {
1718                 colors: NETDATA.colors[3],
1719                 height: 0.5
1720         },
1721
1722         'apache.reqpersec': {
1723                 colors: NETDATA.colors[4],
1724                 height: 0.5
1725         },
1726
1727         'apache.bytespersec': {
1728                 colors: NETDATA.colors[6],
1729                 height: 0.5
1730         },
1731
1732         'nginx.connections': {
1733                 colors: NETDATA.colors[4],
1734                 mainheads: [
1735                         gaugeChart('Connections', '12%', '', NETDATA.colors[4])
1736                 ]
1737         },
1738
1739         'nginx.requests': {
1740                 colors: NETDATA.colors[0],
1741                 mainheads: [
1742                         gaugeChart('Requests', '12%', '', NETDATA.colors[0])
1743                 ]
1744         }
1745 };
1746
1747 function anyAttribute(obj, attr, key, def) {
1748         if(typeof obj[key] !== 'undefined') {
1749                 if(typeof obj[key][attr] !== 'undefined')
1750                         return obj[key][attr];
1751         }
1752         return def;
1753 }
1754
1755 function menuTitle(chart) {
1756         if(typeof chart.menu_pattern !== 'undefined') {
1757                 return anyAttribute(menuData, 'title', chart.menu_pattern, chart.menu_pattern).toString()
1758                                 + ': ' + chart.type.slice(-(chart.type.length - chart.menu_pattern.length - 1)).toString();
1759         }
1760
1761         return anyAttribute(menuData, 'title', chart.menu, chart.menu);
1762 }
1763
1764 function menuInfo(menu) {
1765         return anyAttribute(menuData, 'info', menu, null);
1766 }
1767
1768 function menuHeight(menu, relative) {
1769         return anyAttribute(menuData, 'height', menu, 1.0) * relative;
1770 }
1771
1772 function submenuTitle(menu, submenu) {
1773         var key = menu + '.' + submenu;
1774         return anyAttribute(submenuData, 'title', key, submenu);
1775 }
1776
1777 function submenuInfo(menu, submenu) {
1778         var key = menu + '.' + submenu;
1779         return anyAttribute(submenuData, 'info', key, null);
1780 }
1781
1782 function submenuHeight(menu, submenu, relative) {
1783         var key = menu + '.' + submenu;
1784         return anyAttribute(submenuData, 'height', key, 1.0) * relative;
1785 }
1786
1787
1788 function chartInfo(id) {
1789         if(typeof chartData[id] !== 'undefined' && typeof chartData[id].info !== 'undefined')
1790                 return '<div class="chart-message netdata-chart-alignment" role="document">' + chartData[id].info + '</div>';
1791         else
1792                 return '';
1793 }
1794
1795 function chartHeight(id, def) {
1796         if(typeof chartData[id] !== 'undefined' && typeof chartData[id].height !== 'undefined')
1797                 return def * chartData[id].height;
1798         else
1799                 return def;
1800 }
1801
1802
1803 // ----------------------------------------------------------------------------
1804
1805 // enrich the data structure returned by netdata
1806 // to reflect our menu system and content
1807 function enrichChartData(chart) {
1808         var tmp = chart.type.split('_')[0];
1809
1810         switch(tmp) {
1811                 case 'ap':
1812                 case 'net':
1813                 case 'disk':
1814                         chart.menu = tmp;
1815                         break;
1816
1817                 case 'mysql':
1818                 case 'phpfpm':
1819                 case 'nginx':
1820                 case 'apache':
1821                 case 'named':
1822                 case 'cgroup':
1823                         chart.menu = chart.type;
1824                         chart.menu_pattern = tmp;
1825                         break;
1826
1827                 case 'tc':
1828                         chart.menu = tmp;
1829
1830                         // find a name for this device from fireqos info
1831                         // we strip '_(in|out)' or '(in|out)_'
1832                         if(typeof options.submenu_names[chart.family] === 'undefined' || options.submenu_names[chart.family] === chart.family) {
1833                                 var n = chart.name.split('.')[1];
1834                                 if(n.endsWith('_in'))
1835                                         options.submenu_names[chart.family] = n.slice(0, n.lastIndexOf('_in'));
1836                                 else if(n.endsWith('_out'))
1837                                         options.submenu_names[chart.family] = n.slice(0, n.lastIndexOf('_out'));
1838                                 else if(n.startsWith('in_'))
1839                                         options.submenu_names[chart.family] = n.slice(3, n.length);
1840                                 else if(n.startsWith('out_'))
1841                                         options.submenu_names[chart.family] = n.slice(4, n.length);
1842                         }
1843
1844                         // increase the priority of IFB devices
1845                         // to have inbound appear before outbound
1846                         if(chart.id.match(/.*-ifb$/))
1847                                 chart.priority--;
1848
1849                         break;
1850
1851                 default:
1852                         chart.menu = chart.type;
1853                         break;
1854         }
1855
1856         chart.submenu = chart.family;
1857 }
1858
1859 // ----------------------------------------------------------------------------
1860
1861 function name2id(s) {
1862         return s
1863                 .replace(/ /g, '_')
1864                 .replace(/\(/g, '_')
1865                 .replace(/\)/g, '_')
1866                 .replace(/\./g, '_')
1867                 .replace(/\//g, '_');
1868 }
1869
1870 function headMain(charts, duration) {
1871         var head = '';
1872
1873         if(typeof charts['system.swap'] !== 'undefined')
1874                 head += '<div style="margin-right: 10px;" data-netdata="system.swap"'
1875                 + ' data-dimensions="free"'
1876                 + ' data-append-options="percentage"'
1877                 + ' data-chart-library="easypiechart"'
1878                 + ' data-title="Free Swap"'
1879                 + ' data-units="%"'
1880                 + ' data-easypiechart-max-value="100"'
1881                 + ' data-width="8%"'
1882                 + ' data-before="0"'
1883                 + ' data-after="-' + duration.toString() + '"'
1884                 + ' data-points="' + duration.toString() + '"'
1885                 + ' data-colors="#DD4400"'
1886                 + ' role="application"></div>';
1887
1888         if(typeof charts['system.io'] !== 'undefined') {
1889                 head += '<div style="margin-right: 10px;" data-netdata="system.io"'
1890                 + ' data-dimensions="in"'
1891                 + ' data-chart-library="easypiechart"'
1892                 + ' data-title="Disk Read"'
1893                 + ' data-units="KB / s"'
1894                 + ' data-width="10%"'
1895                 + ' data-before="0"'
1896                 + ' data-after="-' + duration.toString() + '"'
1897                 + ' data-points="' + duration.toString() + '"'
1898                 + ' role="application"></div>';
1899
1900                 head += '<div style="margin-right: 10px;" data-netdata="system.io"'
1901                 + ' data-dimensions="out"'
1902                 + ' data-chart-library="easypiechart"'
1903                 + ' data-title="Disk Write"'
1904                 + ' data-units="KB / s"'
1905                 + ' data-width="10%"'
1906                 + ' data-before="0"'
1907                 + ' data-after="-' + duration.toString() + '"'
1908                 + ' data-points="' + duration.toString() + '"'
1909                 + ' role="application"></div>';
1910         }
1911
1912         if(typeof charts['system.cpu'] !== 'undefined')
1913                 head += '<div data-netdata="system.cpu"'
1914                 + ' data-chart-library="gauge"'
1915                 + ' data-title="CPU"'
1916                 + ' data-units="%"'
1917                 + ' data-gauge-max-value="100"'
1918                 + ' data-width="18%"'
1919                 + ' data-after="-' + duration.toString() + '"'
1920                 + ' data-points="' + duration.toString() + '"'
1921                 + ' data-colors="' + NETDATA.colors[12] + '"'
1922                 + ' role="application"></div>';
1923
1924         if(typeof charts['system.ipv4'] !== 'undefined') {
1925                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
1926                 + ' data-dimensions="received"'
1927                 + ' data-chart-library="easypiechart"'
1928                 + ' data-title="IPv4 Inbound"'
1929                 + ' data-units="kbps"'
1930                 + ' data-width="10%"'
1931                 + ' data-before="0"'
1932                 + ' data-after="-' + duration.toString() + '"'
1933                 + ' data-points="' + duration.toString() + '"'
1934                 + ' role="application"></div>';
1935
1936                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
1937                 + ' data-dimensions="sent"'
1938                 + ' data-chart-library="easypiechart"'
1939                 + ' data-title="IPv4 Outbound"'
1940                 + ' data-units="kbps"'
1941                 + ' data-width="10%"'
1942                 + ' data-before="0"'
1943                 + ' data-after="-' + duration.toString() + '"'
1944                 + ' data-points="' + duration.toString() + '"'
1945                 + ' role="application"></div>';
1946         }
1947         else if(typeof charts['system.ipv6'] !== 'undefined') {
1948                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv6"'
1949                 + ' data-dimensions="received"'
1950                 + ' data-chart-library="easypiechart"'
1951                 + ' data-title="IPv6 Inbound"'
1952                 + ' data-units="kbps"'
1953                 + ' data-width="10%"'
1954                 + ' data-before="0"'
1955                 + ' data-after="-' + duration.toString() + '"'
1956                 + ' data-points="' + duration.toString() + '"'
1957                 + ' role="application"></div>';
1958
1959                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv6"'
1960                 + ' data-dimensions="sent"'
1961                 + ' data-chart-library="easypiechart"'
1962                 + ' data-title="IPv6 Outbound"'
1963                 + ' data-units="kbps"'
1964                 + ' data-width="10%"'
1965                 + ' data-before="0"'
1966                 + ' data-after="-' + duration.toString() + '"'
1967                 + ' data-points="' + duration.toString() + '"'
1968                 + ' role="application"></div>';
1969         }
1970
1971         if(typeof charts['system.ram'] !== 'undefined')
1972                 head += '<div style="margin-right: 10px;" data-netdata="system.ram"'
1973                 + ' data-dimensions="cached|free"'
1974                 + ' data-append-options="percentage"'
1975                 + ' data-chart-library="easypiechart"'
1976                 + ' data-title="Available RAM"'
1977                 + ' data-units="%"'
1978                 + ' data-easypiechart-max-value="100"'
1979                 + ' data-width="8%"'
1980                 + ' data-after="-' + duration.toString() + '"'
1981                 + ' data-points="' + duration.toString() + '"'
1982                 + ' data-colors="' + NETDATA.colors[7] + '"'
1983                 + ' role="application"></div>';
1984
1985         return head;
1986 }
1987
1988 function generateHeadCharts(type, chart, duration) {
1989         var head = '';
1990         var hcharts = anyAttribute(chartData, type, chart.context, []);
1991         if(hcharts.length > 0) {
1992                 var hi = 0, hlen = hcharts.length;
1993                 while(hi < hlen) {
1994                         if(typeof hcharts[hi] === 'function')
1995                                 head += hcharts[hi](chart.id).replace('CHART_DURATION', duration.toString()).replace('CHART_UNIQUE_ID', chart.id);
1996                         else
1997                                 head += hcharts[hi].replace('CHART_DURATION', duration.toString()).replace('CHART_UNIQUE_ID', chart.id);
1998                         hi++;
1999                 }
2000         }
2001         return head;
2002 }
2003
2004 function renderPage(menus, data) {
2005         var div = document.getElementById('charts_div');
2006         var pcent_width = Math.floor(100 / chartsPerRow($(div).width()));
2007
2008         // find the proper duration for per-second updates
2009         var duration = Math.round(($(div).width() * pcent_width / 100 * data.update_every / 3) / 60) * 60;
2010         var html = '';
2011         var sidebar = '<ul class="nav dashboard-sidenav" data-spy="affix" id="sidebar_ul">';
2012         var mainhead = headMain(data.charts, duration);
2013
2014         // sort the menus
2015         var main = sortObjectByPriority(menus);
2016         var i = 0, len = main.length;
2017         while(i < len) {
2018                 var menu = main[i++];
2019
2020                 // generate an entry at the main menu
2021
2022                 var menuid = name2id(menu);
2023                 sidebar += '<li class=""><a href="#' + menuid + '" onClick="return scrollToId(\'' + menuid + '\');">' + menus[menu].title + '</a><ul class="nav">';
2024                 html += '<div role="section"><div role="sectionhead"><h1 id="' + menuid + '" role="heading">' + menus[menu].title + '</h1></div><div id="menu_' + menuid + '" role="document">';
2025
2026                 if(menus[menu].info !== null)
2027                         html += menus[menu].info;
2028
2029                 // console.log(' >> ' + menu + ' (' + menus[menu].priority + '): ' + menus[menu].title);
2030
2031                 var shtml = '';
2032                 var mhead = '<div class="netdata-chart-row">' + mainhead;
2033                 mainhead = '';
2034
2035                 // sort the submenus of this menu
2036                 var sub = sortObjectByPriority(menus[menu].submenus);
2037                 var si = 0, slen = sub.length;
2038                 while(si < slen) {
2039                         var submenu = sub[si++];
2040
2041                         // generate an entry at the submenu
2042                         var submenuid = name2id(menu + '_' + submenu);
2043                         sidebar += '<li class><a href="#' + submenuid + '" onClick="return scrollToId(\'' + submenuid + '\');">' + menus[menu].submenus[submenu].title + '</a></li>';
2044                         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>';
2045
2046                         if(menus[menu].submenus[submenu].info !== null)
2047                                 shtml += '<div class="chart-message netdata-chart-alignment" role="document">' + menus[menu].submenus[submenu].info + '</div>';
2048
2049                         var head = '<div class="netdata-chart-row">';
2050                         var chtml = '';
2051
2052                         // console.log('    \------- ' + submenu + ' (' + menus[menu].submenus[submenu].priority + '): ' + menus[menu].submenus[submenu].title);
2053
2054                         // sort the charts in this submenu of this menu
2055                         menus[menu].submenus[submenu].charts.sort(prioritySort);
2056                         var ci = 0, clen = menus[menu].submenus[submenu].charts.length;
2057                         while(ci < clen) {
2058                                 var chart = menus[menu].submenus[submenu].charts[ci++];
2059
2060                                 // generate the submenu heading charts
2061                                 mhead += generateHeadCharts('mainheads', chart, duration);
2062                                 head += generateHeadCharts('heads', chart, duration);
2063
2064                                 // generate the chart
2065                                 chtml += chartInfo(chart.context) + '<div data-netdata="' + chart.id + '"'
2066                                         + ' data-width="' + pcent_width.toString() + '%"'
2067                                         + ' data-height="' + chartHeight(chart.context, options.chartsHeight).toString() + 'px"'
2068                                         + ' data-before="0"'
2069                                         + ' data-after="-' + duration.toString() + '"'
2070                                         + ' data-id="' + name2id(options.hostname + '/' + chart.id) + '"'
2071                                         + ' data-colors="' + anyAttribute(chartData, 'colors', chart.context, '') + '"'
2072                                         + ' role="application"></div>';
2073
2074                                 // console.log('         \------- ' + chart.id + ' (' + chart.priority + '): ' + chart.context  + ' height: ' + menus[menu].submenus[submenu].height);
2075                         }
2076
2077                         head += '</div>';
2078                         shtml += head + chtml + '</div>';
2079                 }
2080
2081                 mhead += '</div>';
2082                 sidebar += '</ul></li>';
2083                 html += mhead + shtml + '</div></div><hr role="separator"/>';
2084         }
2085
2086         sidebar += '</ul>';
2087         div.innerHTML = html;
2088         document.getElementById('sidebar').innerHTML = sidebar;
2089         finalizePage();
2090 }
2091
2092 function renderChartsAndMenu(data) {
2093         var menus = {};
2094         var charts = data.charts;
2095
2096         for(var c in charts) {
2097                 enrichChartData(charts[c]);
2098
2099                 // create the menu
2100                 if(typeof menus[charts[c].menu] === 'undefined') {
2101                         menus[charts[c].menu] = {
2102                                 priority: charts[c].priority,
2103                                 submenus: {},
2104                                 title: menuTitle(charts[c]),
2105                                 info: menuInfo(charts[c].menu),
2106                                 height: menuHeight(charts[c].menu, options.chartsHeight)
2107                         };
2108                 }
2109
2110                 if(charts[c].priority < menus[charts[c].menu].priority)
2111                         menus[charts[c].menu].priority = charts[c].priority;
2112
2113                 // create the submenu
2114                 if(typeof menus[charts[c].menu].submenus[charts[c].submenu] === 'undefined') {
2115                         menus[charts[c].menu].submenus[charts[c].submenu] = {
2116                                 priority: charts[c].priority,
2117                                 charts: new Array(),
2118                                 title: null,
2119                                 info: submenuInfo(charts[c].menu, charts[c].submenu),
2120                                 height: submenuHeight(charts[c].menu, charts[c].submenu, menus[charts[c].menu].height)
2121                         };
2122                 }
2123
2124                 if(charts[c].priority < menus[charts[c].menu].submenus[charts[c].submenu].priority)
2125                         menus[charts[c].menu].submenus[charts[c].submenu].priority = charts[c].priority;
2126
2127                 // index the chart in the menu/submenu
2128                 menus[charts[c].menu].submenus[charts[c].submenu].charts.push(charts[c]);
2129         }
2130
2131         // propagate the descriptive subname given to QoS
2132         // to all the other submenus with the same name
2133         for(var m in menus) {
2134                 for(var s in menus[m].submenus) {
2135                         // set the family using a name
2136                         if(typeof options.submenu_names[s] !== 'undefined') {
2137                                 menus[m].submenus[s].title = s + ' (' + options.submenu_names[s] + ')';
2138                         }
2139                         else {
2140                                 menus[m].submenus[s].title = submenuTitle(m, s);
2141                         }
2142                 }
2143         }
2144
2145         renderPage(menus, data);
2146 }
2147
2148 function downloadAllCharts(netdata_url) {
2149         if(typeof netdata_url === 'undefined' || netdata_url === null)
2150                 netdata_url = NETDATA.serverDefault;
2151
2152         NETDATA.pause(function() {
2153
2154                 // download all the charts the server knows
2155                 NETDATA.chartRegistry.downloadAll(netdata_url, function(data) {
2156
2157                         options.data = data;
2158                         options.hostname = data.hostname;
2159                         document.getElementById('hostname').innerHTML = options.hostname;
2160                         document.getElementById('hostname').href = NETDATA.serverDefault;
2161                         document.title = options.hostname + ' netdata dashboard';
2162
2163                         renderChartsAndMenu(data);
2164
2165                         // prepare our DOM
2166 //                      prepareScreen(data);
2167
2168                         // due to affix issues, prepareScreen() will unpause
2169                         // netdata as needed
2170                 });
2171         });
2172 }
2173
2174 // ----------------------------------------------------------------------------
2175
2176 function versionLog(msg) {
2177         document.getElementById('versionCheckLog').innerHTML = msg;
2178 }
2179
2180 function getNetdataVersion(callback) {
2181         versionLog('Downloading installed version info from netdata...');
2182
2183         $.ajax({
2184                 url: 'version.txt',
2185                 async: true,
2186                 cache: false
2187         })
2188         .done(function(data) {
2189                 data = data.replace(/(\r\n|\n|\r| |\t)/gm,"");
2190                 if(data.length !== 40) {
2191                         versionLog('Received version string is invalid.');
2192                         callback(null);
2193                 }
2194                 else {
2195                         versionLog('Installed version of netdata is ' + data);
2196                         document.getElementById('netdataVersion').innerHTML = data;
2197                         callback(data);
2198                 }
2199         })
2200         .fail(function() {
2201                 versionLog('Failed to download installed version info from netdata!');
2202                 callback(null);
2203         });
2204 }
2205
2206 function getGithubLatestCommit(callback) {
2207         versionLog('Downloading latest version info from github...');
2208
2209         $.ajax({
2210                 url: 'https://api.github.com/repos/firehol/netdata/commits',
2211                 async: true,
2212                 cache: false
2213         })
2214         .done(function(data) {
2215                 versionLog('Latest version info from github is ' + data[0].sha);
2216                 callback(data[0].sha);
2217         })
2218         .fail(function() {
2219                 versionLog('Failed to download installed version info from github!');
2220                 callback(null);
2221         });
2222 }
2223
2224 function checkForUpdate(callback) {
2225         getNetdataVersion(function(sha1) {
2226                 if(sha1 === null) callback(null, null);
2227
2228                 getGithubLatestCommit(function(sha2) {
2229                         callback(sha1, sha2);
2230                 });
2231         });
2232
2233         return null;
2234 }
2235
2236 var updateBlinkCounter = 0;
2237 function notifyForUpdate(force) {
2238         versionLog('<p>checking for updates...</p>');
2239
2240         var now = new Date().getTime();
2241
2242         if(typeof force === 'undefined' || force !== true) {
2243                 var last = loadLocalStorage('last_update_check');
2244
2245                 if(typeof last === 'string')
2246                         last = parseInt(last);
2247                 else
2248                         last = 0;
2249
2250                 if(now - last < 3600000 * 8) {
2251                         // no need to check it - too soon
2252                         return;
2253                 }
2254         }
2255
2256         checkForUpdate(function(sha1, sha2) {
2257                 var save = false;
2258
2259                 if(sha1 === null) {
2260                         save = false;
2261                         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>');
2262                 }
2263                 else if(sha2 === null) {
2264                         save = false;
2265                         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>');
2266                 }
2267                 else if(sha1 === sha2) {
2268                         save = true;
2269                         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>');
2270                 }
2271                 else {
2272                         save = true;
2273                         var compare = 'https://github.com/firehol/netdata/compare/' + sha1.toString() + '...' + sha2.toString();
2274
2275                         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>');
2276
2277                         function updateButtonBlink() {
2278                                 updateBlinkCounter--;
2279                                 if(updateBlinkCounter > 0)
2280                                         $('#updateButton').fadeOut(500).fadeIn(500, updateButtonBlink);
2281                         }
2282
2283                         if(updateBlinkCounter === 0) {
2284                                 updateBlinkCounter = 300;
2285                                 updateButtonBlink();
2286                         }
2287                 }
2288
2289                 if(save)
2290                         saveLocalStorage('last_update_check', now.toString());
2291         });
2292 }
2293
2294 // ----------------------------------------------------------------------------
2295
2296 function getUrlParameter(sParam) {
2297     var sPageURL = decodeURIComponent(window.location.search.substring(1)),
2298         sURLVariables = sPageURL.split('&'),
2299         sParameterName,
2300         i;
2301
2302     for (i = 0; i < sURLVariables.length; i++) {
2303         sParameterName = sURLVariables[i].split('=');
2304
2305         if (sParameterName[0] === sParam) {
2306             return sParameterName[1] === undefined ? true : sParameterName[1];
2307         }
2308     }
2309 }
2310
2311 function finalizePage() {
2312         // resize all charts - without starting the background thread
2313         // this has to be done while NETDATA is paused
2314         // if we ommit this, the affix menu will be wrong, since all
2315         // the Dom elements are initially zero-sized
2316         NETDATA.parseDom();
2317
2318         var before = 0, after = 0, nowelcome = 0;
2319         after = getUrlParameter('force_after_ms');
2320         before = getUrlParameter('force_before_ms');
2321         nowelcome = (getUrlParameter('nowelcome') === true)?true:false;
2322
2323         if(before > 0 && after > 0) {
2324                 nowelcome = true;
2325                 NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], after, before);
2326         }
2327
2328         // ------------------------------------------------------------------------
2329         // https://github.com/viralpatel/jquery.shorten/blob/master/src/jquery.shorten.js
2330         $.fn.shorten = function(settings) {
2331                 "use strict";
2332
2333                 var config = {
2334                         showChars: 750,
2335                         minHideChars: 10,
2336                         ellipsesText: "...",
2337                         moreText: '<i class="fa fa-expand" aria-hidden="true"></i> show more information',
2338                         lessText: '<i class="fa fa-compress" aria-hidden="true"></i> show less information',
2339                         onLess: function() { NETDATA.onscroll(); },
2340                         onMore: function() { NETDATA.onscroll(); },
2341                         errMsg: null,
2342                         force: false
2343                 };
2344
2345                 if (settings) {
2346                         $.extend(config, settings);
2347                 }
2348
2349                 if ($(this).data('jquery.shorten') && !config.force) {
2350                         return false;
2351                 }
2352                 $(this).data('jquery.shorten', true);
2353
2354                 $(document).off("click", '.morelink');
2355
2356                 $(document).on({
2357                         click: function() {
2358
2359                                 var $this = $(this);
2360                                 if ($this.hasClass('less')) {
2361                                         $this.removeClass('less');
2362                                         $this.html(config.moreText);
2363                                         $this.parent().prev().animate({'height':'0'+'%'}, 0, function () { $this.parent().prev().prev().show(); }).hide(0, function() {
2364                                                 config.onLess();
2365                                         });
2366
2367                                 } else {
2368                                         $this.addClass('less');
2369                                         $this.html(config.lessText);
2370                                         $this.parent().prev().animate({'height':'100'+'%'}, 0, function () { $this.parent().prev().prev().hide(); }).show(0, function() {
2371                                                 config.onMore();
2372                                         });
2373                                 }
2374                                 return false;
2375                         }
2376                 }, '.morelink');
2377
2378                 return this.each(function() {
2379                         var $this = $(this);
2380
2381                         var content = $this.html();
2382                         var contentlen = $this.text().length;
2383                         if (contentlen > config.showChars + config.minHideChars) {
2384                                 var c = content.substr(0, config.showChars);
2385                                 if (c.indexOf('<') >= 0) // If there's HTML don't want to cut it
2386                                 {
2387                                         var inTag = false; // I'm in a tag?
2388                                         var bag = ''; // Put the characters to be shown here
2389                                         var countChars = 0; // Current bag size
2390                                         var openTags = []; // Stack for opened tags, so I can close them later
2391                                         var tagName = null;
2392
2393                                         for (var i = 0, r = 0; r <= config.showChars; i++) {
2394                                                 if (content[i] == '<' && !inTag) {
2395                                                         inTag = true;
2396
2397                                                         // This could be "tag" or "/tag"
2398                                                         tagName = content.substring(i + 1, content.indexOf('>', i));
2399
2400                                                         // If its a closing tag
2401                                                         if (tagName[0] == '/') {
2402
2403
2404                                                                 if (tagName != '/' + openTags[0]) {
2405                                                                         config.errMsg = 'ERROR en HTML: the top of the stack should be the tag that closes';
2406                                                                 } else {
2407                                                                         openTags.shift(); // Pops the last tag from the open tag stack (the tag is closed in the retult HTML!)
2408                                                                 }
2409
2410                                                         } else {
2411                                                                 // There are some nasty tags that don't have a close tag like <br/>
2412                                                                 if (tagName.toLowerCase() != 'br') {
2413                                                                         openTags.unshift(tagName); // Add to start the name of the tag that opens
2414                                                                 }
2415                                                         }
2416                                                 }
2417                                                 if (inTag && content[i] == '>') {
2418                                                         inTag = false;
2419                                                 }
2420
2421                                                 if (inTag) { bag += content.charAt(i); } // Add tag name chars to the result
2422                                                 else {
2423                                                         r++;
2424                                                         if (countChars <= config.showChars) {
2425                                                                 bag += content.charAt(i); // Fix to ie 7 not allowing you to reference string characters using the []
2426                                                                 countChars++;
2427                                                         } else // Now I have the characters needed
2428                                                         {
2429                                                                 if (openTags.length > 0) // I have unclosed tags
2430                                                                 {
2431                                                                         //console.log('They were open tags');
2432                                                                         //console.log(openTags);
2433                                                                         for (j = 0; j < openTags.length; j++) {
2434                                                                                 //console.log('Cierro tag ' + openTags[j]);
2435                                                                                 bag += '</' + openTags[j] + '>'; // Close all tags that were opened
2436
2437                                                                                 // 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
2438                                                                         }
2439                                                                         break;
2440                                                                 }
2441                                                         }
2442                                                 }
2443                                         }
2444                                         c = $('<div/>').html(bag + '<span class="ellip">' + config.ellipsesText + '</span>').html();
2445                                 }else{
2446                                         c+=config.ellipsesText;
2447                                 }
2448
2449                                 var html = '<div class="shortcontent">' + c +
2450                                                 '</div><div class="allcontent">' + content +
2451                                                 '</div><span><a href="javascript://nop/" class="morelink">' + config.moreText + '</a></span>';
2452
2453                                 $this.html(html);
2454                                 $this.find(".allcontent").hide(); // Hide all text
2455                                 $('.shortcontent p:last', $this).css('margin-bottom', 0); //Remove bottom margin on last paragraph as it's likely shortened
2456                         }
2457                 });
2458
2459         };
2460         $(".chart-message").shorten();
2461         // ------------------------------------------------------------------------
2462
2463         // let it run (update the charts)
2464         NETDATA.unpause();
2465
2466         // check if we have to jump to a specific section
2467         scrollToId(location.hash.replace('#',''));
2468
2469         /* activate bootstrap sidebar (affix) */
2470         $('#sidebar').affix({
2471                 offset: {
2472                         top: (isdemo())?150:0,
2473                         bottom: 0
2474                 }
2475         });
2476
2477         /* fix scrolling of very long affix lists
2478            http://stackoverflow.com/questions/21691585/bootstrap-3-1-0-affix-too-long
2479          */
2480         $('#sidebar').on('affixed.bs.affix', function() {
2481                 $(this).removeAttr('style');
2482         });
2483
2484         /* activate bootstrap scrollspy (needed for sidebar) */
2485         $(document.body).scrollspy({
2486                 target: '#sidebar',
2487                 offset: $(window).height() / 3 // controls the diff of the <hX> element to the top, to select it
2488         });
2489
2490         // change the URL based on the current position of the screen
2491         $('#sidebar').on('activate.bs.scrollspy', function (e) {
2492                 var el = $(e.target);
2493                 if(el.find('ul').size() == 0)
2494                         history.replaceState(null, document.title, el.find('a').attr('href'));
2495         });
2496
2497         document.getElementById('footer').style.display = 'block';
2498
2499         var update_options_modal = function() {
2500                 // console.log('update_options_modal');
2501
2502                 var sync_option = function(option) {
2503                         var self = $('#' + option);
2504
2505                         if(self.prop('checked') !== NETDATA.getOption(option)) {
2506                                 // console.log('switching ' + option.toString());
2507                                 self.bootstrapToggle(NETDATA.getOption(option)?'on':'off');
2508                         }
2509                 }
2510
2511                 var theme_sync_option = function(option) {
2512                         var self = $('#' + option);
2513
2514                         self.bootstrapToggle(netdataTheme === 'slate'?'on':'off');
2515                 }
2516
2517                 sync_option('eliminate_zero_dimensions');
2518                 sync_option('destroy_on_hide');
2519                 sync_option('parallel_refresher');
2520                 sync_option('concurrent_refreshes');
2521                 sync_option('sync_selection');
2522                 sync_option('sync_pan_and_zoom');
2523                 sync_option('stop_updates_when_focus_is_lost');
2524                 sync_option('smooth_plot');
2525                 sync_option('pan_and_zoom_data_padding');
2526                 sync_option('show_help');
2527                 theme_sync_option('netdata_theme_control');
2528
2529                 if(NETDATA.getOption('parallel_refresher') === false) {
2530                         $('#concurrent_refreshes_row').hide();
2531                 }
2532                 else {
2533                         $('#concurrent_refreshes_row').show();
2534                 }
2535         };
2536         NETDATA.setOption('setOptionCallback', update_options_modal);
2537
2538         // handle options changes
2539         $('#eliminate_zero_dimensions').change(function()       { NETDATA.setOption('eliminate_zero_dimensions', $(this).prop('checked')); });
2540         $('#destroy_on_hide').change(function()                 { NETDATA.setOption('destroy_on_hide', $(this).prop('checked')); });
2541         $('#parallel_refresher').change(function()              { NETDATA.setOption('parallel_refresher', $(this).prop('checked')); });
2542         $('#concurrent_refreshes').change(function()            { NETDATA.setOption('concurrent_refreshes', $(this).prop('checked')); });
2543         $('#sync_selection').change(function()                  { NETDATA.setOption('sync_selection', $(this).prop('checked')); });
2544         $('#sync_pan_and_zoom').change(function()               { NETDATA.setOption('sync_pan_and_zoom', $(this).prop('checked')); });
2545         $('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); });
2546         $('#smooth_plot').change(function()                     { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
2547         $('#pan_and_zoom_data_padding').change(function()       { NETDATA.setOption('pan_and_zoom_data_padding', $(this).prop('checked')); });
2548         $('#show_help').change(function()                       { NETDATA.setOption('show_help', $(this).prop('checked')); location.reload(); });
2549
2550         // this has to be the last
2551         // it reloads the page
2552         $('#netdata_theme_control').change(function() {
2553                 if(setTheme($(this).prop('checked')?'slate':'white'))
2554                         location.reload();
2555         });
2556
2557         $('#updateModal').on('shown.bs.modal', function() {
2558                 notifyForUpdate(true);
2559         });
2560
2561         $('#deleteRegistryModal').on('hidden.bs.modal', function() {
2562                 deleteRegistryGuid = null;
2563         });
2564
2565         if(isdemo()) {
2566                 if(!nowelcome) {
2567                         setTimeout(function() {
2568                                 $('#welcomeModal').modal();
2569                         }, 1000);
2570                 }
2571
2572                 // google analytics when this is used for the home page of the demo sites
2573                 // this does not run on user's installations
2574                 setTimeout(function() {
2575                         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
2576                         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
2577                         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
2578                         })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
2579
2580                         ga('create', 'UA-64295674-3', 'auto');
2581                         ga('send', 'pageview');
2582                 }, 2000);
2583         }
2584         else notifyForUpdate();
2585 }
2586
2587 function resetDashboardOptions() {
2588         var help = NETDATA.options.current.show_help;
2589
2590         NETDATA.resetOptions();
2591         if(setTheme('slate'))
2592                 location.reload();
2593
2594         if(help !== NETDATA.options.current.show_help)
2595                 location.reload();
2596 }
2597
2598 downloadAllCharts();
2599
2600 </script>
2601
2602 </body>
2603 </html>