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