web/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4     <title>netdata dashboard</title>
   5     <meta name="application-name" content="netdata">
   6
   7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   8     <meta charset="utf-8">
   9     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10     <meta name="viewport" content="width=device-width, initial-scale=1">
  11     <meta name="apple-mobile-web-app-capable" content="yes">
  12     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  13     <meta name="author" content="costa@tsaousis.gr">
  14
  15     <link rel="shortcut icon" href="images/seo-performance-multi-size.ico">
  16
  17     <link rel="apple-touch-icon" href="images/seo-performance-72.png">
  18     <link rel="apple-touch-icon" sizes="72x72" href="images/seo-performance-72.png">
  19     <link rel="apple-touch-icon" sizes="114x114" href="images/seo-performance-114.png">
  20
  21     <link rel="icon" type="image/png" sizes="512x512" href="images/seo-performance-512.png">
  22     <link rel="icon" type="image/png" sizes="256x256" href="images/seo-performance-256.png">
  23     <link rel="icon" type="image/png" sizes="128x128" href="images/seo-performance-128.png">
  24     <link rel="icon" type="image/png" sizes="64x64" href="images/seo-performance-64.png">
  25     <link rel="icon" type="image/png" sizes="48x48" href="images/seo-performance-48.png">
  26     <link rel="icon" type="image/png" sizes="32x32" href="images/seo-performance-32.png">
  27     <link rel="icon" type="image/png" sizes="24x24" href="images/seo-performance-24.png">
  28     <link rel="icon" type="image/png" sizes="16x16" href="images/seo-performance-16.png">
  29
  30     <meta property="og:locale" content="en_US" />
  31     <meta property="og:image" content="http://my-netdata.io/images/post.png"/>
  32     <meta property="og:url" content="http://my-netdata.io/"/>
  33     <meta property="og:type" content="website"/>
  34     <meta property="og:site_name" content="netdata"/>
  35     <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
  36     <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
  37
  38     <style>
  39
  40     /* prevent body from hiding under the navbar */
  41     body {
  42         padding-top: 50px;
  43     }
  44
  45     .loadOverlay {
  46         position: absolute;
  47         top: 0px;
  48         left: 0px;
  49         width: 100%;
  50         height:100%;
  51         z-index: 2000;
  52         font-size: 10vh;
  53         font-family: sans-serif;
  54         padding: 40vh 0 40vh 0;
  55         font-weight: bold;
  56         text-align: center;
  57     }
  58
  59     .modal-wide .modal-dialog {
  60         width: 80%;
  61     }
  62
  63     /* fix # anchors scrolling under the navbar
  64        https://github.com/twbs/bootstrap/issues/1768#issuecomment-46519033
  65      */
  66     h1 {
  67         position: relative;
  68         z-index: -1;
  69     }
  70     h2 {
  71         position: relative;
  72         z-index: -2;
  73     }
  74     h1:before, h2:before {
  75         display: block;
  76         content: " ";
  77         margin-top: -70px;
  78         height: 70px;
  79         visibility: hidden;
  80     }
  81
  82     .p {
  83         display: block;
  84         margin-top: 15px;
  85     }
  86
  87     .option-row,
  88     .option-control {
  89         vertical-align: top;
  90         padding: 10px;
  91         padding-top: 30px;
  92         padding-left: 30px;
  93     }
  94
  95     .option-info {
  96         padding: 10px;
  97     }
  98
  99     .chart-message {
 100         display: block;
 101         margin-top: 10px;
 102     }
 103
 104     .container {
 105         width: 90% !important;
 106     }
 107
 108     #masthead h1 {
 109         /*font-size: 30px;*/
 110         line-height: 1;
 111         padding-top: 30px;
 112     }
 113
 114     #masthead .well {
 115         margin-top:4%;
 116     }
 117
 118     /* fix the navbar shifting when a modal is open */
 119     /* https://github.com/twbs/bootstrap/issues/14040#issuecomment-159891033 */
 120     body.modal-open{
 121         width: 100% !important;
 122         padding-right: 0 !important;
 123 /*      overflow-y: scroll !important; */
 124 /*      position: fixed !important;*/
 125         overflow: visible;
 126     }
 127
 128     /*
 129      * Side navigation
 130      *
 131      * Scrollspy and affixed enhanced navigation to highlight sections and secondary
 132      * sections of docs content.
 133      */
 134
 135     .affix {
 136         position: static;
 137         top: 70px !important;
 138         /*width: 220px;*/
 139     }
 140
 141     .affix-top {
 142         /*width: 220px;*/
 143     }
 144
 145     .dashboard-sidebar {
 146         max-height: calc(100% - 70px) !important;
 147         overflow-y: auto;
 148         /*width: 220px !important;*/
 149     }
 150
 151     /* By default it's not affixed in mobile views, so undo that */
 152     .dashboard-sidebar.affix {
 153         position: static;
 154     }
 155
 156     @media (min-width: 768px) {
 157         .dashboard-sidebar {
 158             padding-left: 20px;
 159         }
 160     }
 161
 162     /* First level of nav */
 163     .dashboard-sidenav {
 164         margin-top: 20px;
 165         margin-bottom: 20px;
 166     }
 167
 168     /* All levels of nav */
 169     .dashboard-sidebar .nav > li > a {
 170         display: block;
 171         padding: 4px 20px;
 172         font-size: 13px;
 173         font-weight: 500;
 174         color: #767676;
 175     }
 176     .dashboard-sidebar .nav > li > a:hover,
 177     .dashboard-sidebar .nav > li > a:focus {
 178         padding-left: 19px;
 179         color: #563d7c;
 180         text-decoration: none;
 181         background-color: transparent;
 182         border-left: 1px solid #563d7c;
 183     }
 184     .dashboard-sidebar .nav > .active > a,
 185     .dashboard-sidebar .nav > .active:hover > a,
 186     .dashboard-sidebar .nav > .active:focus > a {
 187         padding-left: 18px;
 188         font-weight: bold;
 189         color: #563d7c;
 190         background-color: transparent;
 191         border-left: 2px solid #563d7c;
 192     }
 193
 194     /* Nav: second level (shown on .active) */
 195     .dashboard-sidebar .nav .nav {
 196         display: none; /* Hide by default, but at >768px, show it */
 197         padding-bottom: 10px;
 198     }
 199     .dashboard-sidebar .nav .nav > li > a {
 200         padding-top: 1px;
 201         padding-bottom: 1px;
 202         padding-left: 30px;
 203         font-size: 12px;
 204         font-weight: normal;
 205     }
 206     .dashboard-sidebar .nav .nav > li > a:hover,
 207     .dashboard-sidebar .nav .nav > li > a:focus {
 208         padding-left: 29px;
 209     }
 210     .dashboard-sidebar .nav .nav > .active > a,
 211     .dashboard-sidebar .nav .nav > .active:hover > a,
 212     .dashboard-sidebar .nav .nav > .active:focus > a {
 213         padding-left: 28px;
 214         font-weight: 500;
 215     }
 216
 217     .dropdown-menu {
 218         min-width: 200px;
 219     }
 220     .dropdown-menu.columns-2 {
 221         margin: 0;
 222         padding: 0;
 223         width: 400px;
 224     }
 225     .dropdown-menu li a {
 226         padding: 5px 15px;
 227         font-weight: 300;
 228     }
 229     .dropdown-menu.multi-column {
 230         overflow-x: hidden;
 231     }
 232     .multi-column-dropdown {
 233         list-style: none;
 234         padding: 0;
 235     }
 236     .multi-column-dropdown li a {
 237         display: block;
 238         clear: both;
 239         line-height: 1.428571429;
 240         white-space: normal;
 241     }
 242     .multi-column-dropdown li a:hover {
 243         text-decoration: none;
 244         color: #f5f5f5;
 245         background-color: #262626;
 246     }
 247     .scrollable-menu {
 248         height: auto;
 249         max-height: 80vh;
 250         overflow-x: hidden;
 251     }
 252
 253     /* Back to top (hidden on mobile) */
 254     .back-to-top,
 255     .dashboard-theme-toggle {
 256         display: none;
 257         padding: 4px 10px;
 258         margin-top: 10px;
 259         margin-left: 10px;
 260         font-size: 12px;
 261         font-weight: 500;
 262         color: #999;
 263     }
 264     .back-to-top:hover,
 265     .dashboard-theme-toggle:hover {
 266         color: #563d7c;
 267         text-decoration: none;
 268     }
 269     .dashboard-theme-toggle {
 270         margin-top: 0;
 271     }
 272
 273     @media (min-width: 768px) {
 274         .back-to-top,
 275         .dashboard-theme-toggle {
 276             display: block;
 277         }
 278
 279         /* Widen the fixed sidebar */
 280         .dashboard-sidebar.affix,
 281         .dashboard-sidebar.affix-top,
 282         .dashboard-sidebar.affix-bottom {
 283             width: 200px !important;
 284         }
 285
 286         .dashboard-sidebar.affix {
 287             position: fixed; /* Undo the static from mobile first approach */
 288             top: 20px;
 289         }
 290
 291         .dashboard-sidebar.affix-bottom {
 292             position: absolute; /* Undo the static from mobile first approach */
 293         }
 294
 295         .dashboard-sidebar.affix-bottom .dashboard-sidenav,
 296         .dashboard-sidebar.affix .dashboard-sidenav {
 297             margin-top: 0;
 298             margin-bottom: 0;
 299         }
 300     }
 301
 302     /* Show and affix the side nav when space allows it */
 303     @media (min-width: 992px) {
 304         .dashboard-sidebar .nav > .active > ul {
 305             display: block;
 306         }
 307
 308         /* Widen the fixed sidebar */
 309         .dashboard-sidebar.affix,
 310         .dashboard-sidebar.affix-top,
 311         .dashboard-sidebar.affix-bottom {
 312             width: 200px !important;
 313         }
 314         .dashboard-sidebar.affix {
 315             position: fixed; /* Undo the static from mobile first approach */
 316             top: 20px;
 317         }
 318         .dashboard-sidebar.affix-bottom {
 319             position: absolute; /* Undo the static from mobile first approach */
 320         }
 321         .dashboard-sidebar.affix-bottom .dashboard-sidenav,
 322         .dashboard-sidebar.affix .dashboard-sidenav {
 323             margin-top: 0;
 324             margin-bottom: 0;
 325         }
 326     }
 327
 328     @media (min-width: 1200px) {
 329         /* Widen the fixed sidebar again */
 330         .dashboard-sidebar.affix-bottom,
 331         .dashboard-sidebar.affix-top,
 332         .dashboard-sidebar.affix {
 333             width: 263px;
 334         }
 335     }
 336     </style>
 337
 338     <!-- check which theme to use -->
 339     <script type="text/javascript">
 340         // --------------------------------------------------------------------
 341         // urlOptions
 342
 343         var urlOptions = {
 344             hash: '#',
 345             theme: null,
 346             help: null,
 347             pan_and_zoom: false,
 348             after: 0,
 349             before: 0,
 350             nowelcome: 0,
 351             hasProperty: function(property) {
 352                 // console.log('checking property ' + property + ' of type ' + typeof(this[property]));
 353                 return typeof this[property] !== 'undefined';
 354             }
 355         };
 356
 357         function netdataPanAndZoomCallback(status, after, before) {
 358             urlOptions.pan_and_zoom = status;
 359             urlOptions.after = after;
 360             urlOptions.before = before;
 361             netdataHashUpdate();
 362         }
 363
 364         function netdataHashUpdate() {
 365             history.replaceState(null, '', netdataHash());
 366         }
 367
 368         function netdataHash() {
 369             var hash = urlOptions.hash;
 370
 371             if(urlOptions.pan_and_zoom === true) {
 372                 hash += ';after='  + urlOptions.after.toString() +
 373                         ';before=' + urlOptions.before.toString();
 374             }
 375
 376             if(urlOptions.theme !== null)
 377                 hash += ';theme=' + urlOptions.theme.toString();
 378
 379             if(urlOptions.help !== null)
 380                 hash += ';help=' + urlOptions.help.toString();
 381
 382             return hash;
 383         }
 384
 385         function netdataHashParse() {
 386             var variables = document.location.hash.split(';');
 387             var len = variables.length;
 388             while(len--) {
 389                 if(len !== 0) {
 390                     var p = variables[len].split('=');
 391                     if(urlOptions.hasProperty(p[0]) && typeof p[1] !== 'undefined')
 392                         urlOptions[p[0]] = p[1];
 393                 }
 394                 else {
 395                     if(variables[len].length > 0)
 396                         urlOptions.hash = variables[len];
 397                 }
 398             }
 399
 400             if(urlOptions.before > 0 && urlOptions.after > 0)
 401                 urlOptions.pan_and_zoom = true;
 402
 403             // console.log(urlOptions);
 404         }
 405
 406         netdataHashParse();
 407
 408         // --------------------------------------------------------------------
 409         // check options that should be processed before loading netdata.js
 410
 411         function loadLocalStorage(name) {
 412             var ret = null;
 413
 414             try {
 415                 if(typeof Storage !== "undefined" && typeof localStorage === 'object')
 416                     ret = localStorage.getItem(name);
 417             }
 418             catch(error) {
 419                 ;
 420             }
 421
 422             if(typeof ret === 'undefined' || ret === null)
 423                 return null;
 424
 425             // console.log('loaded: ' + name.toString() + ' = ' + ret.toString());
 426
 427             return ret;
 428         }
 429
 430         function saveLocalStorage(name, value) {
 431             // console.log('saving: ' + name.toString() + ' = ' + value.toString());
 432             try {
 433                 if(typeof Storage !== "undefined" && typeof localStorage === 'object') {
 434                     localStorage.setItem(name, value.toString());
 435                     return true;
 436                 }
 437             }
 438             catch(error) {
 439                 ;
 440             }
 441
 442             return false;
 443         }
 444
 445         function getTheme(def) {
 446             var ret = loadLocalStorage('netdataTheme');
 447             if(typeof ret === 'undefined' || ret === null || ret === 'undefined')
 448                 return def;
 449             else
 450                 return ret;
 451         }
 452
 453         function setTheme(theme) {
 454             if(theme === netdataTheme) return false;
 455             return saveLocalStorage('netdataTheme', theme);
 456         }
 457
 458         var netdataTheme = getTheme('slate');
 459         var netdataShowHelp = true;
 460
 461         if(urlOptions.theme !== null) {
 462             setTheme(urlOptions.theme);
 463             netdataTheme = urlOptions.theme;
 464         }
 465         else
 466             urlOptions.theme = netdataTheme;
 467
 468         if(urlOptions.help !== null) {
 469             saveLocalStorage('options.show_help', urlOptions.help);
 470             netdataShowHelp = urlOptions.help;
 471         }
 472         else {
 473             urlOptions.help = loadLocalStorage('options.show_help');
 474         }
 475
 476         // --------------------------------------------------------------------
 477         // registry call back to render my-netdata menu
 478
 479         var netdataRegistryCallback = function(machines_array) {
 480             var el = '';
 481             var a1 = '';
 482             var found = 0;
 483
 484             if(machines_array) {
 485                 function name_comparator_desc(a, b) {
 486                     if (a.name > b.name) return -1;
 487                     if (a.name < b.name) return 1;
 488                     return 0;
 489                 }
 490
 491                 var machines = machines_array.sort(name_comparator_desc);
 492                 var len = machines.length;
 493                 while(len--) {
 494                     var u = machines[len];
 495                     found++;
 496                     el += '<li id="registry_server_' + u.guid + '"><a class="registry_link" href="' + u.url + '" onClick="return gotoServerModalHandler(\'' + u.guid + '\');">' + u.name + '</a></li>';
 497                     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>';
 498                 }
 499             }
 500
 501             if(!found) {
 502                 if(machines)
 503                     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>';
 504                 else
 505                     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>';
 506
 507                 a1 += '<li><a href="#" onClick="return false;">&nbsp;</a></li>';
 508
 509                 el += '<li role="separator" class="divider"></li>' +
 510                         '<li><a href="//london.netdata.rocks/default.html">EU - London (DigitalOcean.com)</a></li>' +
 511                         '<li><a href="//atlanta.netdata.rocks/default.html">US - Atlanta (CDN77.com)</a></li>' +
 512                         '<li><a href="//athens.netdata.rocks/default.html">EU - Athens</a></li>';
 513                 a1 += '<li role="separator" class="divider"></li>' +
 514                         '<li><a href="#">&nbsp;</a></li>' +
 515                         '<li><a href="#">&nbsp;</a></li>'+
 516                         '<li><a href="#">&nbsp;</a></li>';
 517             }
 518
 519             el += '<li role="separator" class="divider"></li>';
 520             a1 += '<li role="separator" class="divider"></li>';
 521
 522             el += '<li><a href="https://github.com/firehol/netdata/wiki/mynetdata-menu-item" style="color: #999;" target="_blank">What is this?</a></li>';
 523             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>'
 524
 525             document.getElementById('mynetdata_servers').innerHTML = el;
 526             document.getElementById('mynetdata_servers2').innerHTML = el;
 527             document.getElementById('mynetdata_actions1').innerHTML = a1;
 528
 529             gotoServerInit();
 530         };
 531
 532     </script>
 533
 534     <!-- load the dashboard manager - it will do the rest -->
 535     <script type="text/javascript" src="dashboard.js?v41"></script>
 536 </head>
 537 <body data-spy="scroll" data-target="#sidebar">
 538     <div id="loadOverlay" class="loadOverlay" style="background-color: #888; color: #888;">
 539         netdata<br/><div style="font-size: 3vh;">Real-time performance monitoring, done right!</div>
 540     </div>
 541     <script type="text/javascript">
 542         // change the loadOverlay colors ASAP to match the theme
 543         document.getElementById('loadOverlay').style = (urlOptions.theme === 'slate')?"background-color:#272b30; color: #373b40;":"background-color:#fff; color: #ddd;";
 544     </script>
 545     <nav class="navbar navbar-default navbar-fixed-top" role="banner">
 546         <div class="container">
 547             <nav id="mynetdata_nav" class="collapse navbar-collapse navbar-left hidden-sm hidden-xs" role="navigation" style="padding-right: 20px;">
 548                 <ul class="nav navbar-nav">
 549                     <li class="dropdown">
 550                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">my-netdata <strong class="caret"></strong></a>
 551                         <ul class="dropdown-menu scrollable-menu inpagemenu multi-column columns-2" role="menu">
 552                             <div class="row">
 553                                 <div class="col-sm-6" style="width: 85%; padding-right: 0;">
 554                                     <ul id="mynetdata_servers" class="multi-column-dropdown">
 555                                         <li><a href="#" onclick="return false;" style="color: #999;">loading...</a></li>
 556                                     </ul>
 557                                 </div>
 558                                 <div class="col-sm-3 hidden-xs" style="width: 15%; padding-left: 0;">
 559                                     <ul id="mynetdata_actions1" class="multi-column-dropdown">
 560                                     <li style="color: #999;">&nbsp;</li>
 561                                     </ul>
 562                                 </div>
 563                             </div>
 564                         </ul>
 565                     </li>
 566                 </ul>
 567             </nav>
 568             <div class="navbar-header">
 569                 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
 570                     <span class="sr-only">Toggle navigation</span>
 571                     <span class="icon-bar"></span>
 572                     <span class="icon-bar"></span>
 573                     <span class="icon-bar"></span>
 574                 </button>
 575                 <a href="/" class="navbar-brand" id="hostname" title="reload the dashboard">netdata</a>
 576             </div>
 577             <nav class="collapse navbar-collapse navbar-right" role="navigation">
 578                 <ul class="nav navbar-nav">
 579                     <li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#alarmsModal" title="alarms"><i class="fa fa-bell"></i><span id="alarms_count_badge" class="badge"></span></a></li>
 580                     <li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal" title="dashboard settings"><i class="fa fa-cog"></i></a></li>
 581                     <li class="hidden-sm"><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank" title="netdata community"><i class="fa fa-github"></i></a></li>
 582                     <li class="hidden-sm" id="updateButton"><a href="#" class="btn" data-toggle="modal" data-target="#updateModal" title="check for update"><i class="fa fa-cloud-download"></i><span id="update_badge" class="badge"></span></a></li>
 583                     <li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#helpModal" title="dashboard help"><i class="fa fa-question-circle"></i></a></li>
 584                     <li class="dropdown hidden-md hidden-lg hidden-xs">
 585                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">Menu <strong class="caret"></strong></a>
 586                         <ul class="dropdown-menu scrollable-menu inpagemenu" role="menu">
 587                             <li><a href="#" class="btn" data-toggle="modal" data-target="#alarmsModal"><i class="fa fa-cog"></i> alarms</a></li>
 588                             <li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-cog"></i> settings</a></li>
 589                             <li><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
 590                             <li><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> help</a></li>
 591                         </ul>
 592                     </li>
 593                     <li class="dropdown hidden-sm hidden-md hidden-lg">
 594                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">my-netdata <strong class="caret"></strong></a>
 595                         <ul id="mynetdata_servers2" class="dropdown-menu scrollable-menu inpagemenu" role="menu">
 596                             <li><a href="#" onclick="return false;" style="color: #999;">loading...</a></li>
 597                         </ul>
 598                     </li>
 599                 </ul>
 600             </nav>
 601     </nav>
 602         </div>
 603     </nav>
 604
 605     <div id="masthead" style="display: none;">
 606         <div class="container">
 607             <div class="row">
 608                 <div class="col-md-7">
 609                     <h1>Netdata
 610                         <p class="lead">Real-time performance monitoring, in the greatest possible detail</p>
 611                     </h1>
 612                 </div>
 613                 <div class="col-md-5">
 614                     <div class="well well-lg">
 615                         <div class="row">
 616                         <div class="col-md-6">
 617                             <b>Drag</b> charts to pan.
 618                             <b>Shift + wheel</b> on them, to zoom in and out.
 619                             <b>Double-click</b> on them, to reset.
 620                             <b>Hover</b> on them too!
 621                             </div>
 622                         <div class="col-md-6">
 623                             <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>
 624                             </div>
 625                         </div>
 626                     </div>
 627                 </div>
 628             </div>
 629         </div>
 630     </div>
 631
 632     <div class="container">
 633         <div class="row">
 634             <div class="col-md-10" role="main">
 635                 <div id="charts_div"></div>
 636             </div>
 637             <div class="col-md-2" role="complementary">
 638                 <nav class="dashboard-sidebar hidden-print hidden-xs hidden-sm" id="sidebar" role="menu"></nav>
 639             </div>
 640         </div>
 641     </div>
 642
 643     <div id="footer" class="container" style="display: none;">
 644         <div class="row">
 645             <div class="col-md-10" role="main">
 646                 <div class="p">
 647                     <big><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></big><br/>
 648                     <i class="fa fa-copyright"></i> Copyright 2016, Costa Tsaousis.<br/>
 649                     Released under <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GPL v3 or later</a>.<br/>
 650                 </div>
 651                 <div class="p">
 652                     <small>
 653                         <a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a> re-distributes these software tools:
 654
 655                         <i class="fa fa-circle"></i> The excellent <a href="http://dygraphs.com/" target="_blank">Dygraphs.com</a> web chart library,
 656                         <i class="fa fa-copyright"></i> Copyright 2009, Dan Vanderkam, <a href="http://dygraphs.com/legal.html" target="_blank">MIT License</a>
 657
 658                         <i class="fa fa-circle"></i> <a href="http://omnipotent.net/jquery.sparkline/" target="_blank">jQuery Sparklines</a> web chart library,
 659                         <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>
 660
 661                         <i class="fa fa-circle"></i> <a href="http://benpickles.github.io/peity/" target="_blank">Peity</a> web chart library,
 662                         <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>
 663
 664                         <i class="fa fa-circle"></i> <a href="https://rendro.github.io/easy-pie-chart/" target="_blank">Easy Pie Chart</a> web chart library,
 665                         <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>
 666
 667                         <i class="fa fa-circle"></i> <a href="http://bernii.github.io/gauge.js/" target="_blank">Gauge.js</a> web chart library,
 668                         <i class="fa fa-copyright"></i> Copyright, Bernard Kobos, <a href="http://bernii.github.io/gauge.js/" target="_blank">MIT License</a>
 669
 670                         <i class="fa fa-circle"></i> <a href="https://jquery.org/" target="_blank">jQuery</a>,
 671                         <i class="fa fa-copyright"></i> Copyright 2015, jQuery Foundation, <a href="https://jquery.org/license/" target="_blank">MIT License</a>
 672
 673                         <i class="fa fa-circle"></i> <a href="http://getbootstrap.com/getting-started/" target="_blank">Bootstrap</a>,
 674                         <i class="fa fa-copyright"></i> Copyright 2015, Twitter, <a href="http://getbootstrap.com/getting-started/#license-faqs" target="_blank">MIT License</a>
 675
 676                         <i class="fa fa-circle"></i> <a href="http://www.bootstraptoggle.com/" target="_blank">Bootstrap Toggle</a>,
 677                         <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>
 678
 679                         <i class="fa fa-circle"></i> <a href="https://jamesflorentino.github.io/nanoScrollerJS/" target="_blank">NanoScroller</a>,
 680                         <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>
 681
 682                         <i class="fa fa-circle"></i> <a href="https://github.com/marcj/css-element-queries" target="_blank">CSS Element Queries</a>,
 683                         <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>
 684
 685                         <i class="fa fa-circle"></i> <a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">FontAwesome</a>,
 686                         <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>
 687
 688                         <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.
 689
 690                         <i class="fa fa-circle"></i> <a href="http://morrisjs.github.io/morris.js/" target="_blank">morris.js</a>,
 691                         <i class="fa fa-copyright"></i> Copyright 2013, Olly Smith, <a href="http://morrisjs.github.io/morris.js/" target="_blank">Simplified BSD License</a>
 692
 693                         <i class="fa fa-circle"></i> <a href="http://raphaeljs.com/" target="_blank">Raphaël</a>,
 694                         <i class="fa fa-copyright"></i> Copyright 2008, Dmitry Baranovskiy, <a href="http://raphaeljs.com/license.html" target="_blank">MIT License</a>
 695
 696                         <i class="fa fa-circle"></i> <a href="http://C3js.org/" target="_blank">C3</a>,
 697                         <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>
 698
 699                         <i class="fa fa-circle"></i> <a href="http://D3js.org/" target="_blank">D3</a>,
 700                         <i class="fa fa-copyright"></i> Copyright 2015, Mike Bostock, <a href="http://opensource.org/licenses/BSD-3-Clause" target="_blank">BSD License</a>
 701
 702                     </small>
 703                 </div>
 704             </div>
 705         </div>
 706     </div>
 707
 708     <div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="welcomeModalLabel">
 709         <div class="modal-dialog modal-lg" role="document">
 710             <div class="modal-content">
 711                 <div class="modal-header">
 712                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 713                     <h4 class="modal-title" id="welcomeModalLabel">Welcome!</h4>
 714                 </div>
 715                 <div class="modal-body">
 716                         <div class="p">
 717                         <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.
 718                         </div>
 719                         <div class="p">
 720                         <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.
 721                         </div>
 722                         <div class="p">
 723                         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.
 724                         </div>
 725                         <div class="p">
 726                         <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>%),
 727                         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).
 728                         </div>
 729                         <div class="p">
 730                         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>!).
 731                         </div>
 732                         <div class="p">
 733                         For more information please refer to the <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata wiki</a></b>.
 734                         </div>
 735                 </div>
 736                 <div class="modal-footer">
 737                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 738                 </div>
 739             </div>
 740         </div>
 741     </div>
 742
 743     <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel">
 744         <div class="modal-dialog modal-lg" role="document">
 745             <div class="modal-content">
 746                 <div class="modal-header">
 747                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 748                     <h4 class="modal-title" id="helpModalLabel">Dashboard Help</h4>
 749                 </div>
 750                 <div class="modal-body">
 751
 752                     <h4>Dygraphs (line, area and stacked area charts)</h4>
 753
 754                     <!-- Nav tabs -->
 755                     <ul class="nav nav-tabs" role="tablist">
 756                         <li role="presentation" class="active"><a href="#help_mouse" aria-controls="help_mouse" role="tab" data-toggle="tab">Mouse Interface</a></li>
 757                         <li role="presentation"><a href="#help_touch" aria-controls="help_touch" role="tab" data-toggle="tab">Touch Interface</a></li>
 758                     </ul>
 759
 760                     <!-- Tab panes -->
 761                     <div class="tab-content">
 762                         <div role="tabpanel" class="tab-pane active" id="help_mouse">
 763                             <div class="p">
 764                                 <h4>Mouse Over / Hover</h4>
 765                                 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).
 766                                 <br/>
 767                                 All the other visible charts will also show and highlight their values for the same timestamp.
 768                             </div>
 769                             <hr/>
 770                             <div class="p">
 771                                 <h4>Drag Chart Contents</h4>
 772                                 Drag the contents of a chart to pan it horizontally.
 773                                 <br/>
 774                                 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).
 775                                 <br/>
 776                                 Once a chart is panned, auto refreshing stops for all charts. To enable it again, <b>double click</b> a panned chart.
 777                             </div>
 778                             <hr/>
 779                             <div class="p">
 780                                 <h4>Double Click</h4>
 781                                 Double Click a chart to reset all the charts to their default auto-refreshing state.
 782                             </div>
 783                             <hr/>
 784                             <div class="p">
 785                                 <h4>SHIFT + Drag</h4>
 786                                 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:
 787                                 <ul>
 788                                     <li>The already loaded chart contents are zoomed (low resolution)</li>
 789                                     <li>New data are transferred from the netdata server, to refresh the chart with possibly more detail.</li>
 790                                 </ul>
 791                                 Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, <b>double click</b> a zoomed chart.
 792                             </div>
 793                             <hr/>
 794                             <div class="p">
 795                                 <h4>SHIFT + Mouse Wheel <small>(does not work on firefox and IE/Edge)</small></h4>
 796                                 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.
 797                                 <br/>
 798                                 Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, <b>double click</b> a zoomed chart.
 799                             </div>
 800                             <hr/>
 801                             <div class="p">
 802                                 <h4>Legend Operations</h4>
 803                                 Click on the label or value of a dimension, will select / un-select this dimension.
 804                                 <br/>
 805                                 You can press any of the SHIFT or CONTROL keys and then click on legend labels or values, to select / un-select multiple dimensions.
 806                             </div>
 807                         </div>
 808                         <div role="tabpanel" class="tab-pane" id="help_touch">
 809                             <div class="p">
 810                                 <h4>Single Tap</h4>
 811                                 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).
 812                                 <br/>
 813                                 All the other visible charts will also show and highlight their values for the same timestamp.
 814                             </div>
 815                             <hr/>
 816                             <div class="p">
 817                                 <h4>Drag Chart Contents</h4>
 818                                 Touch and Drag the contents of a chart to pan it horizontally.
 819                                 <br/>
 820                                 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).
 821                                 <br/>
 822                                 Once a chart is panned, auto refreshing stops for all charts. To enable it again, <b>double tap</b> a panned chart.
 823                             </div>
 824                             <hr/>
 825                             <div class="p">
 826                                 <h4>Double Tap</h4>
 827                                 Double tap a chart to reset all the charts to their default auto-refreshing state.
 828                             </div>
 829                             <hr/>
 830                             <div class="p">
 831                                 <h4>Zoom <small>(does not work on firefox and IE/Edge)</small></h4>
 832                                 With two fingers, zoom in or out.
 833                                 <br/>
 834                                 Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, <b>double click</b> a zoomed chart.
 835                             </div>
 836                             <hr/>
 837                             <div class="p">
 838                                 <h4>Legend Operations</h4>
 839                                 Tap on the label or value of a dimension, will select / un-select this dimension.
 840                             </div>
 841                         </div>
 842                     </div>
 843                 </div>
 844                 <div class="modal-footer">
 845                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 846                 </div>
 847             </div>
 848         </div>
 849     </div>
 850
 851     <div class="modal fade" id="alarmsModal" tabindex="-1" role="dialog" aria-labelledby="alarmsModalLabel">
 852         <div class="modal-dialog modal-lg" role="document">
 853             <div class="modal-content">
 854                 <div class="modal-header">
 855                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 856                     <h4 class="modal-title" id="alarmsModalLabel">netdata alarms</h4>
 857                 </div>
 858                 <div class="modal-body">
 859                     <!-- Nav tabs -->
 860                     <ul class="nav nav-tabs" role="tablist">
 861                         <li role="presentation" class="active"><a href="#alarms_active" aria-controls="alarms_active" role="tab" data-toggle="tab">Active</a></li>
 862                         <li role="presentation"><a href="#alarms_all" aria-controls="alarms_all" role="tab" data-toggle="tab">All</a></li>
 863                         <li role="presentation"><a href="#alarms_log" aria-controls="alarms_log" role="tab" data-toggle="tab">Log</a></li>
 864                     </ul>
 865
 866                     <!-- Tab panes -->
 867                     <div class="tab-content">
 868                         <div role="tabpanel" class="tab-pane active" id="alarms_active">
 869                             loading...
 870                         </div>
 871                         <div role="tabpanel" class="tab-pane" id="alarms_all">
 872                             loading...
 873                         </div>
 874                         <div role="tabpanel" class="tab-pane" id="alarms_log">
 875                             loading...
 876                         </div>
 877                     </div>
 878                 </div>
 879                 <div class="modal-footer">
 880                     <!-- <a href="#" onclick="alarmsUpdateModal(); return false;" type="button" class="btn btn-default">Update</a> -->
 881                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 882                 </div>
 883             </div>
 884         </div>
 885     </div>
 886
 887     <div class="modal fade" id="optionsModal" tabindex="-1" role="dialog" aria-labelledby="optionsModalLabel">
 888         <div class="modal-dialog modal-lg" role="document">
 889             <div class="modal-content">
 890                 <div class="modal-header">
 891                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 892                     <h4 class="modal-title" id="optionsModalLabel">netdata dashboard options</h4>
 893                 </div>
 894                 <div class="modal-body">
 895                     <center>
 896                         <small style="color: #BBBBBB;">These are browser settings. Each viewer has its own. They do not affect the operation of your netdata server.
 897                         <br/>
 898                         Settings take effect immediately and are saved permanently to browser local storage (except the refresh on focus / always option).
 899                         <br/>
 900                         To reset all options (including charts sizes) to their defaults, click <a href="#" onclick="resetDashboardOptions(); return false;">here</a>.</small>
 901                     </center>
 902                     <div style="padding: 10px;"></div>
 903
 904                     <!-- Nav tabs -->
 905                     <ul class="nav nav-tabs" role="tablist">
 906                         <li role="presentation" class="active"><a href="#settings_performance" aria-controls="settings_performance" role="tab" data-toggle="tab">Performance</a></li>
 907                         <li role="presentation"><a href="#settings_sync" aria-controls="settings_sync" role="tab" data-toggle="tab">Synchronization</a></li>
 908                         <li role="presentation"><a href="#settings_visual" aria-controls="settings_visual" role="tab" data-toggle="tab">Visual</a></li>
 909                     </ul>
 910
 911                     <!-- Tab panes -->
 912                     <div class="tab-content">
 913                         <div role="tabpanel" class="tab-pane active" id="settings_performance">
 914                             <form id="optionsForm1" method="get" class="form-horizontal">
 915                                 <div class="form-group">
 916                                     <table>
 917                                     <tr class="option-row">
 918                                         <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>
 919                                         <td class="option-info"><strong>When to refresh the charts?</strong><br/>
 920                                             <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>
 921                                         </td>
 922                                         </tr>
 923                                     <tr class="option-row">
 924                                         <td class="option-control">
 925                                         <input id="eliminate_zero_dimensions" type="checkbox" checked data-toggle="toggle" data-on="Non Zero" data-off="All" data-width="110px">
 926                                         </td>
 927                                         <td class="option-info"><strong>Which dimensions to show?</strong><br/>
 928                                             <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>
 929                                         </td>
 930                                         </tr>
 931                                     <tr class="option-row">
 932                                         <td class="option-control"><input id="destroy_on_hide" type="checkbox" data-toggle="toggle" data-on="Destroy" data-off="Hide" data-width="110px"></td>
 933                                         <td class="option-info"><strong>How to handle hidden charts?</strong><br/>
 934                                             <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>
 935                                         </td>
 936                                         </tr>
 937                                     </table>
 938                                 </div>
 939                             </form>
 940                         </div>
 941                         <div role="tabpanel" class="tab-pane" id="settings_sync">
 942                             <form id="optionsForm2" method="get" class="form-horizontal">
 943                                 <div class="form-group">
 944                                     <table>
 945                                     <tr class="option-row">
 946                                         <td class="option-control"><input id="parallel_refresher" type="checkbox" checked data-toggle="toggle" data-on="Parallel" data-off="Sequential" data-width="110px"></td>
 947                                         <td class="option-info"><strong>Which chart refresh policy to use?</strong><br/>
 948                                             <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>
 949                                         </td>
 950                                         </tr>
 951                                     <tr class="option-row" id="concurrent_refreshes_row">
 952                                         <td class="option-control"></td>
 953                                         <td class="option-info">
 954                                             <table>
 955                                             <tr class="option-row">
 956                                             <td class="option-control">
 957                                             <input id="concurrent_refreshes" type="checkbox" checked data-toggle="toggle" data-on="Resync" data-off="Best Effort" data-width="110px">
 958                                             </td>
 959                                             <td class="option-info">
 960                                             <strong>Shall we re-sync chart refreshes?</strong><br/>
 961                                             <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>
 962                                             </td>
 963                                             </tr>
 964                                             </table>
 965                                         </td>
 966                                         </tr>
 967                                     <tr class="option-row">
 968                                         <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>
 969                                         <td class="option-info"><strong>Sync hover selection on all charts?</strong><br/>
 970                                             <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>
 971                                         </td>
 972                                         </tr>
 973                                     <tr class="option-row">
 974                                         <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>
 975                                         <td class="option-info"><strong>Sync pan and zoom on all charts?</strong><br/>
 976                                             <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>
 977                                         </td>
 978                                         </tr>
 979                                     </table>
 980                                 </div>
 981                             </form>
 982                         </div>
 983                         <div role="tabpanel" class="tab-pane" id="settings_visual">
 984                             <form id="optionsForm3" method="get" class="form-horizontal">
 985                                 <div class="form-group">
 986                                     <table>
 987                                     <tr class="option-row">
 988                                         <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>
 989                                         <td class="option-info"><strong>Which theme to use?</strong><br/>
 990                                             <small>Netdata comes with two themes: <b>Dark</b> (the default) and <b>White</b>.
 991                                             <br/>
 992                                             <b>Switching this will reload the dashboard</b>.
 993                                             </small>
 994                                         </td>
 995                                         </tr>
 996                                     <tr class="option-row">
 997                                         <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>
 998                                         <td class="option-info"><strong>Do you need help?</strong><br/>
 999                                             <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.
1000                                             <br/>
1001                                             <b>Switching this will reload the dashboard</b>.
1002                                             </small>
1003                                         </td>
1004                                         </tr>
1005                                     <tr class="option-row">
1006                                         <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>
1007                                         <td class="option-info"><strong>Enable data padding when panning and zooming?</strong><br/>
1008                                             <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>
1009                                         </td>
1010                                         </tr>
1011                                     <tr class="option-row">
1012                                         <td class="option-control"><input id="smooth_plot" type="checkbox" checked data-toggle="toggle"  data-on="Smooth" data-off="Rough" data-width="110px"></td>
1013                                         <td class="option-info"><strong>Enable Bézier lines on charts?</strong><br/>
1014                                             <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.
1015                                             <br/>
1016                                             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>
1017                                         </td>
1018                                         </tr>
1019                                     </table>
1020                                 </div>
1021                             </form>
1022                         </div>
1023                     </div>
1024                 </div>
1025                 <div class="modal-footer">
1026                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
1027                 </div>
1028             </div>
1029         </div>
1030     </div>
1031
1032
1033     <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
1034         <div class="modal-dialog" role="document">
1035             <div class="modal-content">
1036                 <div class="modal-header">
1037                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
1038                     <h4 class="modal-title" id="updateModalLabel">Update Check</h4>
1039                 </div>
1040                 <div class="modal-body">
1041                     Your netdata version: <b><code><span id="netdataVersion">Unknown</span></code></b>
1042                     <br/>
1043                     <div style="padding: 10px;"></div>
1044                     <div id="versionCheckLog">Not checked yet. Please press the Check Now button.</div>
1045                 </div>
1046                 <div class="modal-footer">
1047                     <a href="#" onclick="notifyForUpdate(true); return false;" type="button" class="btn btn-default">Check Now</a>
1048                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
1049                 </div>
1050             </div>
1051         </div>
1052     </div>
1053
1054     <div class="modal fade" id="deleteRegistryModal" tabindex="-1" role="dialog" aria-labelledby="deleteRegistryModalLabel">
1055         <div class="modal-dialog" role="document">
1056             <div class="modal-content">
1057                 <div class="modal-header">
1058                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
1059                     <h4 class="modal-title" id="deleteRegistryModalLabel">Delete <span id="deleteRegistryServerName"></span>?</h4>
1060                 </div>
1061                 <div class="modal-body">
1062                     You are about to delete, from your personal list of netdata servers, the following server:
1063                     <p style="text-align: center; padding-top: 10px; padding-bottom: 10px; line-height: 2;">
1064                     <b><span id="deleteRegistryServerName2"></span></b>
1065                     <br/>
1066                     <b><span id="deleteRegistryServerURL"></span></b>
1067                     </p>
1068                     Are you sure you want to do this?
1069                     <br/>
1070                     <div style="padding: 10px;"></div>
1071                     <small>Keep in mind, this server will be added back if and when you visit it again.</small>
1072                     <br/>
1073                     <div id="deleteRegistryResponse" style="display: block; width: 100%; text-align: center; padding-top: 20px;"></div>
1074                 </div>
1075                 <div class="modal-footer">
1076                     <button type="button" class="btn btn-success" data-dismiss="modal">keep it</button>
1077                     <a href="#" onclick="notifyForDeleteRegistry(true); return false;" type="button" class="btn btn-danger">delete it</a>
1078                 </div>
1079             </div>
1080         </div>
1081     </div>
1082
1083     <div class="modal fade" id="switchRegistryModal" tabindex="-1" role="dialog" aria-labelledby="switchRegistryModalLabel">
1084         <div class="modal-dialog" role="document">
1085             <div class="modal-content">
1086                 <div class="modal-header">
1087                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
1088                     <h4 class="modal-title" id="switchRegistryModalLabel">Switch Netdata Registry Identity</h4>
1089                 </div>
1090                 <div class="modal-body">
1091                     You can copy and paste the following ID to all your browsers (e.g. work and home).
1092                     <br/>
1093                     All the browsers with the same ID will identify <b>you</b>, so please don't share this with others.
1094                     <p style="text-align: center; padding-top: 10px; padding-bottom: 10px; line-height: 2;">
1095                     <form action="#">
1096                     <input type="text" class="form-control" id="switchRegistryPersonGUID" placeholder="your personal ID" maxlength="36" autocomplete="off" style="text-align: center; font-size: 1.4em;">
1097                     </form>
1098                     </p>
1099                     Either copy this ID and paste it to another browser, or paste here the ID you have taken from another browser.
1100                     <p style="padding-top: 10px;"><small>
1101                         Keep in mind that:
1102                         <ul>
1103                             <li>when you switch ID, your previous ID will be lost forever - this is irreversible.</li>
1104                             <li>both IDs (your old and the new) must list this netdata at their personal lists.</li>
1105                             <li>both IDs have to be known by the registry: <b><span id="switchRegistryURL"></span></b>.</li>
1106                             <li>to get a new ID, just clear your browser cookies.</li>
1107                         </ul>
1108                     </small></p>
1109                     <div id="switchRegistryResponse" style="display: block; width: 100%; text-align: center; padding-top: 20px;"></div>
1110                 </div>
1111                 <div class="modal-footer">
1112                     <button type="button" class="btn btn-success" data-dismiss="modal">cancel</button>
1113                     <a href="#" onclick="notifyForSwitchRegistry(true); return false;" type="button" class="btn btn-danger">impersonate</a>
1114                 </div>
1115             </div>
1116         </div>
1117     </div>
1118
1119     <div class="modal fade" id="gotoServerModal" tabindex="-1" role="dialog" aria-labelledby="gotoServerModalLabel">
1120         <div class="modal-dialog" role="document">
1121             <div class="modal-content">
1122                 <div class="modal-header">
1123                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
1124                     <h4 class="modal-title" id="gotoServerModalLabel"><span id="gotoServerName"></span></h4>
1125                 </div>
1126                 <div class="modal-body">
1127                     Checking known URLs for this server...
1128                     <div  style="padding-top: 20px;">
1129                         <table id="gotoServerList">
1130                         </table>
1131                     </div>
1132                     <p style="padding-top: 10px;"><small>
1133                         Checks may fail if you are viewing an HTTPS page and the server to be checked is HTTP only.
1134                     </small></p>
1135                     <div id="gotoServerResponse" style="display: block; width: 100%; text-align: center; padding-top: 20px;"></div>
1136                 </div>
1137                 <div class="modal-footer">
1138                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
1139                 </div>
1140             </div>
1141         </div>
1142     </div>
1143
1144 <script type="text/javascript">
1145 var this_is_demo = null;
1146 function isdemo() {
1147     if(this_is_demo !== null) return this_is_demo;
1148     this_is_demo = false;
1149
1150     try {
1151         if(typeof document.location.hostname === 'string') {
1152             if(document.location.hostname.endsWith('.my-netdata.io') ||
1153                     document.location.hostname.endsWith('.mynetdata.io') ||
1154                     document.location.hostname.endsWith('.netdata.rocks') ||
1155                     document.location.hostname.endsWith('.firehol.org') ||
1156                     document.location.hostname.endsWith('.netdata.online'))
1157                     this_is_demo = true;
1158         }
1159     }
1160     catch(error) {
1161         ;
1162     }
1163
1164     return this_is_demo;
1165 }
1166
1167 if(isdemo()) {
1168     document.getElementById('masthead').style.display = 'block';
1169 }
1170
1171 function netdataURL(url) {
1172     if(typeof url === 'undefined')
1173         url = document.location.toString();
1174
1175     if(url.indexOf('#') !== -1)
1176         url = url.substring(0, url.indexOf('#'));
1177
1178     var hash = netdataHash();
1179
1180     // console.log('netdataURL: ' + url + hash);
1181
1182     return url + hash;
1183 }
1184
1185 function netdataReload(url) {
1186     var t = netdataURL(url);
1187     // console.log('netdataReload: ' + t);
1188     document.location = t;
1189
1190     // since we play with hash
1191     // this is needed to reload the page
1192     location.reload();
1193 }
1194
1195 var gotoServerValidateRemaining = 0;
1196 var gotoServerMiddleClick = false;
1197 var gotoServerStop = false;
1198 function gotoServerValidateUrl(id, guid, url) {
1199     var penaldy = 0;
1200     if(document.location.toString().startsWith('http://') && url.toString().startsWith('https://'))
1201             // we penalize https only if the current url is http
1202             // to allow the user walk through all its servers.
1203             penaldy = 500;
1204
1205     var finalURL = netdataURL(url);
1206
1207     setTimeout(function() {
1208         document.getElementById('gotoServerList').innerHTML += '<tr><td style="padding-left: 20px;"><a href="' + finalURL + '" target="_blank">' + url + '</a></td><td style="padding-left: 30px;"><code id="' + guid + '-' + id + '-status">checking...</code></td></tr>';
1209
1210         NETDATA.registry.hello(url, function(data) {
1211             if (data) {
1212                 // console.log('OK ' + id + ' URL: ' + url);
1213                 document.getElementById(guid + '-' + id + '-status').innerHTML = "OK";
1214
1215                 if(!gotoServerStop) {
1216                     gotoServerStop = true;
1217
1218                     if(gotoServerMiddleClick) {
1219                         window.open(finalURL, '_blank');
1220                         gotoServerMiddleClick = false;
1221                         document.getElementById('gotoServerResponse').innerHTML = '<b>Opening new window to ' + NETDATA.registry.machines[guid].name + '<br/><a href="' + finalURL + '">' + url + '</a></b><br/>(check your pop-up blocker if it fails)';
1222                     }
1223                     else
1224                         document.location = finalURL;
1225                 }
1226             }
1227             else {
1228                 document.getElementById(guid + '-' + id + '-status').innerHTML = "failed!";
1229                 gotoServerValidateRemaining--;
1230                 if(gotoServerValidateRemaining <= 0) {
1231                     gotoServerMiddleClick = false;
1232                     document.getElementById('gotoServerResponse').innerHTML = '<b>Sorry! I cannot find any operational URL for this server</b>';
1233                 }
1234             }
1235         });
1236     }, (id * 50) + penaldy);
1237 }
1238
1239 function gotoServerModalHandler(guid) {
1240     // console.log('goto server: ' + guid);
1241
1242     gotoServerStop = false;
1243     var len = NETDATA.registry.machines[guid].alternate_urls.length;
1244
1245     document.getElementById('gotoServerResponse').innerHTML = '';
1246     document.getElementById('gotoServerList').innerHTML = '';
1247     document.getElementById('gotoServerName').innerHTML = NETDATA.registry.machines[guid].name;
1248     $('#gotoServerModal').modal('show');
1249
1250     gotoServerValidateRemaining = len;
1251     while(len--)
1252         gotoServerValidateUrl(len, guid, NETDATA.registry.machines[guid].alternate_urls[len]);
1253
1254     return false;
1255 }
1256
1257 function gotoServerInit() {
1258     $(".registry_link").on('click', function(e) {
1259         if(e.which === 2) {
1260             e.preventDefault();
1261             gotoServerMiddleClick = true;
1262         }
1263         else {
1264             gotoServerMiddleClick = false;
1265         }
1266
1267         return true;
1268     });
1269 }
1270
1271 function switchRegistryModalHandler() {
1272     document.getElementById('switchRegistryPersonGUID').value = NETDATA.registry.person_guid;
1273     document.getElementById('switchRegistryURL').innerHTML = NETDATA.registry.server;
1274     document.getElementById('switchRegistryResponse').innerHTML = '';
1275     $('#switchRegistryModal').modal('show');
1276 }
1277
1278 function notifyForSwitchRegistry() {
1279     var n = document.getElementById('switchRegistryPersonGUID').value;
1280
1281     if(n !== '' && n.length === 36) {
1282         NETDATA.registry.switch(n, function(result) {
1283             if(result !== null) {
1284                 $('#switchRegistryModal').modal('hide');
1285                 NETDATA.registry.init();
1286             }
1287             else {
1288                 document.getElementById('switchRegistryResponse').innerHTML = "<b>Sorry! The registry rejected your request.</b>";
1289             }
1290         });
1291     }
1292     else
1293         document.getElementById('switchRegistryResponse').innerHTML = "<b>The ID you have entered is not a GUID.</b>";
1294 }
1295
1296 var deleteRegistryUrl = null;
1297 function deleteRegistryModalHandler(guid, name, url) {
1298     deleteRegistryUrl = url;
1299     document.getElementById('deleteRegistryServerName').innerHTML = name;
1300     document.getElementById('deleteRegistryServerName2').innerHTML = name;
1301     document.getElementById('deleteRegistryServerURL').innerHTML = url;
1302     document.getElementById('deleteRegistryResponse').innerHTML = '';
1303     $('#deleteRegistryModal').modal('show');
1304 }
1305
1306 function notifyForDeleteRegistry() {
1307     if(deleteRegistryUrl) {
1308         NETDATA.registry.delete(deleteRegistryUrl, function(result) {
1309             if(result !== null) {
1310                 deleteRegistryUrl = null;
1311                 $('#deleteRegistryModal').modal('hide');
1312                 NETDATA.registry.init();
1313             }
1314             else {
1315                 document.getElementById('deleteRegistryResponse').innerHTML = "<b>Sorry! this command was rejected by the registry server.</b>";
1316             }
1317         });
1318     }
1319 }
1320
1321 var options = {
1322     sparklines_registry: {},
1323     submenu_names: {},
1324     data: null,
1325     hostname: 'netdata_server', // will be overwritten by the netdata server
1326     categories: new Array(),
1327     categories_idx: {},
1328     families: new Array(),
1329     families_idx: {},
1330
1331     chartsPerRow: 0,
1332     chartsMinWidth: 1450,
1333     chartsHeight: 180,
1334     sparklinesHeight: 60,
1335 };
1336
1337 // generate a sparkline
1338 // used in the documentation
1339 function sparkline(chart, dimension, units) {
1340     var key = chart + '.' + dimension;
1341
1342     if(typeof units === 'undefined')
1343         units = '';
1344
1345     if(typeof options.sparklines_registry[key] === 'undefined')
1346         options.sparklines_registry[key] = { count: 1 };
1347     else
1348         options.sparklines_registry[key].count++;
1349
1350     key = key + '.' + options.sparklines_registry[key].count;
1351
1352     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 + ')';
1353
1354     return h;
1355 }
1356
1357 function chartsPerRow(total) {
1358     if(options.chartsPerRow === 0) {
1359         width = Math.floor(total / options.chartsMinWidth);
1360         if(width === 0) width = 1;
1361         return width;
1362     }
1363     else return options.chartsPerRow;
1364 }
1365
1366 function prioritySort(a, b) {
1367     if(a.priority < b.priority) return -1;
1368     if(a.priority > b.priority) return 1;
1369     if(a.name < b.name) return -1;
1370     return 1;
1371 }
1372
1373 function sortObjectByPriority(object) {
1374     var idx = {};
1375     var sorted = new Array();
1376
1377     for(var i in object) {
1378         if(typeof idx[i] === 'undefined') {
1379             idx[i] = object[i];
1380             sorted.push(i);
1381         }
1382     }
1383
1384     sorted.sort(function(a, b) {
1385         if(idx[a].priority < idx[b].priority) return -1;
1386         if(idx[a].priority > idx[b].priority) return 1;
1387         if(a < b) return -1;
1388         return 1;
1389     });
1390
1391     return sorted;
1392 }
1393
1394
1395 // ----------------------------------------------------------------------------
1396 // scroll to a section, without changing the browser history
1397
1398 function scrollToId(hash) {
1399     if(hash && hash != '') {
1400         var offset = $('#' + hash).offset();
1401         if(typeof offset !== 'undefined')
1402             $('html, body').animate({ scrollTop: offset.top }, 0);
1403     }
1404
1405     // we must return false to prevent the default action
1406     return false;
1407 }
1408
1409 // ----------------------------------------------------------------------------
1410
1411 function gaugeChart(title, width, dimensions, colors) {
1412     if(typeof colors === 'undefined')
1413         colors = '';
1414
1415     if(typeof dimensions === 'undefined')
1416         dimensions = '';
1417
1418     return '<div data-netdata="CHART_UNIQUE_ID"'
1419                             + ' data-dimensions="' + dimensions + '"'
1420                             + ' data-chart-library="gauge"'
1421                             + ' data-gauge-adjust="width"'
1422                             + ' data-title="' + title + '"'
1423                             + ' data-width="' + width + '"'
1424                             + ' data-before="0"'
1425                             + ' data-after="-CHART_DURATION"'
1426                             + ' data-points="CHART_DURATION"'
1427                             + ' data-colors="' + colors + '"'
1428                             + ' role="application"></div>';
1429 }
1430
1431 // ----------------------------------------------------------------------------
1432
1433 var menuData = {
1434     'system': {
1435         title: 'System Overview',
1436         info: 'Overview of the key system metrics.'
1437     },
1438
1439     'ap': {
1440         title: 'Access Points',
1441         info: undefined
1442     },
1443
1444     'tc': {
1445         title: 'Quality of Service',
1446         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).'
1447     },
1448
1449     'net': {
1450         title: 'Network Interfaces',
1451         info: 'Per network interface statistics collected from <code>/proc/net/dev</code>.'
1452     },
1453
1454     'ipv4': {
1455         title: 'IPv4 Networking',
1456         info: undefined
1457     },
1458
1459     'ipv6': {
1460         title: 'IPv6 Networking',
1461         info: undefined
1462     },
1463
1464     'ipvs': {
1465         title: 'IP Virtual Server',
1466         info: undefined
1467     },
1468
1469     'netfilter': {
1470         title: 'Firewall (netfilter)',
1471         info: undefined
1472     },
1473
1474     'cpu': {
1475         title: 'CPUs',
1476         info: undefined
1477     },
1478
1479     'mem': {
1480         title: 'Memory',
1481         info: undefined
1482     },
1483
1484     'disk': {
1485         title: 'Disks',
1486         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.'
1487     },
1488
1489     'sensors': {
1490         title: 'Sensors',
1491         info: undefined
1492     },
1493
1494     'nfsd': {
1495         title: 'File Server (nfsd)',
1496         info: undefined
1497     },
1498
1499     'apps': {
1500         title: 'Applications',
1501         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). The reported values are compatible with <code>top</code>, although the netdata plugin counts also the resources of exited children (unlike <code>top</code> which shows only the resources of the currently running processes). So for processes like shell scripts, the reported values include the resources used by the commands these scripts run within each timeframe.',
1502         height: 1.5
1503     },
1504
1505     'users': {
1506         title: 'Users',
1507         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. The reported values are compatible with <code>top</code>, although the netdata plugin counts also the resources of exited children (unlike <code>top</code> which shows only the resources of the currently running processes). So for processes like shell scripts, the reported values include the resources used by the commands these scripts run within each timeframe.',
1508         height: 1.5
1509     },
1510
1511     'groups': {
1512         title: 'User Groups',
1513         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. The reported values are compatible with <code>top</code>, although the netdata plugin counts also the resources of exited children (unlike <code>top</code> which shows only the resources of the currently running processes). So for processes like shell scripts, the reported values include the resources used by the commands these scripts run within each timeframe.',
1514         height: 1.5
1515     },
1516
1517     'netdata': {
1518         title: 'Netdata Monitoring',
1519         info: undefined
1520     },
1521
1522     'example': {
1523         title: 'Example Charts',
1524         info: undefined
1525     },
1526
1527     'cgroup': {
1528         title: 'Container',
1529         info: undefined
1530     },
1531
1532     'cgqemu': {
1533         title: 'VM',
1534         info: undefined
1535     },
1536
1537     'memcached': {
1538         title: 'memcached',
1539         info: undefined
1540     },
1541
1542     'mysql': {
1543         title: 'MySQL',
1544         info: undefined
1545     },
1546
1547     'redis': {
1548         title: 'Redis',
1549         info: undefined
1550     },
1551
1552     'ipfs': {
1553         title: 'IPFS',
1554         info: undefined
1555     },
1556
1557     'phpfpm': {
1558         title: 'PHP-FPM',
1559         info: undefined,
1560     },
1561
1562     'nginx': {
1563         title: 'nginx',
1564         info: undefined,
1565     },
1566
1567     'apache': {
1568         title: 'Apache',
1569         info: undefined,
1570     },
1571
1572     'named': {
1573         title: 'named',
1574         info: undefined
1575     }
1576 };
1577
1578 var submenuData = {
1579     'mem.ksm': {
1580         title: 'Memory Deduper',
1581         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.'
1582     },
1583
1584     'netfilter.conntrack': {
1585         title: 'Connection Tracker',
1586         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.'
1587     },
1588
1589     'netfilter.nfacct': {
1590         title: 'Bandwidth Accounting',
1591         info: 'The following information is read using the <code>nfacct.plugin</code>.'
1592     },
1593
1594     'netfilter.synproxy': {
1595         title: 'DDoS Protection',
1596         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.'
1597     }
1598 };
1599
1600 //
1601 // chartData works on the context of a chart
1602 // Its purpose is to set:
1603 //
1604 // info: the text above the charts
1605 // heads: the representation of the chart at the top the subsection (second level menu)
1606 // mainheads: the representation of the chart at the top of the section (first level menu)
1607 // colors: the dimension colors of the chart (the default colors are appended)
1608 // height: the ratio of the chart height relative to the default
1609 //
1610 var chartData = {
1611     'system.cpu': {
1612         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.'
1613     },
1614
1615     'system.load': {
1616         info: 'Current system load, i.e. the number of processes using CPU or waiting for system resources (usually CPU and disk). The 3 metrics refer to 1, 5 and 15 minute averages. Linux calculates this once every 5 seconds. Netdata reads them from <code>/proc/loadavg</code>. For more information check <a href="https://en.wikipedia.org/wiki/Load_(computing)" target="_blank">this wikipedia article</a>',
1617         height: 0.7
1618     },
1619
1620     'system.io': {
1621         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.'
1622     },
1623
1624     'system.swapio': {
1625         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).'
1626     },
1627
1628     'system.pgfaults': {
1629         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.'
1630     },
1631
1632     'system.entropy': {
1633         colors: '#CC22AA',
1634         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.'
1635     },
1636
1637     'system.forks': {
1638         colors: '#5555DD',
1639         info: 'The number of new processes created per second, read from <code>/proc/stat</code>.'
1640     },
1641
1642     'system.intr': {
1643         colors: '#DD5555',
1644         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.'
1645     },
1646
1647     'system.interrupts': {
1648         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.'
1649     },
1650
1651     'system.softirqs': {
1652         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.'
1653     },
1654
1655     'system.processes': {
1656         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.'
1657     },
1658
1659     'system.active_processes': {
1660         info: 'All system active processes, read from <code>/proc/loadavg</code>.'
1661     },
1662
1663     'system.ctxt': {
1664         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.'
1665     },
1666
1667     'system.idlejitter': {
1668         colors: '#5555AA',
1669         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).'
1670     },
1671
1672     'system.ipv4': {
1673         info: 'Total IPv4 Traffic, read from <code>/proc/net/netstat</code>.'
1674     },
1675
1676     'system.ipv6': {
1677         info: 'Total IPv6 Traffic, read from <code>/proc/net/snmp6</code>.'
1678     },
1679
1680     'system.ram': {
1681         info: 'System memory, read from <code>/proc/meminfo</code>.'
1682     },
1683
1684     'system.swap': {
1685         info: 'System swap memory, read from <code>/proc/meminfo</code>.'
1686     },
1687
1688     // ------------------------------------------------------------------------
1689     // MEMORY
1690
1691     'mem.ksm_savings': {
1692         heads: [
1693             gaugeChart('Saved', '12%', 'savings', '#0099CC')
1694         ]
1695     },
1696
1697     'mem.ksm_ratios': {
1698         heads: [
1699             function(id) {
1700                 return  '<div data-netdata="' + id + '"'
1701                     + ' data-gauge-max-value="100"'
1702                     + ' data-chart-library="gauge"'
1703                     + ' data-title="Savings"'
1704                     + ' data-units="percentage %"'
1705                     + ' data-gauge-adjust="width"'
1706                     + ' data-width="12%"'
1707                     + ' data-before="0"'
1708                     + ' data-after="-CHART_DURATION"'
1709                     + ' data-points="CHART_DURATION"'
1710                     + ' role="application"></div>';
1711             }
1712         ]
1713     },
1714
1715     'mem.committed': {
1716         colors: NETDATA.colors[3]
1717     },
1718
1719     // ------------------------------------------------------------------------
1720     // APPS
1721
1722     'apps.cpu': {
1723         height: 2.0
1724     },
1725
1726     'apps.preads': {
1727         height: 2.0
1728     },
1729
1730     'apps.pwrites': {
1731         height: 2.0
1732     },
1733
1734     // ------------------------------------------------------------------------
1735     // USERS
1736
1737     'users.cpu': {
1738         height: 2.0
1739     },
1740
1741     'users.preads': {
1742         height: 2.0
1743     },
1744
1745     'users.pwrites': {
1746         height: 2.0
1747     },
1748
1749     // ------------------------------------------------------------------------
1750     // GROUPS
1751
1752     'groups.cpu': {
1753         height: 2.0
1754     },
1755
1756     'groups.preads': {
1757         height: 2.0
1758     },
1759
1760     'groups.pwrites': {
1761         height: 2.0
1762     },
1763
1764     // ------------------------------------------------------------------------
1765     // NETWORK QoS
1766
1767     'tc.qos': {
1768         heads: [
1769             function(id) {
1770                 if(id.match(/.*-ifb$/))
1771                     return gaugeChart('Inbound', '12%', '', '#5555AA');
1772                 else
1773                     return gaugeChart('Outbound', '12%', '', '#AA9900');
1774             }
1775         ]
1776     },
1777
1778     // ------------------------------------------------------------------------
1779     // NETWORK INTERFACES
1780
1781     'net.net': {
1782         heads: [
1783             gaugeChart('Received', '12%', 'received'),
1784             gaugeChart('Sent', '12%', 'sent')
1785         ]
1786     },
1787
1788     // ------------------------------------------------------------------------
1789     // NETFILTER
1790
1791     'netfilter.sockets': {
1792         colors: '#88AA00',
1793         heads: [
1794             gaugeChart('Active Connections', '12%', '', '#88AA00')
1795         ]
1796     },
1797
1798     'netfilter.new': {
1799         heads: [
1800             gaugeChart('New Connections', '12%', 'new', '#5555AA')
1801         ]
1802     },
1803
1804     // ------------------------------------------------------------------------
1805     // DISKS
1806
1807     'disk.util': {
1808         colors: '#FF5588',
1809         heads: [
1810             gaugeChart('Utilization', '12%', '', '#FF5588')
1811         ],
1812         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.'
1813     },
1814
1815     'disk.backlog': {
1816         colors: '#0099CC',
1817         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.'
1818     },
1819
1820     'disk.io': {
1821         heads: [
1822             gaugeChart('Read', '12%', 'reads'),
1823             gaugeChart('Write', '12%', 'writes')
1824         ],
1825         info: 'Amount of data transferred to and from disk.'
1826     },
1827
1828     'disk.ops': {
1829         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).'
1830     },
1831
1832     'disk.qops': {
1833         info: 'I/O operations currently in progress. This metric is a snapshot - it is not an average over the last interval.'
1834     },
1835
1836     'disk.iotime': {
1837         height: 0.5,
1838         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.'
1839     },
1840     'disk.mops': {
1841         height: 0.5,
1842         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.'
1843     },
1844     'disk.svctm': {
1845         height: 0.5,
1846         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.'
1847     },
1848     'disk.avgsz': {
1849         height: 0.5,
1850         info: 'The average I/O operation size.'
1851     },
1852     'disk.await': {
1853         height: 0.5,
1854         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.'
1855     },
1856
1857     'disk.space': {
1858         info: 'Disk space utilization. reserved for root is automatically reserved by the system to prevent the root user from getting out of space.'
1859     },
1860     'disk.inodes': {
1861         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.'
1862     },
1863
1864     'mysql.net': {
1865         info: 'The amount of data sent to mysql clients (<strong>out</strong>) and received from mysql clients (<strong>in</strong>).'
1866     },
1867
1868     // ------------------------------------------------------------------------
1869     // MYSQL
1870
1871     'mysql.queries': {
1872         info: 'The number of statements executed by the server.<ul>' +
1873         '<li><strong>queries</strong> counts the statements executed within stored SQL programs.</li>' +
1874         '<li><strong>questions</strong> counts the statements sent to the mysql server by mysql clients.</li>' +
1875         '<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.' +
1876         ' 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>' +
1877         '</ul>'
1878     },
1879
1880     'mysql.handlers': {
1881         info: 'Usage of the internal handlers of mysql. This chart provides very good insights of what the mysql server is actually doing.' +
1882         ' (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>' +
1883         '<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>' +
1884         '<li><strong>delete</strong>, the number of times that rows have been deleted from tables.</li>' +
1885         '<li><strong>prepare</strong>, a counter for the prepare phase of two-phase commit operations.</li>' +
1886         '<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>' +
1887         '<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>' +
1888         '<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>' +
1889         '<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>' +
1890         '<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>' +
1891         '<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>' +
1892         '<li><strong>rollback</strong>, the number of requests for a storage engine to perform a rollback operation.</li>' +
1893         '<li><strong>savepoint</strong>, the number of requests for a storage engine to place a savepoint.</li>' +
1894         '<li><strong>savepoint rollback</strong>, the number of requests for a storage engine to roll back to a savepoint.</li>' +
1895         '<li><strong>update</strong>, the number of requests to update a row in a table.</li>' +
1896         '<li><strong>write</strong>, the number of requests to insert a row in a table.</li>' +
1897         '</ul>'
1898     },
1899
1900     'mysql.table_locks': {
1901         info: 'MySQL table locks counters: <ul>' +
1902         '<li><strong>immediate</strong>, the number of times that a request for a table lock could be granted immediately.</li>' +
1903         '<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>' +
1904         '</ul>'
1905     },
1906
1907     // ------------------------------------------------------------------------
1908     // APACHE
1909
1910     'apache.connections': {
1911         colors: NETDATA.colors[4],
1912         mainheads: [
1913             gaugeChart('Connections', '12%', '', NETDATA.colors[4])
1914         ]
1915     },
1916
1917     'apache.requests': {
1918         colors: NETDATA.colors[0],
1919         mainheads: [
1920             gaugeChart('Requests', '12%', '', NETDATA.colors[0])
1921         ]
1922     },
1923
1924     'apache.net': {
1925         colors: NETDATA.colors[3],
1926         mainheads: [
1927             gaugeChart('Bandwidth', '12%', '', NETDATA.colors[3])
1928         ]
1929     },
1930
1931     'apache.workers': {
1932         mainheads: [
1933             function(id) {
1934                 return  '<div data-netdata="' + id + '"'
1935                     + ' data-dimensions="busy"'
1936                     + ' data-append-options="percentage"'
1937                     + ' data-gauge-max-value="100"'
1938                     + ' data-chart-library="gauge"'
1939                     + ' data-title="Workers Utilization"'
1940                     + ' data-units="percentage %"'
1941                     + ' data-gauge-adjust="width"'
1942                     + ' data-width="12%"'
1943                     + ' data-before="0"'
1944                     + ' data-after="-CHART_DURATION"'
1945                     + ' data-points="CHART_DURATION"'
1946                     + ' role="application"></div>';
1947             }
1948         ]
1949     },
1950
1951     'apache.bytesperreq': {
1952         colors: NETDATA.colors[3],
1953         height: 0.5
1954     },
1955
1956     'apache.reqpersec': {
1957         colors: NETDATA.colors[4],
1958         height: 0.5
1959     },
1960
1961     'apache.bytespersec': {
1962         colors: NETDATA.colors[6],
1963         height: 0.5
1964     },
1965
1966
1967     // ------------------------------------------------------------------------
1968     // NGINX
1969
1970     'nginx.connections': {
1971         colors: NETDATA.colors[4],
1972         mainheads: [
1973             gaugeChart('Connections', '12%', '', NETDATA.colors[4])
1974         ]
1975     },
1976
1977     'nginx.requests': {
1978         colors: NETDATA.colors[0],
1979         mainheads: [
1980             gaugeChart('Requests', '12%', '', NETDATA.colors[0])
1981         ]
1982     },
1983
1984     // ------------------------------------------------------------------------
1985     // NETDATA
1986
1987     'netdata.response_time': {
1988         info: 'The netdata API response time measures the time netdata needed to serve requests. This time includes everything, from the reception of the first byte of a request, to the dispatch of the last byte of its reply, therefore it includes all network latencies involved (i.e. a client over a slow network will influence these metrics).'
1989     }
1990 };
1991
1992 function anyAttribute(obj, attr, key, def) {
1993     if(typeof obj[key] !== 'undefined') {
1994         if(typeof obj[key][attr] !== 'undefined')
1995             return obj[key][attr];
1996     }
1997     return def;
1998 }
1999
2000 function menuTitle(chart) {
2001     if(typeof chart.menu_pattern !== 'undefined') {
2002         return anyAttribute(menuData, 'title', chart.menu_pattern, chart.menu_pattern).toString()
2003                 + ': ' + chart.type.slice(-(chart.type.length - chart.menu_pattern.length - 1)).toString();
2004     }
2005
2006     return anyAttribute(menuData, 'title', chart.menu, chart.menu);
2007 }
2008
2009 function menuInfo(menu) {
2010     return anyAttribute(menuData, 'info', menu, null);
2011 }
2012
2013 function menuHeight(menu, relative) {
2014     return anyAttribute(menuData, 'height', menu, 1.0) * relative;
2015 }
2016
2017 function submenuTitle(menu, submenu) {
2018     var key = menu + '.' + submenu;
2019     return anyAttribute(submenuData, 'title', key, submenu);
2020 }
2021
2022 function submenuInfo(menu, submenu) {
2023     var key = menu + '.' + submenu;
2024     return anyAttribute(submenuData, 'info', key, null);
2025 }
2026
2027 function submenuHeight(menu, submenu, relative) {
2028     var key = menu + '.' + submenu;
2029     return anyAttribute(submenuData, 'height', key, 1.0) * relative;
2030 }
2031
2032
2033 function chartInfo(id) {
2034     if(typeof chartData[id] !== 'undefined' && typeof chartData[id].info !== 'undefined')
2035         return '<div class="chart-message netdata-chart-alignment" role="document">' + chartData[id].info + '</div>';
2036     else
2037         return '';
2038 }
2039
2040 function chartHeight(id, def) {
2041     if(typeof chartData[id] !== 'undefined' && typeof chartData[id].height !== 'undefined')
2042         return def * chartData[id].height;
2043     else
2044         return def;
2045 }
2046
2047
2048 // ----------------------------------------------------------------------------
2049
2050 // enrich the data structure returned by netdata
2051 // to reflect our menu system and content
2052 function enrichChartData(chart) {
2053     var tmp = chart.type.split('_')[0];
2054
2055     switch(tmp) {
2056         case 'ap':
2057         case 'net':
2058         case 'disk':
2059             chart.menu = tmp;
2060             break;
2061
2062         case 'cgroup':
2063             chart.menu = chart.type;
2064             if(chart.id.match(/.*[\._\/-:]qemu[\._\/-:]*/) || chart.id.match(/.*[\._\/-:]kvm[\._\/-:]*/))
2065                 chart.menu_pattern = 'cgqemu';
2066             else
2067                 chart.menu_pattern = 'cgroup';
2068             break;
2069
2070         case 'apache':
2071         case 'exim':
2072         case 'memcached':
2073         case 'mysql':
2074         case 'named':
2075         case 'nginx':
2076         case 'phpfpm':
2077         case 'postfix':
2078         case 'redis':
2079         case 'ipfs':
2080         case 'squid':
2081         case 'snmp':
2082         case 'tomcat':
2083             chart.menu = chart.type;
2084             chart.menu_pattern = tmp;
2085             break;
2086
2087         case 'tc':
2088             chart.menu = tmp;
2089
2090             // find a name for this device from fireqos info
2091             // we strip '_(in|out)' or '(in|out)_'
2092             if(typeof options.submenu_names[chart.family] === 'undefined' || options.submenu_names[chart.family] === chart.family) {
2093                 var n = chart.name.split('.')[1];
2094                 if(n.endsWith('_in'))
2095                     options.submenu_names[chart.family] = n.slice(0, n.lastIndexOf('_in'));
2096                 else if(n.endsWith('_out'))
2097                     options.submenu_names[chart.family] = n.slice(0, n.lastIndexOf('_out'));
2098                 else if(n.startsWith('in_'))
2099                     options.submenu_names[chart.family] = n.slice(3, n.length);
2100                 else if(n.startsWith('out_'))
2101                     options.submenu_names[chart.family] = n.slice(4, n.length);
2102             }
2103
2104             // increase the priority of IFB devices
2105             // to have inbound appear before outbound
2106             if(chart.id.match(/.*-ifb$/))
2107                 chart.priority--;
2108
2109             break;
2110
2111         default:
2112             chart.menu = chart.type;
2113             break;
2114     }
2115
2116     chart.submenu = chart.family;
2117 }
2118
2119 // ----------------------------------------------------------------------------
2120
2121 function name2id(s) {
2122     return s
2123         .replace(/ /g, '_')
2124         .replace(/\(/g, '_')
2125         .replace(/\)/g, '_')
2126         .replace(/\./g, '_')
2127         .replace(/\//g, '_');
2128 }
2129
2130 function headMain(charts, duration) {
2131     var head = '';
2132
2133     if(typeof charts['system.swap'] !== 'undefined')
2134         head += '<div style="margin-right: 10px;" data-netdata="system.swap"'
2135         + ' data-dimensions="free"'
2136         + ' data-append-options="percentage"'
2137         + ' data-chart-library="easypiechart"'
2138         + ' data-title="Free Swap"'
2139         + ' data-units="%"'
2140         + ' data-easypiechart-max-value="100"'
2141         + ' data-width="8%"'
2142         + ' data-before="0"'
2143         + ' data-after="-' + duration.toString() + '"'
2144         + ' data-points="' + duration.toString() + '"'
2145         + ' data-colors="#DD4400"'
2146         + ' role="application"></div>';
2147
2148     if(typeof charts['system.io'] !== 'undefined') {
2149         head += '<div style="margin-right: 10px;" data-netdata="system.io"'
2150         + ' data-dimensions="in"'
2151         + ' data-chart-library="easypiechart"'
2152         + ' data-title="Disk Read"'
2153         + ' data-width="10%"'
2154         + ' data-before="0"'
2155         + ' data-after="-' + duration.toString() + '"'
2156         + ' data-points="' + duration.toString() + '"'
2157         + ' role="application"></div>';
2158
2159         head += '<div style="margin-right: 10px;" data-netdata="system.io"'
2160         + ' data-dimensions="out"'
2161         + ' data-chart-library="easypiechart"'
2162         + ' data-title="Disk Write"'
2163         + ' data-width="10%"'
2164         + ' data-before="0"'
2165         + ' data-after="-' + duration.toString() + '"'
2166         + ' data-points="' + duration.toString() + '"'
2167         + ' role="application"></div>';
2168     }
2169
2170     if(typeof charts['system.cpu'] !== 'undefined')
2171         head += '<div data-netdata="system.cpu"'
2172         + ' data-chart-library="gauge"'
2173         + ' data-title="CPU"'
2174         + ' data-units="%"'
2175         + ' data-gauge-max-value="100"'
2176         + ' data-width="18%"'
2177         + ' data-after="-' + duration.toString() + '"'
2178         + ' data-points="' + duration.toString() + '"'
2179         + ' data-colors="' + NETDATA.colors[12] + '"'
2180         + ' role="application"></div>';
2181
2182     if(typeof charts['system.ipv4'] !== 'undefined') {
2183         head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
2184         + ' data-dimensions="received"'
2185         + ' data-chart-library="easypiechart"'
2186         + ' data-title="IPv4 Inbound"'
2187         + ' data-width="10%"'
2188         + ' data-before="0"'
2189         + ' data-after="-' + duration.toString() + '"'
2190         + ' data-points="' + duration.toString() + '"'
2191         + ' role="application"></div>';
2192
2193         head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
2194         + ' data-dimensions="sent"'
2195         + ' data-chart-library="easypiechart"'
2196         + ' data-title="IPv4 Outbound"'
2197         + ' data-width="10%"'
2198         + ' data-before="0"'
2199         + ' data-after="-' + duration.toString() + '"'
2200         + ' data-points="' + duration.toString() + '"'
2201         + ' role="application"></div>';
2202     }
2203     else if(typeof charts['system.ipv6'] !== 'undefined') {
2204         head += '<div style="margin-right: 10px;" data-netdata="system.ipv6"'
2205         + ' data-dimensions="received"'
2206         + ' data-chart-library="easypiechart"'
2207         + ' data-title="IPv6 Inbound"'
2208         + ' data-units="kbps"'
2209         + ' data-width="10%"'
2210         + ' data-before="0"'
2211         + ' data-after="-' + duration.toString() + '"'
2212         + ' data-points="' + duration.toString() + '"'
2213         + ' role="application"></div>';
2214
2215         head += '<div style="margin-right: 10px;" data-netdata="system.ipv6"'
2216         + ' data-dimensions="sent"'
2217         + ' data-chart-library="easypiechart"'
2218         + ' data-title="IPv6 Outbound"'
2219         + ' data-units="kbps"'
2220         + ' data-width="10%"'
2221         + ' data-before="0"'
2222         + ' data-after="-' + duration.toString() + '"'
2223         + ' data-points="' + duration.toString() + '"'
2224         + ' role="application"></div>';
2225     }
2226
2227     if(typeof charts['system.ram'] !== 'undefined')
2228         head += '<div style="margin-right: 10px;" data-netdata="system.ram"'
2229         + ' data-dimensions="cached|free"'
2230         + ' data-append-options="percentage"'
2231         + ' data-chart-library="easypiechart"'
2232         + ' data-title="Available RAM"'
2233         + ' data-units="%"'
2234         + ' data-easypiechart-max-value="100"'
2235         + ' data-width="8%"'
2236         + ' data-after="-' + duration.toString() + '"'
2237         + ' data-points="' + duration.toString() + '"'
2238         + ' data-colors="' + NETDATA.colors[7] + '"'
2239         + ' role="application"></div>';
2240
2241     return head;
2242 }
2243
2244 function generateHeadCharts(type, chart, duration) {
2245     var head = '';
2246     var hcharts = anyAttribute(chartData, type, chart.context, []);
2247     if(hcharts.length > 0) {
2248         var hi = 0, hlen = hcharts.length;
2249         while(hi < hlen) {
2250             if(typeof hcharts[hi] === 'function')
2251                 head += hcharts[hi](chart.id).replace('CHART_DURATION', duration.toString()).replace('CHART_UNIQUE_ID', chart.id);
2252             else
2253                 head += hcharts[hi].replace('CHART_DURATION', duration.toString()).replace('CHART_UNIQUE_ID', chart.id);
2254             hi++;
2255         }
2256     }
2257     return head;
2258 }
2259
2260 function renderPage(menus, data) {
2261     var div = document.getElementById('charts_div');
2262     var pcent_width = Math.floor(100 / chartsPerRow($(div).width()));
2263
2264     // find the proper duration for per-second updates
2265     var duration = Math.round(($(div).width() * pcent_width / 100 * data.update_every / 3) / 60) * 60;
2266     var html = '';
2267     var sidebar = '<ul class="nav dashboard-sidenav" data-spy="affix" id="sidebar_ul">';
2268     var mainhead = headMain(data.charts, duration);
2269
2270     // sort the menus
2271     var main = sortObjectByPriority(menus);
2272     var i = 0, len = main.length;
2273     while(i < len) {
2274         var menu = main[i++];
2275
2276         // generate an entry at the main menu
2277
2278         var menuid = name2id(menu);
2279         sidebar += '<li class=""><a href="#' + menuid + '" onClick="return scrollToId(\'' + menuid + '\');">' + menus[menu].title + '</a><ul class="nav">';
2280         html += '<div role="section"><div role="sectionhead"><h1 id="' + menuid + '" role="heading">' + menus[menu].title + '</h1></div><div id="menu_' + menuid + '" role="document">';
2281
2282         if(menus[menu].info !== null)
2283             html += menus[menu].info;
2284
2285         // console.log(' >> ' + menu + ' (' + menus[menu].priority + '): ' + menus[menu].title);
2286
2287         var shtml = '';
2288         var mhead = '<div class="netdata-chart-row">' + mainhead;
2289         mainhead = '';
2290
2291         // sort the submenus of this menu
2292         var sub = sortObjectByPriority(menus[menu].submenus);
2293         var si = 0, slen = sub.length;
2294         while(si < slen) {
2295             var submenu = sub[si++];
2296
2297             // generate an entry at the submenu
2298             var submenuid = name2id(menu + '_' + submenu);
2299             sidebar += '<li class><a href="#' + submenuid + '" onClick="return scrollToId(\'' + submenuid + '\');">' + menus[menu].submenus[submenu].title + '</a></li>';
2300             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>';
2301
2302             if(menus[menu].submenus[submenu].info !== null)
2303                 shtml += '<div class="chart-message netdata-chart-alignment" role="document">' + menus[menu].submenus[submenu].info + '</div>';
2304
2305             var head = '<div class="netdata-chart-row">';
2306             var chtml = '';
2307
2308             // console.log('    \------- ' + submenu + ' (' + menus[menu].submenus[submenu].priority + '): ' + menus[menu].submenus[submenu].title);
2309
2310             // sort the charts in this submenu of this menu
2311             menus[menu].submenus[submenu].charts.sort(prioritySort);
2312             var ci = 0, clen = menus[menu].submenus[submenu].charts.length;
2313             while(ci < clen) {
2314                 var chart = menus[menu].submenus[submenu].charts[ci++];
2315
2316                 // generate the submenu heading charts
2317                 mhead += generateHeadCharts('mainheads', chart, duration);
2318                 head += generateHeadCharts('heads', chart, duration);
2319
2320                 // generate the chart
2321                 chtml += chartInfo(chart.context) + '<div data-netdata="' + chart.id + '"'
2322                     + ' data-width="' + pcent_width.toString() + '%"'
2323                     + ' data-height="' + chartHeight(chart.context, options.chartsHeight).toString() + 'px"'
2324                     + ' data-before="0"'
2325                     + ' data-after="-' + duration.toString() + '"'
2326                     + ' data-id="' + name2id(options.hostname + '/' + chart.id) + '"'
2327                     + ' data-colors="' + anyAttribute(chartData, 'colors', chart.context, '') + '"'
2328                     + ' role="application"></div>';
2329
2330                 // console.log('         \------- ' + chart.id + ' (' + chart.priority + '): ' + chart.context  + ' height: ' + menus[menu].submenus[submenu].height);
2331             }
2332
2333             head += '</div>';
2334             shtml += head + chtml + '</div>';
2335         }
2336
2337         mhead += '</div>';
2338         sidebar += '</ul></li>';
2339         html += mhead + shtml + '</div></div><hr role="separator"/>';
2340     }
2341
2342     sidebar += '</ul>';
2343     div.innerHTML = html;
2344     document.getElementById('sidebar').innerHTML = sidebar;
2345     finalizePage();
2346 }
2347
2348 function renderChartsAndMenu(data) {
2349     var menus = {};
2350     var charts = data.charts;
2351
2352     for(var c in charts) {
2353         enrichChartData(charts[c]);
2354
2355         // create the menu
2356         if(typeof menus[charts[c].menu] === 'undefined') {
2357             menus[charts[c].menu] = {
2358                 priority: charts[c].priority,
2359                 submenus: {},
2360                 title: menuTitle(charts[c]),
2361                 info: menuInfo(charts[c].menu),
2362                 height: menuHeight(charts[c].menu, options.chartsHeight)
2363             };
2364         }
2365
2366         if(charts[c].priority < menus[charts[c].menu].priority)
2367             menus[charts[c].menu].priority = charts[c].priority;
2368
2369         // create the submenu
2370         if(typeof menus[charts[c].menu].submenus[charts[c].submenu] === 'undefined') {
2371             menus[charts[c].menu].submenus[charts[c].submenu] = {
2372                 priority: charts[c].priority,
2373                 charts: new Array(),
2374                 title: null,
2375                 info: submenuInfo(charts[c].menu, charts[c].submenu),
2376                 height: submenuHeight(charts[c].menu, charts[c].submenu, menus[charts[c].menu].height)
2377             };
2378         }
2379
2380         if(charts[c].priority < menus[charts[c].menu].submenus[charts[c].submenu].priority)
2381             menus[charts[c].menu].submenus[charts[c].submenu].priority = charts[c].priority;
2382
2383         // index the chart in the menu/submenu
2384         menus[charts[c].menu].submenus[charts[c].submenu].charts.push(charts[c]);
2385     }
2386
2387     // propagate the descriptive subname given to QoS
2388     // to all the other submenus with the same name
2389     for(var m in menus) {
2390         for(var s in menus[m].submenus) {
2391             // set the family using a name
2392             if(typeof options.submenu_names[s] !== 'undefined') {
2393                 menus[m].submenus[s].title = s + ' (' + options.submenu_names[s] + ')';
2394             }
2395             else {
2396                 menus[m].submenus[s].title = submenuTitle(m, s);
2397             }
2398         }
2399     }
2400
2401     renderPage(menus, data);
2402 }
2403
2404 function alarmsUpdateModal() {
2405     var active = '<h3>Raised Alarms</h3>';
2406     var all = '<h3>All Running Alarms</h3>';
2407     var log = '<h3>Alarm Log</h3>';
2408     var footer = '<hr/>These are <a href="https://github.com/firehol/netdata/wiki/Generating-Badges" target="_blank">netdata badges</a>. You can copy and paste their URLs to embed them in any web page. Their color indicates the state of the alarm: <b>red</b> is critical, <b>orange</b> is warning, <b>bright green</b> is ok, <b>light grey</b> is undefined (i.e. no data or no status), <b>black</b> is not initialized.';
2409
2410     NETDATA.alarms.get('all', function(data) {
2411         if(data === null) {
2412             document.getElementById('alarms_active').innerHTML =
2413                     document.getElementById('alarms_all').innerHTML =
2414                             document.getElementById('alarms_log').innerHTML =
2415                                     'failed to load alarm data!';
2416             return;
2417         }
2418
2419         var now = new Date().getTime();
2420         var x;
2421         var count_active = 0;
2422         var count_all = 0;
2423         var count_log = 0;
2424         var families = {};
2425         for(x in data.alarms) {
2426             var alarm = data.alarms[x];
2427
2428             if(typeof families[alarm.family] === 'undefined')
2429                 families[alarm.family] = new Array();
2430
2431             families[alarm.family].push(alarm);
2432         }
2433
2434         for(x in families) {
2435             var active_family_added = false;
2436             var all_family_added = false;
2437
2438             var arr = families[x];
2439             var c = arr.length;
2440             while(c--) {
2441                 var alarm = arr[c];
2442                 if(alarm.status === 'WARNING' || alarm.status === 'CRITICAL') {
2443                     if(!active_family_added) {
2444                         active_family_added = true;
2445                         active += '<h4>' + x + '</h4>';
2446                     }
2447                     active += '<embed><img src="' + NETDATA.serverDefault + '/api/v1/badge.svg?chart=' + alarm.chart + '&alarm=' + alarm.name + '&refresh=auto&_=' + now.toString()+ '"></img></embed><br/>';
2448                     count_active++;
2449                 }
2450
2451                 if(!all_family_added) {
2452                     all_family_added = true;
2453                     all += '<h4>' + x + '</h4>';
2454                 }
2455                 all += '<embed><img src="' + NETDATA.serverDefault + '/api/v1/badge.svg?chart=' + alarm.chart + '&alarm=' + alarm.name + '&refresh=auto&_=' + now.toString()+ '"></img></embed><br/>';
2456                 count_all++;
2457             }
2458         }
2459
2460         if(!count_active)
2461             active += "<h4>Everything is normal. No raised alarms.</h4>";
2462         else
2463             active += footer;
2464
2465         if(!count_all)
2466             all += "<h4>No alarms are running in this system.</h4>";
2467         else
2468             all += footer;
2469
2470         if(!count_log)
2471             log += "<h4>No alarms have been logged in this system.</h4>";
2472
2473         document.getElementById('alarms_active').innerHTML = active;
2474         document.getElementById('alarms_all').innerHTML = all;
2475         document.getElementById('alarms_log').innerHTML = log;
2476     });
2477 }
2478
2479 function alarmsCallback(data) {
2480     var count = 0;
2481     for(x in data.alarms)
2482         count++;
2483
2484     if(count > 0)
2485         document.getElementById('alarms_count_badge').innerHTML = count.toString();
2486     else
2487         document.getElementById('alarms_count_badge').innerHTML = '';
2488 }
2489
2490 function downloadAllCharts(netdata_url) {
2491     if(typeof netdata_url === 'undefined' || netdata_url === null)
2492         netdata_url = NETDATA.serverDefault;
2493
2494     NETDATA.pause(function() {
2495         $("#loadOverlay").css("display","none");
2496         $("#loadOverlay").css("display","none");
2497
2498         NETDATA.alarms.callback = alarmsCallback;
2499
2500         // download all the charts the server knows
2501         NETDATA.chartRegistry.downloadAll(netdata_url, function(data) {
2502
2503             options.data = data;
2504             options.hostname = data.hostname;
2505             document.getElementById('hostname').innerHTML = options.hostname;
2506             document.getElementById('hostname').href = NETDATA.serverDefault;
2507             document.title = options.hostname + ' netdata dashboard';
2508
2509             renderChartsAndMenu(data);
2510
2511             // prepare our DOM
2512 //          prepareScreen(data);
2513
2514             // due to affix issues, prepareScreen() will unpause
2515             // netdata as needed
2516         });
2517     });
2518 }
2519
2520 // ----------------------------------------------------------------------------
2521
2522 function versionLog(msg) {
2523     document.getElementById('versionCheckLog').innerHTML = msg;
2524 }
2525
2526 function getNetdataVersion(callback) {
2527     versionLog('Downloading installed version info from netdata...');
2528
2529     $.ajax({
2530         url: 'version.txt',
2531         async: true,
2532         cache: false
2533     })
2534     .done(function(data) {
2535         data = data.replace(/(\r\n|\n|\r| |\t)/gm,"");
2536         if(data.length !== 40) {
2537             versionLog('Received version string is invalid.');
2538             callback(null);
2539         }
2540         else {
2541             versionLog('Installed version of netdata is ' + data);
2542             document.getElementById('netdataVersion').innerHTML = data;
2543             callback(data);
2544         }
2545     })
2546     .fail(function() {
2547         versionLog('Failed to download installed version info from netdata!');
2548         callback(null);
2549     });
2550 }
2551
2552 function getGithubLatestCommit(callback) {
2553     versionLog('Downloading latest version info from github...');
2554
2555     $.ajax({
2556         url: 'https://api.github.com/repos/firehol/netdata/commits',
2557         async: true,
2558         cache: false
2559     })
2560     .done(function(data) {
2561         versionLog('Latest version info from github is ' + data[0].sha);
2562         callback(data[0].sha);
2563     })
2564     .fail(function() {
2565         versionLog('Failed to download installed version info from github!');
2566         callback(null);
2567     });
2568 }
2569
2570 function checkForUpdate(callback) {
2571     getNetdataVersion(function(sha1) {
2572         if(sha1 === null) callback(null, null);
2573
2574         getGithubLatestCommit(function(sha2) {
2575             callback(sha1, sha2);
2576         });
2577     });
2578
2579     return null;
2580 }
2581
2582 function notifyForUpdate(force) {
2583     versionLog('<p>checking for updates...</p>');
2584
2585     var now = new Date().getTime();
2586
2587     if(typeof force === 'undefined' || force !== true) {
2588         var last = loadLocalStorage('last_update_check');
2589
2590         if(typeof last === 'string')
2591             last = parseInt(last);
2592         else
2593             last = 0;
2594
2595         if(now - last < 3600000 * 8) {
2596             // no need to check it - too soon
2597             return;
2598         }
2599     }
2600
2601     checkForUpdate(function(sha1, sha2) {
2602         var save = false;
2603
2604         if(sha1 === null) {
2605             save = false;
2606             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>');
2607         }
2608         else if(sha2 === null) {
2609             save = false;
2610             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>');
2611         }
2612         else if(sha1 === sha2) {
2613             save = true;
2614             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>');
2615         }
2616         else {
2617             save = true;
2618             var compare = 'https://github.com/firehol/netdata/compare/' + sha1.toString() + '...' + sha2.toString();
2619
2620             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>');
2621
2622             document.getElementById('update_badge').innerHTML = '!';
2623         }
2624
2625         if(save)
2626             saveLocalStorage('last_update_check', now.toString());
2627     });
2628 }
2629
2630 // ----------------------------------------------------------------------------
2631
2632 function finalizePage() {
2633     // resize all charts - without starting the background thread
2634     // this has to be done while NETDATA is paused
2635     // if we ommit this, the affix menu will be wrong, since all
2636     // the Dom elements are initially zero-sized
2637     NETDATA.parseDom();
2638
2639     if(urlOptions.pan_and_zoom === true) {
2640         urlOptions.nowelcome = true;
2641         NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], urlOptions.after, urlOptions.before);
2642     }
2643
2644     // ------------------------------------------------------------------------
2645     // https://github.com/viralpatel/jquery.shorten/blob/master/src/jquery.shorten.js
2646     $.fn.shorten = function(settings) {
2647         "use strict";
2648
2649         var config = {
2650             showChars: 750,
2651             minHideChars: 10,
2652             ellipsesText: "...",
2653             moreText: '<i class="fa fa-expand" aria-hidden="true"></i> show more information',
2654             lessText: '<i class="fa fa-compress" aria-hidden="true"></i> show less information',
2655             onLess: function() { NETDATA.onscroll(); },
2656             onMore: function() { NETDATA.onscroll(); },
2657             errMsg: null,
2658             force: false
2659         };
2660
2661         if (settings) {
2662             $.extend(config, settings);
2663         }
2664
2665         if ($(this).data('jquery.shorten') && !config.force) {
2666             return false;
2667         }
2668         $(this).data('jquery.shorten', true);
2669
2670         $(document).off("click", '.morelink');
2671
2672         $(document).on({
2673             click: function() {
2674
2675                 var $this = $(this);
2676                 if ($this.hasClass('less')) {
2677                     $this.removeClass('less');
2678                     $this.html(config.moreText);
2679                     $this.parent().prev().animate({'height':'0'+'%'}, 0, function () { $this.parent().prev().prev().show(); }).hide(0, function() {
2680                         config.onLess();
2681                     });
2682
2683                 } else {
2684                     $this.addClass('less');
2685                     $this.html(config.lessText);
2686                     $this.parent().prev().animate({'height':'100'+'%'}, 0, function () { $this.parent().prev().prev().hide(); }).show(0, function() {
2687                         config.onMore();
2688                     });
2689                 }
2690                 return false;
2691             }
2692         }, '.morelink');
2693
2694         return this.each(function() {
2695             var $this = $(this);
2696
2697             var content = $this.html();
2698             var contentlen = $this.text().length;
2699             if (contentlen > config.showChars + config.minHideChars) {
2700                 var c = content.substr(0, config.showChars);
2701                 if (c.indexOf('<') >= 0) // If there's HTML don't want to cut it
2702                 {
2703                     var inTag = false; // I'm in a tag?
2704                     var bag = ''; // Put the characters to be shown here
2705                     var countChars = 0; // Current bag size
2706                     var openTags = []; // Stack for opened tags, so I can close them later
2707                     var tagName = null;
2708
2709                     for (var i = 0, r = 0; r <= config.showChars; i++) {
2710                         if (content[i] == '<' && !inTag) {
2711                             inTag = true;
2712
2713                             // This could be "tag" or "/tag"
2714                             tagName = content.substring(i + 1, content.indexOf('>', i));
2715
2716                             // If its a closing tag
2717                             if (tagName[0] == '/') {
2718
2719
2720                                 if (tagName != '/' + openTags[0]) {
2721                                     config.errMsg = 'ERROR en HTML: the top of the stack should be the tag that closes';
2722                                 } else {
2723                                     openTags.shift(); // Pops the last tag from the open tag stack (the tag is closed in the retult HTML!)
2724                                 }
2725
2726                             } else {
2727                                 // There are some nasty tags that don't have a close tag like <br/>
2728                                 if (tagName.toLowerCase() != 'br') {
2729                                     openTags.unshift(tagName); // Add to start the name of the tag that opens
2730                                 }
2731                             }
2732                         }
2733                         if (inTag && content[i] == '>') {
2734                             inTag = false;
2735                         }
2736
2737                         if (inTag) { bag += content.charAt(i); } // Add tag name chars to the result
2738                         else {
2739                             r++;
2740                             if (countChars <= config.showChars) {
2741                                 bag += content.charAt(i); // Fix to ie 7 not allowing you to reference string characters using the []
2742                                 countChars++;
2743                             } else // Now I have the characters needed
2744                             {
2745                                 if (openTags.length > 0) // I have unclosed tags
2746                                 {
2747                                     //console.log('They were open tags');
2748                                     //console.log(openTags);
2749                                     for (j = 0; j < openTags.length; j++) {
2750                                         //console.log('Cierro tag ' + openTags[j]);
2751                                         bag += '</' + openTags[j] + '>'; // Close all tags that were opened
2752
2753                                         // 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
2754                                     }
2755                                     break;
2756                                 }
2757                             }
2758                         }
2759                     }
2760                     c = $('<div/>').html(bag + '<span class="ellip">' + config.ellipsesText + '</span>').html();
2761                 }else{
2762                     c+=config.ellipsesText;
2763                 }
2764
2765                 var html = '<div class="shortcontent">' + c +
2766                         '</div><div class="allcontent">' + content +
2767                         '</div><span><a href="javascript://nop/" class="morelink">' + config.moreText + '</a></span>';
2768
2769                 $this.html(html);
2770                 $this.find(".allcontent").hide(); // Hide all text
2771                 $('.shortcontent p:last', $this).css('margin-bottom', 0); //Remove bottom margin on last paragraph as it's likely shortened
2772             }
2773         });
2774
2775     };
2776     $(".chart-message").shorten();
2777     // ------------------------------------------------------------------------
2778
2779     // callback for us to track PanAndZoom operations
2780     NETDATA.globalPanAndZoom.callback = netdataPanAndZoomCallback;
2781
2782     // let it run (update the charts)
2783     NETDATA.unpause();
2784
2785     // check if we have to jump to a specific section
2786     scrollToId(urlOptions.hash.replace('#',''));
2787
2788     /* activate bootstrap sidebar (affix) */
2789     $('#sidebar').affix({
2790         offset: {
2791             top: (isdemo())?150:0,
2792             bottom: 0
2793         }
2794     });
2795
2796     /* fix scrolling of very long affix lists
2797        http://stackoverflow.com/questions/21691585/bootstrap-3-1-0-affix-too-long
2798      */
2799     $('#sidebar').on('affixed.bs.affix', function() {
2800         $(this).removeAttr('style');
2801     });
2802
2803     /* activate bootstrap scrollspy (needed for sidebar) */
2804     $(document.body).scrollspy({
2805         target: '#sidebar',
2806         offset: $(window).height() / 3 // controls the diff of the <hX> element to the top, to select it
2807     });
2808
2809     // change the URL based on the current position of the screen
2810     $('#sidebar').on('activate.bs.scrollspy', function (e) {
2811         var el = $(e.target);
2812         if(el.find('ul').size() == 0) {
2813             var hash = el.find('a').attr('href');
2814             if(typeof hash === 'string' && hash.substring(0, 1) == '#') {
2815                 urlOptions.hash = hash;
2816                 // console.log(urlOptions.hash);
2817                 netdataHashUpdate();
2818             }
2819         }
2820     });
2821
2822     document.getElementById('footer').style.display = 'block';
2823
2824     var update_options_modal = function() {
2825         // console.log('update_options_modal');
2826
2827         var sync_option = function(option) {
2828             var self = $('#' + option);
2829
2830             if(self.prop('checked') !== NETDATA.getOption(option)) {
2831                 // console.log('switching ' + option.toString());
2832                 self.bootstrapToggle(NETDATA.getOption(option)?'on':'off');
2833             }
2834         }
2835
2836         var theme_sync_option = function(option) {
2837             var self = $('#' + option);
2838
2839             self.bootstrapToggle(netdataTheme === 'slate'?'on':'off');
2840         }
2841
2842         sync_option('eliminate_zero_dimensions');
2843         sync_option('destroy_on_hide');
2844         sync_option('parallel_refresher');
2845         sync_option('concurrent_refreshes');
2846         sync_option('sync_selection');
2847         sync_option('sync_pan_and_zoom');
2848         sync_option('stop_updates_when_focus_is_lost');
2849         sync_option('smooth_plot');
2850         sync_option('pan_and_zoom_data_padding');
2851         sync_option('show_help');
2852         theme_sync_option('netdata_theme_control');
2853
2854         if(NETDATA.getOption('parallel_refresher') === false) {
2855             $('#concurrent_refreshes_row').hide();
2856         }
2857         else {
2858             $('#concurrent_refreshes_row').show();
2859         }
2860     };
2861     NETDATA.setOption('setOptionCallback', update_options_modal);
2862
2863     // handle options changes
2864     $('#eliminate_zero_dimensions').change(function()       { NETDATA.setOption('eliminate_zero_dimensions', $(this).prop('checked')); });
2865     $('#destroy_on_hide').change(function()                 { NETDATA.setOption('destroy_on_hide', $(this).prop('checked')); });
2866     $('#parallel_refresher').change(function()              { NETDATA.setOption('parallel_refresher', $(this).prop('checked')); });
2867     $('#concurrent_refreshes').change(function()            { NETDATA.setOption('concurrent_refreshes', $(this).prop('checked')); });
2868     $('#sync_selection').change(function()                  { NETDATA.setOption('sync_selection', $(this).prop('checked')); });
2869     $('#sync_pan_and_zoom').change(function()               { NETDATA.setOption('sync_pan_and_zoom', $(this).prop('checked')); });
2870     $('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); });
2871     $('#smooth_plot').change(function()                     { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
2872     $('#pan_and_zoom_data_padding').change(function()       { NETDATA.setOption('pan_and_zoom_data_padding', $(this).prop('checked')); });
2873     $('#show_help').change(function()                       {
2874         urlOptions.help = $(this).prop('checked');
2875         NETDATA.setOption('show_help', urlOptions.help);
2876         netdataReload();
2877     });
2878
2879     // this has to be the last
2880     // it reloads the page
2881     $('#netdata_theme_control').change(function() {
2882         urlOptions.theme = $(this).prop('checked')?'slate':'white';
2883         if(setTheme(urlOptions.theme))
2884             netdataReload();
2885     });
2886
2887     $('#updateModal').on('shown.bs.modal', function() {
2888         notifyForUpdate(true);
2889     });
2890
2891     $('#alarmsModal').on('shown.bs.modal', function() {
2892         alarmsUpdateModal();
2893     });
2894
2895     $('#alarmsModal').on('hidden.bs.modal', function() {
2896         document.getElementById('alarms_active').innerHTML =
2897                 document.getElementById('alarms_all').innerHTML =
2898                 document.getElementById('alarms_log').innerHTML =
2899                         'loading...';
2900     });
2901
2902     $('#deleteRegistryModal').on('hidden.bs.modal', function() {
2903         deleteRegistryGuid = null;
2904     });
2905
2906     if(isdemo()) {
2907         if(!urlOptions.nowelcome) {
2908             setTimeout(function() {
2909                 $('#welcomeModal').modal();
2910             }, 1000);
2911         }
2912
2913         // google analytics when this is used for the home page of the demo sites
2914         // this does not run on user's installations
2915         setTimeout(function() {
2916             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
2917             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
2918             m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
2919             })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
2920
2921             ga('create', 'UA-64295674-3', 'auto');
2922             ga('send', 'pageview');
2923         }, 2000);
2924     }
2925     else notifyForUpdate();
2926 }
2927
2928 function resetDashboardOptions() {
2929     var help = NETDATA.options.current.show_help;
2930
2931     NETDATA.resetOptions();
2932     if(setTheme('slate'))
2933         netdataReload();
2934
2935     if(help !== NETDATA.options.current.show_help)
2936         netdataReload();
2937 }
2938
2939 downloadAllCharts();
2940
2941 </script>
2942
2943 </body>
2944 </html>