web/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <title>netdata dashboard</title>
   5
   6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   7         <meta charset="utf-8">
   8         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   9         <meta name="viewport" content="width=device-width, initial-scale=1">
  10         <meta name="apple-mobile-web-app-capable" content="yes">
  11         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  12         <meta name="author" content="costa@tsaousis.gr">
  13
  14         <link rel="shortcut icon" href="images/seo-performance-multi-size.ico">
  15
  16         <link rel="apple-touch-icon" href="images/seo-performance-72.png">
  17         <link rel="apple-touch-icon" sizes="72x72" href="images/seo-performance-72.png">
  18         <link rel="apple-touch-icon" sizes="114x114" href="images/seo-performance-114.png">
  19
  20         <link rel="icon" type="image/png" sizes="512x512" href="images/seo-performance-512.png">
  21         <link rel="icon" type="image/png" sizes="256x256" href="images/seo-performance-256.png">
  22         <link rel="icon" type="image/png" sizes="128x128" href="images/seo-performance-128.png">
  23         <link rel="icon" type="image/png" sizes="64x64" href="images/seo-performance-64.png">
  24         <link rel="icon" type="image/png" sizes="48x48" href="images/seo-performance-48.png">
  25         <link rel="icon" type="image/png" sizes="32x32" href="images/seo-performance-32.png">
  26         <link rel="icon" type="image/png" sizes="24x24" href="images/seo-performance-24.png">
  27         <link rel="icon" type="image/png" sizes="16x16" href="images/seo-performance-16.png">
  28
  29         <style>
  30
  31         /* prevent body from hiding under the navbar */
  32         body {
  33                 padding-top: 50px;
  34         }
  35
  36         .modal-wide .modal-dialog {
  37                 width: 80%;
  38         }
  39
  40         /* fix # anchors scrolling under the navbar
  41            https://github.com/twbs/bootstrap/issues/1768#issuecomment-46519033
  42          */
  43         h1 {
  44                 position: relative;
  45                 z-index: -1;
  46         }
  47         h2 {
  48                 position: relative;
  49                 z-index: -2;
  50         }
  51         h1:before, h2:before {
  52                 display: block;
  53                 content: " ";
  54                 margin-top: -70px;
  55                 height: 70px;
  56                 visibility: hidden;
  57         }
  58
  59         .p {
  60                 display: block;
  61                 margin-top: 15px;
  62         }
  63
  64         .option-row,
  65         .option-control {
  66                 vertical-align: top;
  67                 padding: 10px;
  68                 padding-top: 30px;
  69                 padding-left: 30px;
  70         }
  71
  72         .option-info {
  73                 padding: 10px;
  74         }
  75
  76         .chart-message {
  77                 display: block;
  78                 margin-top: 10px;
  79         }
  80
  81         .container {
  82                 width: 90% !important;
  83         }
  84
  85         #masthead h1 {
  86                 /*font-size: 30px;*/
  87                 line-height: 1;
  88                 padding-top: 30px;
  89         }
  90
  91         #masthead .well {
  92                 margin-top:4%;
  93         }
  94
  95         /* fix the navbar shifting when a modal is open */
  96         /* https://github.com/twbs/bootstrap/issues/14040#issuecomment-159891033 */
  97         body.modal-open{
  98                 width: 100% !important;
  99                 padding-right: 0 !important;
 100 /*              overflow-y: scroll !important; */
 101 /*              position: fixed !important;*/
 102                 overflow: visible;
 103         }
 104
 105         /*
 106          * Side navigation
 107          *
 108          * Scrollspy and affixed enhanced navigation to highlight sections and secondary
 109          * sections of docs content.
 110          */
 111
 112         .affix {
 113                 position: static;
 114                 top: 70px !important;
 115                 /*width: 220px;*/
 116         }
 117
 118         .affix-top {
 119                 /*width: 220px;*/
 120         }
 121
 122         .dashboard-sidebar {
 123                 max-height: calc(100% - 70px) !important;
 124                 overflow-y: auto;
 125                 /*width: 220px !important;*/
 126         }
 127
 128         /* By default it's not affixed in mobile views, so undo that */
 129         .dashboard-sidebar.affix {
 130                 position: static;
 131         }
 132
 133         @media (min-width: 768px) {
 134                 .dashboard-sidebar {
 135                         padding-left: 20px;
 136                 }
 137         }
 138
 139         /* First level of nav */
 140         .dashboard-sidenav {
 141                 margin-top: 20px;
 142                 margin-bottom: 20px;
 143         }
 144
 145         /* All levels of nav */
 146         .dashboard-sidebar .nav > li > a {
 147                 display: block;
 148                 padding: 4px 20px;
 149                 font-size: 13px;
 150                 font-weight: 500;
 151                 color: #767676;
 152         }
 153         .dashboard-sidebar .nav > li > a:hover,
 154         .dashboard-sidebar .nav > li > a:focus {
 155                 padding-left: 19px;
 156                 color: #563d7c;
 157                 text-decoration: none;
 158                 background-color: transparent;
 159                 border-left: 1px solid #563d7c;
 160         }
 161         .dashboard-sidebar .nav > .active > a,
 162         .dashboard-sidebar .nav > .active:hover > a,
 163         .dashboard-sidebar .nav > .active:focus > a {
 164                 padding-left: 18px;
 165                 font-weight: bold;
 166                 color: #563d7c;
 167                 background-color: transparent;
 168                 border-left: 2px solid #563d7c;
 169         }
 170
 171         /* Nav: second level (shown on .active) */
 172         .dashboard-sidebar .nav .nav {
 173                 display: none; /* Hide by default, but at >768px, show it */
 174                 padding-bottom: 10px;
 175         }
 176         .dashboard-sidebar .nav .nav > li > a {
 177                 padding-top: 1px;
 178                 padding-bottom: 1px;
 179                 padding-left: 30px;
 180                 font-size: 12px;
 181                 font-weight: normal;
 182         }
 183         .dashboard-sidebar .nav .nav > li > a:hover,
 184         .dashboard-sidebar .nav .nav > li > a:focus {
 185                 padding-left: 29px;
 186         }
 187         .dashboard-sidebar .nav .nav > .active > a,
 188         .dashboard-sidebar .nav .nav > .active:hover > a,
 189         .dashboard-sidebar .nav .nav > .active:focus > a {
 190                 padding-left: 28px;
 191                 font-weight: 500;
 192         }
 193
 194         .dropdown-menu {
 195                 min-width: 200px;
 196         }
 197         .dropdown-menu.columns-2 {
 198                 margin: 0;
 199                 padding: 0;
 200                 width: 400px;
 201         }
 202         .dropdown-menu li a {
 203                 padding: 5px 15px;
 204                 font-weight: 300;
 205         }
 206         .dropdown-menu.multi-column {
 207                 overflow-x: hidden;
 208         }
 209         .multi-column-dropdown {
 210                 list-style: none;
 211                 padding: 0;
 212         }
 213         .multi-column-dropdown li a {
 214                 display: block;
 215                 clear: both;
 216                 line-height: 1.428571429;
 217                 white-space: normal;
 218         }
 219         .multi-column-dropdown li a:hover {
 220                 text-decoration: none;
 221                 color: #f5f5f5;
 222                 background-color: #262626;
 223         }
 224
 225         /* Back to top (hidden on mobile) */
 226         .back-to-top,
 227         .dashboard-theme-toggle {
 228                 display: none;
 229                 padding: 4px 10px;
 230                 margin-top: 10px;
 231                 margin-left: 10px;
 232                 font-size: 12px;
 233                 font-weight: 500;
 234                 color: #999;
 235         }
 236         .back-to-top:hover,
 237         .dashboard-theme-toggle:hover {
 238                 color: #563d7c;
 239                 text-decoration: none;
 240         }
 241         .dashboard-theme-toggle {
 242                 margin-top: 0;
 243         }
 244
 245         @media (min-width: 768px) {
 246                 .back-to-top,
 247                 .dashboard-theme-toggle {
 248                         display: block;
 249                 }
 250
 251                 /* Widen the fixed sidebar */
 252                 .dashboard-sidebar.affix,
 253                 .dashboard-sidebar.affix-top,
 254                 .dashboard-sidebar.affix-bottom {
 255                         width: 200px !important;
 256                 }
 257
 258                 .dashboard-sidebar.affix {
 259                         position: fixed; /* Undo the static from mobile first approach */
 260                         top: 20px;
 261                 }
 262
 263                 .dashboard-sidebar.affix-bottom {
 264                         position: absolute; /* Undo the static from mobile first approach */
 265                 }
 266
 267                 .dashboard-sidebar.affix-bottom .dashboard-sidenav,
 268                 .dashboard-sidebar.affix .dashboard-sidenav {
 269                         margin-top: 0;
 270                         margin-bottom: 0;
 271                 }
 272         }
 273
 274         /* Show and affix the side nav when space allows it */
 275         @media (min-width: 992px) {
 276                 .dashboard-sidebar .nav > .active > ul {
 277                         display: block;
 278                 }
 279
 280                 /* Widen the fixed sidebar */
 281                 .dashboard-sidebar.affix,
 282                 .dashboard-sidebar.affix-top,
 283                 .dashboard-sidebar.affix-bottom {
 284                         width: 200px !important;
 285                 }
 286                 .dashboard-sidebar.affix {
 287                         position: fixed; /* Undo the static from mobile first approach */
 288                         top: 20px;
 289                 }
 290                 .dashboard-sidebar.affix-bottom {
 291                         position: absolute; /* Undo the static from mobile first approach */
 292                 }
 293                 .dashboard-sidebar.affix-bottom .dashboard-sidenav,
 294                 .dashboard-sidebar.affix .dashboard-sidenav {
 295                         margin-top: 0;
 296                         margin-bottom: 0;
 297                 }
 298         }
 299
 300         @media (min-width: 1200px) {
 301                 /* Widen the fixed sidebar again */
 302                 .dashboard-sidebar.affix-bottom,
 303                 .dashboard-sidebar.affix-top,
 304                 .dashboard-sidebar.affix {
 305                         width: 263px;
 306                 }
 307         }
 308         </style>
 309
 310         <!-- you can set your netdata server globally, by ucommenting this -->
 311         <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
 312         <!-- <script> netdataServer = "http://box:19999"; </script> -->
 313
 314         <!-- check which theme to use -->
 315         <script>
 316                 function loadLocalStorage(name) {
 317                         var ret = null;
 318
 319                         try {
 320                                 if(typeof Storage !== "undefined" && typeof localStorage === 'object')
 321                                         ret = localStorage.getItem(name);
 322                         }
 323                         catch(error) {
 324                                 ;
 325                         }
 326
 327                         if(typeof ret === 'undefined' || ret === null)
 328                                 return null;
 329
 330                         return ret;
 331                 }
 332
 333                 function saveLocalStorage(name, value) {
 334                         try {
 335                                 if(typeof Storage !== "undefined" && typeof localStorage === 'object') {
 336                                         localStorage.setItem(name, value.toString());
 337                                         return true;
 338                                 }
 339                         }
 340                         catch(error) {
 341                                 ;
 342                         }
 343
 344                         return false;
 345                 }
 346
 347                 function getTheme(def) {
 348                         var ret = loadLocalStorage('netdataTheme');
 349                         if(typeof ret === 'undefined' || ret === null || ret === 'undefined')
 350                                 return def;
 351                         else
 352                                 return ret;
 353                 }
 354
 355                 var netdataTheme = getTheme('slate');
 356
 357                 function setTheme(theme) {
 358                         if(theme === netdataTheme) return false;
 359
 360                         return saveLocalStorage('netdataTheme', theme);
 361                 }
 362
 363                 var netdataRegistryCallback = function(urls) {
 364                         var el = '';
 365                         var a1 = '';
 366                         var found = 0;
 367
 368                         if(urls) {
 369                                 $.each(urls, function(i, u) {
 370                                         if(u.guid !== NETDATA.registry.machine_guid) {
 371                                                 found++;
 372                                                 el += '<li id="registry_server_' + u.guid + '"><a href="' + u.url + '">' + u.name + '</a></li>';
 373                                                 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>';
 374                                         }
 375                                 });
 376                         }
 377
 378                         if(!found) {
 379                                 if(urls)
 380                                         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>';
 381                                 else
 382                                         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>';
 383
 384                                 a1 += '<li><a href="#">&nbsp;</a></li>';
 385
 386                                 el += '<li role="separator" class="divider"></li>' +
 387                                                 '<li><a href="//london.netdata.rocks/default.html">EU - London (DigitalOcean.com)</a></li>' +
 388                                                 '<li><a href="//atlanta.netdata.rocks/default.html">US - Atlanta (CDN77.com)</a></li>' +
 389                                                 '<li><a href="//athens.netdata.rocks/default.html">EU - Athens</a></li>';
 390                                 a1 += '<li role="separator" class="divider"></li>' +
 391                                                 '<li><a href="#">&nbsp;</a></li>' +
 392                                                 '<li><a href="#">&nbsp;</a></li>'+
 393                                                 '<li><a href="#">&nbsp;</a></li>';
 394                         }
 395
 396                         el += '<li role="separator" class="divider"></li>';
 397                         a1 += '<li role="separator" class="divider"></li>';
 398
 399                         el += '<li><a href="https://github.com/firehol/netdata/wiki/mynetdata-menu-item" style="color: #999;" target="_blank">What is this?</a></li>';
 400                         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>'
 401
 402                         document.getElementById('mynetdata_servers').innerHTML = el;
 403                         document.getElementById('mynetdata_actions1').innerHTML = a1;
 404
 405                         document.getElementById('mynetdata_servers2').innerHTML = el;
 406                 };
 407
 408         </script>
 409
 410         <!-- load the dashboard manager - it will do the rest -->
 411         <script type="text/javascript" src="dashboard.js?v35"></script>
 412 </head>
 413
 414 <body data-spy="scroll" data-target="#sidebar">
 415         <nav class="navbar navbar-default navbar-fixed-top" role="banner">
 416                 <div class="container">
 417                         <nav id="mynetdata_nav" class="collapse navbar-collapse navbar-left hidden-sm hidden-xs" role="navigation" style="padding-right: 20px;">
 418                                 <ul class="nav navbar-nav">
 419                                         <li class="dropdown">
 420                                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">my-netdata <strong class="caret"></strong></a>
 421                                                 <ul class="dropdown-menu scrollable-menu inpagemenu multi-column columns-2" role="menu">
 422                                                         <div class="row">
 423                                                                 <div class="col-sm-6" style="width: 85%; padding-right: 0;">
 424                                                                         <ul id="mynetdata_servers" class="multi-column-dropdown">
 425                                                                         </ul>
 426                                                                 </div>
 427                                                                 <div class="col-sm-3 hidden-xs" style="width: 15%; padding-left: 0;">
 428                                                                         <ul id="mynetdata_actions1" class="multi-column-dropdown">
 429                                                                         </ul>
 430                                                                 </div>
 431                                                         </div>
 432                                                 </ul>
 433                                         </li>
 434                                 </ul>
 435                         </nav>
 436                         <div class="navbar-header">
 437                                 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
 438                                         <span class="sr-only">Toggle navigation</span>
 439                                         <span class="icon-bar"></span>
 440                                         <span class="icon-bar"></span>
 441                                         <span class="icon-bar"></span>
 442                                 </button>
 443                                 <a href="/" class="navbar-brand" id="hostname">netdata</a>
 444                         </div>
 445                         <nav class="collapse navbar-collapse navbar-right" role="navigation">
 446                                 <ul class="nav navbar-nav">
 447                                         <li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-cog"></i> settings</a></li>
 448                                         <li class="hidden-sm"><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
 449                                         <li class="hidden-sm" id="updateButton"><a href="#" class="btn" data-toggle="modal" data-target="#updateModal"><i class="fa fa-cloud-download"></i> update</a></li>
 450                                         <li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> help</a></li>
 451                                         <li class="dropdown hidden-md hidden-lg hidden-xs">
 452                                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">Menu <strong class="caret"></strong></a>
 453                                                 <ul class="dropdown-menu scrollable-menu inpagemenu" role="menu">
 454                                                         <li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-cog"></i> settings</a></li>
 455                                                         <li><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
 456                                                         <li><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> help</a></li>
 457                                                 </ul>
 458                                         </li>
 459                                         <li class="dropdown hidden-sm hidden-md hidden-lg">
 460                                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">my-netdata <strong class="caret"></strong></a>
 461                                                 <ul id="mynetdata_servers2" class="dropdown-menu scrollable-menu inpagemenu" role="menu">
 462                                                 </ul>
 463                                         </li>
 464                                 </ul>
 465                         </nav>
 466         </nav>
 467                 </div>
 468         </nav>
 469
 470         <div id="masthead" style="display: none;">
 471                 <div class="container">
 472                         <div class="row">
 473                                 <div class="col-md-7">
 474                                         <h1>Netdata
 475                                                 <p class="lead">Real-time performance monitoring, in the greatest possible detail</p>
 476                                         </h1>
 477                                 </div>
 478                                 <div class="col-md-5">
 479                                         <div class="well well-lg">
 480                                                 <div class="row">
 481                                                 <div class="col-md-6">
 482                                                         <b>Drag</b> charts to pan.
 483                                                         <b>Shift + wheel</b> on them, to zoom in and out.
 484                                                         <b>Double-click</b> on them, to reset.
 485                                                         <b>Hover</b> on them too!
 486                                                         </div>
 487                                                 <div class="col-md-6">
 488                                                         <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>
 489                                                         </div>
 490                                                 </div>
 491                                         </div>
 492                                 </div>
 493                         </div>
 494                 </div>
 495         </div>
 496
 497         <div class="container">
 498                 <div class="row">
 499                         <div class="col-md-10" role="main">
 500                                 <div id="charts_div"></div>
 501                         </div>
 502                         <div class="col-md-2" role="complementary">
 503                                 <nav class="dashboard-sidebar hidden-print hidden-xs hidden-sm" id="sidebar" role="menu"></nav>
 504                         </div>
 505                 </div>
 506         </div>
 507
 508         <div id="footer" class="container" style="display: none;">
 509                 <div class="row">
 510                         <div class="col-md-10" role="main">
 511                                 <div class="p">
 512                                         <big><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></big><br/>
 513                                         <i class="fa fa-copyright"></i> Copyright 2016, Costa Tsaousis.<br/>
 514                                         Released under <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GPL v3 or later</a>.<br/>
 515                                 </div>
 516                                 <div class="p">
 517                                         <small>
 518                                                 <a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a> re-distributes these software tools:
 519
 520                                                 <i class="fa fa-circle"></i> The excellent <a href="http://dygraphs.com/" target="_blank">Dygraphs.com</a> web chart library,
 521                                                 <i class="fa fa-copyright"></i> Copyright 2009, Dan Vanderkam, <a href="http://dygraphs.com/legal.html" target="_blank">MIT License</a>
 522
 523                                                 <i class="fa fa-circle"></i> <a href="http://omnipotent.net/jquery.sparkline/" target="_blank">jQuery Sparklines</a> web chart library,
 524                                                 <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>
 525
 526                                                 <i class="fa fa-circle"></i> <a href="http://benpickles.github.io/peity/" target="_blank">Peity</a> web chart library,
 527                                                 <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>
 528
 529                                                 <i class="fa fa-circle"></i> <a href="https://rendro.github.io/easy-pie-chart/" target="_blank">Easy Pie Chart</a> web chart library,
 530                                                 <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>
 531
 532                                                 <i class="fa fa-circle"></i> <a href="http://bernii.github.io/gauge.js/" target="_blank">Gauge.js</a> web chart library,
 533                                                 <i class="fa fa-copyright"></i> Copyright, Bernard Kobos, <a href="http://bernii.github.io/gauge.js/" target="_blank">MIT License</a>
 534
 535                                                 <i class="fa fa-circle"></i> <a href="https://jquery.org/" target="_blank">jQuery</a>,
 536                                                 <i class="fa fa-copyright"></i> Copyright 2015, jQuery Foundation, <a href="https://jquery.org/license/" target="_blank">MIT License</a>
 537
 538                                                 <i class="fa fa-circle"></i> <a href="http://getbootstrap.com/getting-started/" target="_blank">Bootstrap</a>,
 539                                                 <i class="fa fa-copyright"></i> Copyright 2015, Twitter, <a href="http://getbootstrap.com/getting-started/#license-faqs" target="_blank">MIT License</a>
 540
 541                                                 <i class="fa fa-circle"></i> <a href="http://www.bootstraptoggle.com/" target="_blank">Bootstrap Toggle</a>,
 542                                                 <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>
 543
 544                                                 <i class="fa fa-circle"></i> <a href="https://jamesflorentino.github.io/nanoScrollerJS/" target="_blank">NanoScroller</a>,
 545                                                 <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>
 546
 547                                                 <i class="fa fa-circle"></i> <a href="https://github.com/marcj/css-element-queries" target="_blank">CSS Element Queries</a>,
 548                                                 <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>
 549
 550                                                 <i class="fa fa-circle"></i> <a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">FontAwesome</a>,
 551                                                 <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>
 552
 553                                                 <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.
 554
 555                                                 <i class="fa fa-circle"></i> <a href="http://morrisjs.github.io/morris.js/" target="_blank">morris.js</a>,
 556                                                 <i class="fa fa-copyright"></i> Copyright 2013, Olly Smith, <a href="http://morrisjs.github.io/morris.js/" target="_blank">Simplified BSD License</a>
 557
 558                                                 <i class="fa fa-circle"></i> <a href="http://raphaeljs.com/" target="_blank">Raphaël</a>,
 559                                                 <i class="fa fa-copyright"></i> Copyright 2008, Dmitry Baranovskiy, <a href="http://raphaeljs.com/license.html" target="_blank">MIT License</a>
 560
 561                                                 <i class="fa fa-circle"></i> <a href="http://C3js.org/" target="_blank">C3</a>,
 562                                                 <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>
 563
 564                                                 <i class="fa fa-circle"></i> <a href="http://D3js.org/" target="_blank">D3</a>,
 565                                                 <i class="fa fa-copyright"></i> Copyright 2015, Mike Bostock, <a href="http://opensource.org/licenses/BSD-3-Clause" target="_blank">BSD License</a>
 566
 567                                         </small>
 568                                 </div>
 569                         </div>
 570                 </div>
 571         </div>
 572
 573         <div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="welcomeModalLabel">
 574                 <div class="modal-dialog modal-lg" role="document">
 575                         <div class="modal-content">
 576                                 <div class="modal-header">
 577                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 578                                         <h4 class="modal-title" id="welcomeModalLabel">Welcome!</h4>
 579                                 </div>
 580                                 <div class="modal-body">
 581                                                 <div class="p">
 582                                                 <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.
 583                                                 </div>
 584                                                 <div class="p">
 585                                                 <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.
 586                                                 </div>
 587                                                 <div class="p">
 588                                                 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.
 589                                                 </div>
 590                                                 <div class="p">
 591                                                 <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>%),
 592                                                 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).
 593                                                 </div>
 594                                                 <div class="p">
 595                                                 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>!).
 596                                                 </div>
 597                                                 <div class="p">
 598                                                 For more information please refer to the <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata wiki</a></b>.
 599                                                 </div>
 600                                 </div>
 601                                 <div class="modal-footer">
 602                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 603                                 </div>
 604                         </div>
 605                 </div>
 606         </div>
 607
 608         <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel">
 609                 <div class="modal-dialog modal-lg" role="document">
 610                         <div class="modal-content">
 611                                 <div class="modal-header">
 612                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 613                                         <h4 class="modal-title" id="helpModalLabel">Dashboard Help</h4>
 614                                 </div>
 615                                 <div class="modal-body">
 616
 617                                         <h4>Dygraphs (line, area and stacked area charts)</h4>
 618
 619                                         <!-- Nav tabs -->
 620                                         <ul class="nav nav-tabs" role="tablist">
 621                                                 <li role="presentation" class="active"><a href="#help_mouse" aria-controls="help_mouse" role="tab" data-toggle="tab">Mouse Interface</a></li>
 622                                                 <li role="presentation"><a href="#help_touch" aria-controls="help_touch" role="tab" data-toggle="tab">Touch Interface</a></li>
 623                                         </ul>
 624
 625                                         <!-- Tab panes -->
 626                                         <div class="tab-content">
 627                                                 <div role="tabpanel" class="tab-pane active" id="help_mouse">
 628                                                         <div class="p">
 629                                                                 <h4>Mouse Over / Hover</h4>
 630                                                                 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).
 631                                                                 <br/>
 632                                                                 All the other visible charts will also show and highlight their values for the same timestamp.
 633                                                         </div>
 634                                                         <hr/>
 635                                                         <div class="p">
 636                                                                 <h4>Drag Chart Contents</h4>
 637                                                                 Drag the contents of a chart to pan it horizontally.
 638                                                                 <br/>
 639                                                                 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).
 640                                                                 <br/>
 641                                                                 Once a chart is panned, auto refreshing stops for all charts. To enable it again, <b>double click</b> a panned chart.
 642                                                         </div>
 643                                                         <hr/>
 644                                                         <div class="p">
 645                                                                 <h4>Double Click</h4>
 646                                                                 Double Click a chart to reset all the charts to their default auto-refreshing state.
 647                                                         </div>
 648                                                         <hr/>
 649                                                         <div class="p">
 650                                                                 <h4>SHIFT + Drag</h4>
 651                                                                 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:
 652                                                                 <ul>
 653                                                                         <li>The already loaded chart contents are zoomed (low resolution)</li>
 654                                                                         <li>New data are transferred from the netdata server, to refresh the chart with possibly more detail.</li>
 655                                                                 </ul>
 656                                                                 Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, <b>double click</b> a zoomed chart.
 657                                                         </div>
 658                                                         <hr/>
 659                                                         <div class="p">
 660                                                                 <h4>SHIFT + Mouse Wheel <small>(does not work on firefox and IE/Edge)</small></h4>
 661                                                                 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.
 662                                                                 <br/>
 663                                                                 Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, <b>double click</b> a zoomed chart.
 664                                                         </div>
 665                                                         <hr/>
 666                                                         <div class="p">
 667                                                                 <h4>Legend Operations</h4>
 668                                                                 Click on the label or value of a dimension, will select / un-select this dimension.
 669                                                                 <br/>
 670                                                                 You can press any of the SHIFT or CONTROL keys and then click on legend labels or values, to select / un-select multiple dimensions.
 671                                                         </div>
 672                                                 </div>
 673                                                 <div role="tabpanel" class="tab-pane" id="help_touch">
 674                                                         <div class="p">
 675                                                                 <h4>Single Tap</h4>
 676                                                                 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).
 677                                                                 <br/>
 678                                                                 All the other visible charts will also show and highlight their values for the same timestamp.
 679                                                         </div>
 680                                                         <hr/>
 681                                                         <div class="p">
 682                                                                 <h4>Drag Chart Contents</h4>
 683                                                                 Touch and Drag the contents of a chart to pan it horizontally.
 684                                                                 <br/>
 685                                                                 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).
 686                                                                 <br/>
 687                                                                 Once a chart is panned, auto refreshing stops for all charts. To enable it again, <b>double tap</b> a panned chart.
 688                                                         </div>
 689                                                         <hr/>
 690                                                         <div class="p">
 691                                                                 <h4>Double Tap</h4>
 692                                                                 Double tap a chart to reset all the charts to their default auto-refreshing state.
 693                                                         </div>
 694                                                         <hr/>
 695                                                         <div class="p">
 696                                                                 <h4>Zoom <small>(does not work on firefox and IE/Edge)</small></h4>
 697                                                                 With two fingers, zoom in or out.
 698                                                                 <br/>
 699                                                                 Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, <b>double click</b> a zoomed chart.
 700                                                         </div>
 701                                                         <hr/>
 702                                                         <div class="p">
 703                                                                 <h4>Legend Operations</h4>
 704                                                                 Tap on the label or value of a dimension, will select / un-select this dimension.
 705                                                         </div>
 706                                                 </div>
 707                                         </div>
 708                                 </div>
 709                                 <div class="modal-footer">
 710                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 711                                 </div>
 712                         </div>
 713                 </div>
 714         </div>
 715
 716         <div class="modal fade" id="optionsModal" tabindex="-1" role="dialog" aria-labelledby="optionsModalLabel">
 717                 <div class="modal-dialog modal-lg" role="document">
 718                         <div class="modal-content">
 719                                 <div class="modal-header">
 720                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 721                                         <h4 class="modal-title" id="optionsModalLabel">netdata dashboard options</h4>
 722                                 </div>
 723                                 <div class="modal-body">
 724                                         <center>
 725                                                 <small style="color: #BBBBBB;">These are browser settings. Each viewer has its own. They do not affect the operation of your netdata server.
 726                                                 <br/>
 727                                                 Settings take effect immediately and are saved permanently to browser local storage (except the refresh on focus / always option).
 728                                                 <br/>
 729                                                 To reset all options (including charts sizes) to their defaults, click <a href="#" onclick="resetDashboardOptions(); return false;">here</a>.</small>
 730                                         </center>
 731                                         <div style="padding: 10px;"></div>
 732
 733                                         <!-- Nav tabs -->
 734                                         <ul class="nav nav-tabs" role="tablist">
 735                                                 <li role="presentation" class="active"><a href="#settings_performance" aria-controls="settings_performance" role="tab" data-toggle="tab">Performance</a></li>
 736                                                 <li role="presentation"><a href="#settings_sync" aria-controls="settings_sync" role="tab" data-toggle="tab">Synchronization</a></li>
 737                                                 <li role="presentation"><a href="#settings_visual" aria-controls="settings_visual" role="tab" data-toggle="tab">Visual</a></li>
 738                                         </ul>
 739
 740                                         <!-- Tab panes -->
 741                                         <div class="tab-content">
 742                                                 <div role="tabpanel" class="tab-pane active" id="settings_performance">
 743                                                         <form id="optionsForm1" method="get" class="form-horizontal">
 744                                                                 <div class="form-group">
 745                                                                         <table>
 746                                                                         <tr class="option-row">
 747                                                                                 <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>
 748                                                                                 <td class="option-info"><strong>When to refresh the charts?</strong><br/>
 749                                                                                         <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>
 750                                                                                 </td>
 751                                                                                 </tr>
 752                                                                         <tr class="option-row">
 753                                                                                 <td class="option-control">
 754                                                                                 <input id="eliminate_zero_dimensions" type="checkbox" checked data-toggle="toggle" data-on="Non Zero" data-off="All" data-width="110px">
 755                                                                                 </td>
 756                                                                                 <td class="option-info"><strong>Which dimensions to show?</strong><br/>
 757                                                                                         <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>
 758                                                                                 </td>
 759                                                                                 </tr>
 760                                                                         <tr class="option-row">
 761                                                                                 <td class="option-control"><input id="destroy_on_hide" type="checkbox" data-toggle="toggle" data-on="Destroy" data-off="Hide" data-width="110px"></td>
 762                                                                                 <td class="option-info"><strong>How to handle hidden charts?</strong><br/>
 763                                                                                         <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>
 764                                                                                 </td>
 765                                                                                 </tr>
 766                                                                         </table>
 767                                                                 </div>
 768                                                         </form>
 769                                                 </div>
 770                                                 <div role="tabpanel" class="tab-pane" id="settings_sync">
 771                                                         <form id="optionsForm2" method="get" class="form-horizontal">
 772                                                                 <div class="form-group">
 773                                                                         <table>
 774                                                                         <tr class="option-row">
 775                                                                                 <td class="option-control"><input id="parallel_refresher" type="checkbox" checked data-toggle="toggle" data-on="Parallel" data-off="Sequential" data-width="110px"></td>
 776                                                                                 <td class="option-info"><strong>Which chart refresh policy to use?</strong><br/>
 777                                                                                         <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>
 778                                                                                 </td>
 779                                                                                 </tr>
 780                                                                         <tr class="option-row" id="concurrent_refreshes_row">
 781                                                                                 <td class="option-control"></td>
 782                                                                                 <td class="option-info">
 783                                                                                         <table>
 784                                                                                         <tr class="option-row">
 785                                                                                         <td class="option-control">
 786                                                                                         <input id="concurrent_refreshes" type="checkbox" checked data-toggle="toggle" data-on="Resync" data-off="Best Effort" data-width="110px">
 787                                                                                         </td>
 788                                                                                         <td class="option-info">
 789                                                                                         <strong>Shall we re-sync chart refreshes?</strong><br/>
 790                                                                                         <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>
 791                                                                                         </td>
 792                                                                                         </tr>
 793                                                                                         </table>
 794                                                                                 </td>
 795                                                                                 </tr>
 796                                                                         <tr class="option-row">
 797                                                                                 <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>
 798                                                                                 <td class="option-info"><strong>Sync hover selection on all charts?</strong><br/>
 799                                                                                         <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>
 800                                                                                 </td>
 801                                                                                 </tr>
 802                                                                         <tr class="option-row">
 803                                                                                 <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>
 804                                                                                 <td class="option-info"><strong>Sync pan and zoom on all charts?</strong><br/>
 805                                                                                         <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>
 806                                                                                 </td>
 807                                                                                 </tr>
 808                                                                         </table>
 809                                                                 </div>
 810                                                         </form>
 811                                                 </div>
 812                                                 <div role="tabpanel" class="tab-pane" id="settings_visual">
 813                                                         <form id="optionsForm3" method="get" class="form-horizontal">
 814                                                                 <div class="form-group">
 815                                                                         <table>
 816                                                                         <tr class="option-row">
 817                                                                                 <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>
 818                                                                                 <td class="option-info"><strong>Which theme to use?</strong><br/>
 819                                                                                         <small>Netdata comes with two themes: <b>Dark</b> (the default) and <b>White</b>.
 820                                                                                         <br/>
 821                                                                                         <b>Switching this will reload the dashboard</b>.
 822                                                                                         </small>
 823                                                                                 </td>
 824                                                                                 </tr>
 825                                                                         <tr class="option-row">
 826                                                                                 <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>
 827                                                                                 <td class="option-info"><strong>Do you need help?</strong><br/>
 828                                                                                         <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.
 829                                                                                         <br/>
 830                                                                                         <b>Switching this will reload the dashboard</b>.
 831                                                                                         </small>
 832                                                                                 </td>
 833                                                                                 </tr>
 834                                                                         <tr class="option-row">
 835                                                                                 <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>
 836                                                                                 <td class="option-info"><strong>Enable data padding when panning and zooming?</strong><br/>
 837                                                                                         <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>
 838                                                                                 </td>
 839                                                                                 </tr>
 840                                                                         <tr class="option-row">
 841                                                                                 <td class="option-control"><input id="smooth_plot" type="checkbox" checked data-toggle="toggle"  data-on="Smooth" data-off="Rough" data-width="110px"></td>
 842                                                                                 <td class="option-info"><strong>Enable Bézier lines on charts?</strong><br/>
 843                                                                                         <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.
 844                                                                                         <br/>
 845                                                                                         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>
 846                                                                                 </td>
 847                                                                                 </tr>
 848                                                                         </table>
 849                                                                 </div>
 850                                                         </form>
 851                                                 </div>
 852                                         </div>
 853                                 </div>
 854                                 <div class="modal-footer">
 855                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 856                                 </div>
 857                         </div>
 858                 </div>
 859         </div>
 860
 861
 862         <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
 863                 <div class="modal-dialog" role="document">
 864                         <div class="modal-content">
 865                                 <div class="modal-header">
 866                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 867                                         <h4 class="modal-title" id="updateModalLabel">Update Check</h4>
 868                                 </div>
 869                                 <div class="modal-body">
 870                                         Your netdata version: <b><code><span id="netdataVersion">Unknown</span></code></b>
 871                                         <br/>
 872                                         <div style="padding: 10px;"></div>
 873                                         <div id="versionCheckLog">Not checked yet. Please press the Check Now button.</div>
 874                                 </div>
 875                                 <div class="modal-footer">
 876                                         <a href="#" onclick="notifyForUpdate(true);" type="button" class="btn btn-default">Check Now</a>
 877                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 878                                 </div>
 879                         </div>
 880                 </div>
 881         </div>
 882
 883         <div class="modal fade" id="deleteRegistryModal" tabindex="-1" role="dialog" aria-labelledby="deleteRegistryModalLabel">
 884                 <div class="modal-dialog" role="document">
 885                         <div class="modal-content">
 886                                 <div class="modal-header">
 887                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 888                                         <h4 class="modal-title" id="deleteRegistryModalLabel">Delete <span id="deleteRegistryServerName"></span>?</h4>
 889                                 </div>
 890                                 <div class="modal-body">
 891                                         You are about to delete, from your personal list of netdata servers, the following server:
 892                                         <p style="text-align: center; padding-top: 10px; padding-bottom: 10px; line-height: 2;">
 893                                         <b><span id="deleteRegistryServerName2"></span></b>
 894                                         <br/>
 895                                         <b><span id="deleteRegistryServerURL"></span></b>
 896                                         </p>
 897                                         Are you sure you want to do this?
 898                                         <br/>
 899                                         <div style="padding: 10px;"></div>
 900                                         <small>Keep in mind, this server will be added back if and when you visit it again.</small>
 901                                         <br/>
 902                                         <div id="deleteRegistryResponse" style="display: block; width: 100%; text-align: center; padding-top: 20px; color: #fff;"></div>
 903                                 </div>
 904                                 <div class="modal-footer">
 905                                         <button type="button" class="btn btn-success" data-dismiss="modal">keep it</button>
 906                                         <a href="#" onclick="notifyForDeleteRegistry(true);" type="button" class="btn btn-danger">delete it</a>
 907                                 </div>
 908                         </div>
 909                 </div>
 910         </div>
 911
 912         <div class="modal fade" id="switchRegistryModal" tabindex="-1" role="dialog" aria-labelledby="switchRegistryModalLabel">
 913                 <div class="modal-dialog" role="document">
 914                         <div class="modal-content">
 915                                 <div class="modal-header">
 916                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 917                                         <h4 class="modal-title" id="switchRegistryModalLabel">Switch Netdata Registry Identity</h4>
 918                                 </div>
 919                                 <div class="modal-body">
 920                                         You can copy and paste the following ID to all your browsers (e.g. work and home).
 921                                         <br/>
 922                                         All the browsers with the same ID will identify <b>you</b>, so please don't share this with others.
 923                                         <p style="text-align: center; padding-top: 10px; padding-bottom: 10px; line-height: 2;">
 924                                         <form action="#">
 925                                         <input type="text" class="form-control" id="switchRegistryPersonGUID" placeholder="your personal ID" maxlength="36" autocomplete="off" style="text-align: center; font-size: 1.4em;">
 926                                         </form>
 927                                         </p>
 928                                         Either copy this ID and paste it to another browser, or paste here the ID you have taken from another browser.
 929                                         <p style="padding-top: 10px;"><small>
 930                                                 Keep in mind that:
 931                                                 <ul>
 932                                                         <li>when you switch ID, your previous ID will be lost forever - this is irreversible.</li>
 933                                                         <li>both IDs (your old and the new) must list this netdata at their personal lists.</li>
 934                                                         <li>both IDs have to be known by the registry: <b><span id="switchRegistryURL"></span></b>.</li>
 935                                                         <li>to get a new ID, just clear your browser cookies.</li>
 936                                                 </ul>
 937                                         </small></p>
 938                                         <div id="switchRegistryResponse" style="display: block; width: 100%; text-align: center; padding-top: 20px; color: #fff;"></div>
 939                                 </div>
 940                                 <div class="modal-footer">
 941                                         <button type="button" class="btn btn-success" data-dismiss="modal">cancel</button>
 942                                         <a href="#" onclick="notifyForSwitchRegistry(true);" type="button" class="btn btn-danger">impersonate</a>
 943                                 </div>
 944                         </div>
 945                 </div>
 946         </div>
 947
 948 <script>
 949 var this_is_demo = null;
 950 function isdemo() {
 951         if(this_is_demo !== null) return this_is_demo;
 952         this_is_demo = false;
 953
 954         try {
 955                 if(typeof document.location.hostname === 'string') {
 956                         if(document.location.hostname.endsWith('.my-netdata.io') ||
 957                                         document.location.hostname.endsWith('.mynetdata.io') ||
 958                                         document.location.hostname.endsWith('.netdata.rocks') ||
 959                                         document.location.hostname.endsWith('.firehol.org') ||
 960                                         document.location.hostname.endsWith('.netdata.online'))
 961                                         this_is_demo = true;
 962                 }
 963         }
 964         catch(error) {
 965                 ;
 966         }
 967
 968         return this_is_demo;
 969 }
 970
 971 if(isdemo()) {
 972         document.getElementById('masthead').style.display = 'block';
 973 }
 974
 975 function switchRegistryModalHandler() {
 976         document.getElementById('switchRegistryPersonGUID').value = NETDATA.registry.person_guid;
 977         document.getElementById('switchRegistryURL').innerHTML = NETDATA.registry.server;
 978         $('#switchRegistryModal').modal('show');
 979 }
 980
 981 function notifyForSwitchRegistry() {
 982         var n = document.getElementById('switchRegistryPersonGUID').value;
 983
 984         if(n !== '' && n.length === 36) {
 985                 NETDATA.registry.switch(n, function(result) {
 986                         if(result !== null) {
 987                                 $('#switchRegistryModal').modal('hide');
 988                                 NETDATA.registry.init();
 989                         }
 990                         else {
 991                                 document.getElementById('switchRegistryResponse').innerHTML = "<b>Sorry! The registry rejected your request.</b>";
 992                         }
 993                 });
 994         }
 995         else
 996                 document.getElementById('switchRegistryResponse').innerHTML = "<b>The ID you have entered is not a GUID.</b>";
 997 }
 998
 999 var deleteRegistryUrl = null;
1000 function deleteRegistryModalHandler(guid, name, url) {
1001         deleteRegistryUrl = url;
1002         document.getElementById('deleteRegistryServerName').innerHTML = name;
1003         document.getElementById('deleteRegistryServerName2').innerHTML = name;
1004         document.getElementById('deleteRegistryServerURL').innerHTML = url;
1005         $('#deleteRegistryModal').modal('show');
1006 }
1007
1008 function notifyForDeleteRegistry() {
1009         if(deleteRegistryUrl) {
1010                 NETDATA.registry.delete(deleteRegistryUrl, function(result) {
1011                         if(result !== null) {
1012                                 deleteRegistryUrl = null;
1013                                 $('#deleteRegistryModal').modal('hide');
1014                                 NETDATA.registry.init();
1015                         }
1016                         else {
1017                                 document.getElementById('deleteRegistryResponse').innerHTML = "<b>Sorry! this command was rejected by the registry server.</b>";
1018                         }
1019                 });
1020         }
1021 }
1022
1023 var options = {
1024         sparklines_registry: {},
1025         submenu_names: {},
1026         data: null,
1027         hostname: 'netdata_server', // will be overwritten by the netdata server
1028         categories: new Array(),
1029         categories_idx: {},
1030         families: new Array(),
1031         families_idx: {},
1032
1033         chartsPerRow: 0,
1034         chartsMinWidth: 1450,
1035         chartsHeight: 180,
1036         sparklinesHeight: 60
1037 };
1038
1039 // generate a sparkline
1040 // used in the documentation
1041 function sparkline(chart, dimension, units) {
1042         var key = chart + '.' + dimension;
1043
1044         if(typeof units === 'undefined')
1045                 units = '';
1046
1047         if(typeof options.sparklines_registry[key] === 'undefined')
1048                 options.sparklines_registry[key] = { count: 1 };
1049         else
1050                 options.sparklines_registry[key].count++;
1051
1052         key = key + '.' + options.sparklines_registry[key].count;
1053
1054         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 + ')';
1055
1056         return h;
1057 }
1058
1059 function chartsPerRow(total) {
1060         if(options.chartsPerRow === 0) {
1061                 width = Math.floor(total / options.chartsMinWidth);
1062                 if(width === 0) width = 1;
1063                 return width;
1064         }
1065         else return options.chartsPerRow;
1066 }
1067
1068 function prioritySort(a, b) {
1069         if(a.priority < b.priority) return -1;
1070         if(a.priority > b.priority) return 1;
1071         if(a.name < b.name) return -1;
1072         return 1;
1073 }
1074
1075 function sortObjectByPriority(object) {
1076         var idx = {};
1077         var sorted = new Array();
1078
1079         for(var i in object) {
1080                 if(typeof idx[i] === 'undefined') {
1081                         idx[i] = object[i];
1082                         sorted.push(i);
1083                 }
1084         }
1085
1086         sorted.sort(function(a, b) {
1087                 if(idx[a].priority < idx[b].priority) return -1;
1088                 if(idx[a].priority > idx[b].priority) return 1;
1089                 if(a < b) return -1;
1090                 return 1;
1091         });
1092
1093         return sorted;
1094 }
1095
1096 // ----------------------------------------------------------------------------
1097
1098 function gaugeChart(title, width, dimensions, colors) {
1099         if(typeof colors === 'undefined')
1100                 colors = '';
1101
1102         if(typeof dimensions === 'undefined')
1103                 dimensions = '';
1104
1105         return '<div data-netdata="CHART_UNIQUE_ID"'
1106                                                         + ' data-dimensions="' + dimensions + '"'
1107                                                         + ' data-chart-library="gauge"'
1108                                                         + ' data-gauge-adjust="width"'
1109                                                         + ' data-title="' + title + '"'
1110                                                         + ' data-width="' + width + '"'
1111                                                         + ' data-before="0"'
1112                                                         + ' data-after="-CHART_DURATION"'
1113                                                         + ' data-points="CHART_DURATION"'
1114                                                         + ' data-colors="' + colors + '"'
1115                                                         + ' role="application"></div>';
1116 }
1117
1118 // ----------------------------------------------------------------------------
1119
1120 var menuData = {
1121         'system': {
1122                 title: 'System Overview',
1123                 info: 'Overview of the key system metrics.'
1124         },
1125
1126         'ap': {
1127                 title: 'Access Points',
1128                 info: undefined
1129         },
1130
1131         'tc': {
1132                 title: 'Quality of Service',
1133                 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).'
1134         },
1135
1136         'net': {
1137                 title: 'Network Interfaces',
1138                 info: 'Per network interface statistics collected from <code>/proc/net/dev</code>.'
1139         },
1140
1141         'ipv4': {
1142                 title: 'IPv4 Networking',
1143                 info: undefined
1144         },
1145
1146         'ipv6': {
1147                 title: 'IPv6 Networking',
1148                 info: undefined
1149         },
1150
1151         'ipvs': {
1152                 title: 'IP Virtual Server',
1153                 info: undefined
1154         },
1155
1156         'netfilter': {
1157                 title: 'Firewall (netfilter)',
1158                 info: undefined
1159         },
1160
1161         'cpu': {
1162                 title: 'CPUs',
1163                 info: undefined
1164         },
1165
1166         'mem': {
1167                 title: 'Memory',
1168                 info: undefined
1169         },
1170
1171         'disk': {
1172                 title: 'Disks',
1173                 info: undefined
1174         },
1175
1176         'sensors': {
1177                 title: 'Sensors',
1178                 info: undefined
1179         },
1180
1181         'nfsd': {
1182                 title: 'File Server (nfsd)',
1183                 info: undefined
1184         },
1185
1186         'apps': {
1187                 title: 'Applications',
1188                 info: 'Per application statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics for applications of interest, defined in <code>/etc/netdata/apps_groups.conf</code> (the default is <a href="https://github.com/firehol/netdata/blob/master/conf.d/apps_groups.conf" target="_blank">here</a>). The plugin internally builds a process tree (much like <code>ps fax</code> does), and groups processes together (evaluating both child and parent processes) so that the result is always a chart with a predefined set of dimensions (of course, only application groups found running are reported).<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning children continuously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited children of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealistic utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
1189                 height: 1.5
1190         },
1191
1192         'users': {
1193                 title: 'Users',
1194                 info: 'Per user statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics per user.<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning children continuously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited children of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealistic utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
1195                 height: 1.5
1196         },
1197
1198         'groups': {
1199                 title: 'User Groups',
1200                 info: 'Per user group statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics per user group.<br/><b>IMPORTANT</b>: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning children continuously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited children of a process. However, these values are reported to the parent process <b>only when the child exits</b>. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealistic utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
1201                 height: 1.5
1202         },
1203
1204         'netdata': {
1205                 title: 'Netdata Monitoring',
1206                 info: undefined
1207         },
1208
1209         'example': {
1210                 title: 'Example Charts',
1211                 info: undefined
1212         },
1213
1214         'cgroup': {
1215                 title: 'Container',
1216                 info: undefined
1217         },
1218
1219         'mysql': {
1220                 title: 'MySQL',
1221                 info: undefined
1222         },
1223
1224         'named': {
1225                 title: 'named',
1226                 info: undefined
1227         },
1228 };
1229
1230 var submenuData = {
1231         'mem.ksm': {
1232                 title: 'Memory Deduper',
1233                 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.'
1234         },
1235
1236         'netfilter.conntrack': {
1237                 title: 'Connection Tracker',
1238                 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.'
1239         },
1240
1241         'netfilter.nfacct': {
1242                 title: 'Bandwidth Accounting',
1243                 info: 'The following information is read using the <code>nfacct.plugin</code>.'
1244         },
1245
1246         'netfilter.synproxy': {
1247                 title: 'DDoS Protection',
1248                 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.'
1249         }
1250 };
1251
1252 var chartData = {
1253         'system.cpu': {
1254                 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.'
1255         },
1256
1257         'system.load': {
1258                 info: 'Current system load read from <code>/proc/loadavg</code>.',
1259                 height: 0.7
1260         },
1261
1262         'system.io': {
1263                 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.'
1264         },
1265
1266         'system.swapio': {
1267                 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).'
1268         },
1269
1270         'system.pgfaults': {
1271                 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.'
1272         },
1273
1274         'system.entropy': {
1275                 colors: '#CC22AA',
1276                 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.'
1277         },
1278
1279         'system.forks': {
1280                 colors: '#5555DD',
1281                 info: 'The number of new processes created per second, read from <code>/proc/stat</code>.'
1282         },
1283
1284         'system.intr': {
1285                 colors: '#DD5555',
1286                 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.'
1287         },
1288
1289         'system.interrupts': {
1290                 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.'
1291         },
1292
1293         'system.softirqs': {
1294                 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.'
1295         },
1296
1297         'system.processes': {
1298                 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.'
1299         },
1300
1301         'system.active_processes': {
1302                 info: 'All system active processes, read from <code>/proc/loadavg</code>.'
1303         },
1304
1305         'system.ctxt': {
1306                 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.'
1307         },
1308
1309         'system.idlejitter': {
1310                 colors: '#5555AA',
1311                 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).'
1312         },
1313
1314         'system.ipv4': {
1315                 info: 'Total IPv4 Traffic, read from <code>/proc/net/netstat</code>.'
1316         },
1317
1318         'system.ipv6': {
1319                 info: 'Total IPv6 Traffic, read from <code>/proc/net/snmp6</code>.'
1320         },
1321
1322         'system.ram': {
1323                 info: 'System memory, read from <code>/proc/meminfo</code>.'
1324         },
1325
1326         'system.swap': {
1327                 info: 'System swap memory, read from <code>/proc/meminfo</code>.'
1328         },
1329
1330         'mem.ksm_savings': {
1331                 heads: [
1332                         gaugeChart('Saved', '12%', 'savings', '#0099CC')
1333                 ]
1334         },
1335
1336         'mem.ksm_ratios': {
1337                 heads: [
1338                         function(id) {
1339                                 return  '<div data-netdata="' + id + '"'
1340                                         + ' data-gauge-max-value="100"'
1341                                         + ' data-chart-library="gauge"'
1342                                         + ' data-title="Savings"'
1343                                         + ' data-units="percentage %"'
1344                                         + ' data-gauge-adjust="width"'
1345                                         + ' data-width="12%"'
1346                                         + ' data-before="0"'
1347                                         + ' data-after="-CHART_DURATION"'
1348                                         + ' data-points="CHART_DURATION"'
1349                                         + ' role="application"></div>';
1350                         }
1351                 ]
1352         },
1353
1354         'mem.committed': {
1355                 colors: NETDATA.colors[3]
1356         },
1357
1358         'apps.cpu': {
1359                 height: 2.0
1360         },
1361
1362         'apps.preads': {
1363                 height: 2.0
1364         },
1365
1366         'apps.pwrites': {
1367                 height: 2.0
1368         },
1369
1370         'users.cpu': {
1371                 height: 2.0
1372         },
1373
1374         'users.preads': {
1375                 height: 2.0
1376         },
1377
1378         'users.pwrites': {
1379                 height: 2.0
1380         },
1381
1382         'groups.cpu': {
1383                 height: 2.0
1384         },
1385
1386         'groups.preads': {
1387                 height: 2.0
1388         },
1389
1390         'groups.pwrites': {
1391                 height: 2.0
1392         },
1393
1394         'tc.qos': {
1395                 heads: [
1396                         function(id) {
1397                                 if(id.match(/.*-ifb$/))
1398                                         return gaugeChart('Inbound', '12%', '', '#5555AA');
1399                                 else
1400                                         return gaugeChart('Outbound', '12%', '', '#AA9900');
1401                         }
1402                 ]
1403         },
1404
1405         'net.net': {
1406                 heads: [
1407                         gaugeChart('Received', '12%', 'received'),
1408                         gaugeChart('Sent', '12%', 'sent')
1409                 ]
1410         },
1411
1412         'disk.util': {
1413                 colors: '#FF5588',
1414                 heads: [
1415                         gaugeChart('Utilization', '12%', '', '#FF5588')
1416                 ]
1417         },
1418
1419         'disk.backlog': {
1420                 colors: '#0099CC'
1421         },
1422
1423         'disk.io': {
1424                 heads: [
1425                         gaugeChart('Read', '12%', 'reads'),
1426                         gaugeChart('Write', '12%', 'writes')
1427                 ]
1428         },
1429
1430         'netfilter.sockets': {
1431                 colors: '#88AA00',
1432                 heads: [
1433                         gaugeChart('Active Connections', '12%', '', '#88AA00')
1434                 ]
1435         },
1436
1437         'netfilter.new': {
1438                 heads: [
1439                         gaugeChart('New Connections', '12%', 'new', '#5555AA')
1440                 ]
1441         },
1442
1443         'disk.iotime': {
1444                 height: 0.5
1445         },
1446         'disk.mops': {
1447                 height: 0.5
1448         },
1449         'disk.svctm': {
1450                 height: 0.5
1451         },
1452         'disk.avgsz': {
1453                 height: 0.5
1454         },
1455         'disk.await': {
1456                 height: 0.5
1457         },
1458
1459         'apache.connections': {
1460                 colors: NETDATA.colors[4],
1461                 mainheads: [
1462                         gaugeChart('Connections', '12%', '', NETDATA.colors[4])
1463                 ]
1464         },
1465
1466         'apache.requests': {
1467                 colors: NETDATA.colors[0],
1468                 mainheads: [
1469                         gaugeChart('Connections', '12%', '', NETDATA.colors[0])
1470                 ]
1471         },
1472
1473         'apache.net': {
1474                 colors: NETDATA.colors[3],
1475                 mainheads: [
1476                         gaugeChart('Bandwidth', '12%', '', NETDATA.colors[3])
1477                 ]
1478         },
1479
1480         'apache.workers': {
1481                 mainheads: [
1482                         function(id) {
1483                                 return  '<div data-netdata="' + id + '"'
1484                                         + ' data-dimensions="busy"'
1485                                         + ' data-append-options="percentage"'
1486                                         + ' data-gauge-max-value="100"'
1487                                         + ' data-chart-library="gauge"'
1488                                         + ' data-title="Workers Utilization"'
1489                                         + ' data-units="percentage %"'
1490                                         + ' data-gauge-adjust="width"'
1491                                         + ' data-width="12%"'
1492                                         + ' data-before="0"'
1493                                         + ' data-after="-CHART_DURATION"'
1494                                         + ' data-points="CHART_DURATION"'
1495                                         + ' role="application"></div>';
1496                         }
1497                 ]
1498         },
1499
1500         'apache.bytesperreq': {
1501                 colors: NETDATA.colors[3],
1502                 height: 0.5
1503         },
1504
1505         'apache.reqpersec': {
1506                 colors: NETDATA.colors[4],
1507                 height: 0.5
1508         },
1509
1510         'apache.bytespersec': {
1511                 colors: NETDATA.colors[6],
1512                 height: 0.5
1513         },
1514
1515         'nginx.connections': {
1516                 colors: NETDATA.colors[4],
1517                 mainheads: [
1518                         gaugeChart('Connections', '12%', '', NETDATA.colors[4])
1519                 ]
1520         },
1521
1522         'nginx.requests': {
1523                 colors: NETDATA.colors[0],
1524                 mainheads: [
1525                         gaugeChart('Requests', '12%', '', NETDATA.colors[0])
1526                 ]
1527         }
1528 };
1529
1530 function anyAttribute(obj, attr, key, def) {
1531         if(typeof obj[key] !== 'undefined') {
1532                 if(typeof obj[key][attr] !== 'undefined')
1533                         return obj[key][attr];
1534         }
1535         return def;
1536 }
1537
1538 function menuTitle(chart) {
1539         if(typeof chart.menu_pattern !== 'undefined') {
1540                 return anyAttribute(menuData, 'title', chart.menu_pattern, chart.menu_pattern).toString()
1541                                 + ': ' + chart.type.slice(-(chart.type.length - chart.menu_pattern.length - 1)).toString();
1542         }
1543
1544         return anyAttribute(menuData, 'title', chart.menu, chart.menu);
1545 }
1546
1547 function menuInfo(menu) {
1548         return anyAttribute(menuData, 'info', menu, null);
1549 }
1550
1551 function menuHeight(menu, relative) {
1552         return anyAttribute(menuData, 'height', menu, 1.0) * relative;
1553 }
1554
1555 function submenuTitle(menu, submenu) {
1556         var key = menu + '.' + submenu;
1557         return anyAttribute(submenuData, 'title', key, submenu);
1558 }
1559
1560 function submenuInfo(menu, submenu) {
1561         var key = menu + '.' + submenu;
1562         return anyAttribute(submenuData, 'info', key, null);
1563 }
1564
1565 function submenuHeight(menu, submenu, relative) {
1566         var key = menu + '.' + submenu;
1567         return anyAttribute(submenuData, 'height', key, 1.0) * relative;
1568 }
1569
1570
1571 function chartInfo(id) {
1572         if(typeof chartData[id] !== 'undefined' && typeof chartData[id].info !== 'undefined')
1573                 return '<div class="chart-message netdata-chart-alignment" role="document">' + chartData[id].info + '</div>';
1574         else
1575                 return '';
1576 }
1577
1578 function chartHeight(id, def) {
1579         if(typeof chartData[id] !== 'undefined' && typeof chartData[id].height !== 'undefined')
1580                 return def * chartData[id].height;
1581         else
1582                 return def;
1583 }
1584
1585
1586 // ----------------------------------------------------------------------------
1587
1588 // enrich the data structure returned by netdata
1589 // to reflect our menu system and content
1590 function enrichChartData(chart) {
1591         var tmp = chart.type.split('_')[0];
1592
1593         switch(tmp) {
1594                 case 'ap':
1595                 case 'net':
1596                 case 'disk':
1597                         chart.menu = tmp;
1598                         break;
1599
1600                 case 'mysql':
1601                 case 'named':
1602                 case 'cgroup':
1603                         chart.menu = chart.type;
1604                         chart.menu_pattern = tmp;
1605                         break;
1606
1607                 case 'tc':
1608                         chart.menu = tmp;
1609
1610                         // find a name for this device from fireqos info
1611                         // we strip '_(in|out)' or '(in|out)_'
1612                         if(typeof options.submenu_names[chart.family] === 'undefined' || options.submenu_names[chart.family] === chart.family) {
1613                                 var n = chart.name.split('.')[1];
1614                                 if(n.endsWith('_in'))
1615                                         options.submenu_names[chart.family] = n.slice(0, n.lastIndexOf('_in'));
1616                                 else if(n.endsWith('_out'))
1617                                         options.submenu_names[chart.family] = n.slice(0, n.lastIndexOf('_out'));
1618                                 else if(n.startsWith('in_'))
1619                                         options.submenu_names[chart.family] = n.slice(3, n.length);
1620                                 else if(n.startsWith('out_'))
1621                                         options.submenu_names[chart.family] = n.slice(4, n.length);
1622                         }
1623
1624                         // increase the priority of IFB devices
1625                         // to have inbound appear before outbound
1626                         if(chart.id.match(/.*-ifb$/))
1627                                 chart.priority--;
1628
1629                         break;
1630
1631                 default:
1632                         chart.menu = chart.type;
1633                         break;
1634         }
1635
1636         chart.submenu = chart.family;
1637 }
1638
1639 // ----------------------------------------------------------------------------
1640
1641 function name2id(s) {
1642         return s
1643                 .replace(/ /g, '_')
1644                 .replace(/\(/g, '_')
1645                 .replace(/\)/g, '_')
1646                 .replace(/\./g, '_')
1647                 .replace(/\//g, '_');
1648 }
1649
1650 function headMain(charts, duration) {
1651         var head = '';
1652
1653         if(typeof charts['system.swap'] !== 'undefined')
1654                 head += '<div style="margin-right: 10px;" data-netdata="system.swap"'
1655                 + ' data-dimensions="free"'
1656                 + ' data-append-options="percentage"'
1657                 + ' data-chart-library="easypiechart"'
1658                 + ' data-title="Free Swap"'
1659                 + ' data-units="%"'
1660                 + ' data-easypiechart-max-value="100"'
1661                 + ' data-width="8%"'
1662                 + ' data-before="0"'
1663                 + ' data-after="-' + duration.toString() + '"'
1664                 + ' data-points="' + duration.toString() + '"'
1665                 + ' data-colors="#DD4400"'
1666                 + ' role="application"></div>';
1667
1668         if(typeof charts['system.io'] !== 'undefined') {
1669                 head += '<div style="margin-right: 10px;" data-netdata="system.io"'
1670                 + ' data-dimensions="in"'
1671                 + ' data-chart-library="easypiechart"'
1672                 + ' data-title="Disk Read"'
1673                 + ' data-units="KB / s"'
1674                 + ' data-width="10%"'
1675                 + ' data-before="0"'
1676                 + ' data-after="-' + duration.toString() + '"'
1677                 + ' data-points="' + duration.toString() + '"'
1678                 + ' role="application"></div>';
1679
1680                 head += '<div style="margin-right: 10px;" data-netdata="system.io"'
1681                 + ' data-dimensions="out"'
1682                 + ' data-chart-library="easypiechart"'
1683                 + ' data-title="Disk Write"'
1684                 + ' data-units="KB / s"'
1685                 + ' data-width="10%"'
1686                 + ' data-before="0"'
1687                 + ' data-after="-' + duration.toString() + '"'
1688                 + ' data-points="' + duration.toString() + '"'
1689                 + ' role="application"></div>';
1690         }
1691
1692         if(typeof charts['system.cpu'] !== 'undefined')
1693                 head += '<div data-netdata="system.cpu"'
1694                 + ' data-chart-library="gauge"'
1695                 + ' data-title="CPU"'
1696                 + ' data-units="%"'
1697                 + ' data-gauge-max-value="100"'
1698                 + ' data-width="18%"'
1699                 + ' data-after="-' + duration.toString() + '"'
1700                 + ' data-points="' + duration.toString() + '"'
1701                 + ' data-colors="' + NETDATA.colors[12] + '"'
1702                 + ' role="application"></div>';
1703
1704         if(typeof charts['system.ipv4'] !== 'undefined') {
1705                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
1706                 + ' data-dimensions="received"'
1707                 + ' data-chart-library="easypiechart"'
1708                 + ' data-title="IPv4 Inbound"'
1709                 + ' data-units="kbps"'
1710                 + ' data-width="10%"'
1711                 + ' data-before="0"'
1712                 + ' data-after="-' + duration.toString() + '"'
1713                 + ' data-points="' + duration.toString() + '"'
1714                 + ' role="application"></div>';
1715
1716                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
1717                 + ' data-dimensions="sent"'
1718                 + ' data-chart-library="easypiechart"'
1719                 + ' data-title="IPv4 Outbound"'
1720                 + ' data-units="kbps"'
1721                 + ' data-width="10%"'
1722                 + ' data-before="0"'
1723                 + ' data-after="-' + duration.toString() + '"'
1724                 + ' data-points="' + duration.toString() + '"'
1725                 + ' role="application"></div>';
1726         }
1727         else if(typeof charts['system.ipv6'] !== 'undefined') {
1728                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv6"'
1729                 + ' data-dimensions="received"'
1730                 + ' data-chart-library="easypiechart"'
1731                 + ' data-title="IPv6 Inbound"'
1732                 + ' data-units="kbps"'
1733                 + ' data-width="10%"'
1734                 + ' data-before="0"'
1735                 + ' data-after="-' + duration.toString() + '"'
1736                 + ' data-points="' + duration.toString() + '"'
1737                 + ' role="application"></div>';
1738
1739                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv6"'
1740                 + ' data-dimensions="sent"'
1741                 + ' data-chart-library="easypiechart"'
1742                 + ' data-title="IPv6 Outbound"'
1743                 + ' data-units="kbps"'
1744                 + ' data-width="10%"'
1745                 + ' data-before="0"'
1746                 + ' data-after="-' + duration.toString() + '"'
1747                 + ' data-points="' + duration.toString() + '"'
1748                 + ' role="application"></div>';
1749         }
1750
1751         if(typeof charts['system.ram'] !== 'undefined')
1752                 head += '<div style="margin-right: 10px;" data-netdata="system.ram"'
1753                 + ' data-dimensions="cached|free"'
1754                 + ' data-append-options="percentage"'
1755                 + ' data-chart-library="easypiechart"'
1756                 + ' data-title="Available RAM"'
1757                 + ' data-units="%"'
1758                 + ' data-easypiechart-max-value="100"'
1759                 + ' data-width="8%"'
1760                 + ' data-after="-' + duration.toString() + '"'
1761                 + ' data-points="' + duration.toString() + '"'
1762                 + ' data-colors="' + NETDATA.colors[7] + '"'
1763                 + ' role="application"></div>';
1764
1765         return head;
1766 }
1767
1768 function generateHeadCharts(type, chart, duration) {
1769         var head = '';
1770         var hcharts = anyAttribute(chartData, type, chart.context, []);
1771         if(hcharts.length > 0) {
1772                 var hi = 0, hlen = hcharts.length;
1773                 while(hi < hlen) {
1774                         if(typeof hcharts[hi] === 'function')
1775                                 head += hcharts[hi](chart.id).replace('CHART_DURATION', duration.toString()).replace('CHART_UNIQUE_ID', chart.id);
1776                         else
1777                                 head += hcharts[hi].replace('CHART_DURATION', duration.toString()).replace('CHART_UNIQUE_ID', chart.id);
1778                         hi++;
1779                 }
1780         }
1781         return head;
1782 }
1783
1784 function renderPage(menus, data) {
1785         var div = document.getElementById('charts_div');
1786         var pcent_width = Math.floor(100 / chartsPerRow($(div).width()));
1787
1788         // find the proper duration for per-second updates
1789         var duration = Math.round(($(div).width() * pcent_width / 100 * data.update_every / 3) / 60) * 60;
1790         var html = '';
1791         var sidebar = '<ul class="nav dashboard-sidenav" data-spy="affix" id="sidebar_ul">';
1792         var mainhead = headMain(data.charts, duration);
1793
1794         // sort the menus
1795         var main = sortObjectByPriority(menus);
1796         var i = 0, len = main.length;
1797         while(i < len) {
1798                 var menu = main[i++];
1799
1800                 // generate an entry at the main menu
1801
1802                 var menuid = name2id(menu);
1803                 sidebar += '<li class=""><a href="#' + menuid + '">' + menus[menu].title + '</a><ul class="nav">';
1804                 html += '<div role="section"><div role="sectionhead"><h1 id="' + menuid + '" role="heading">' + menus[menu].title + '</h1></div><div id="menu_' + menuid + '" role="document">';
1805
1806                 if(menus[menu].info !== null)
1807                         html += menus[menu].info;
1808
1809                 // console.log(' >> ' + menu + ' (' + menus[menu].priority + '): ' + menus[menu].title);
1810
1811                 var shtml = '';
1812                 var mhead = '<div class="netdata-chart-row">' + mainhead;
1813                 mainhead = '';
1814
1815                 // sort the submenus of this menu
1816                 var sub = sortObjectByPriority(menus[menu].submenus);
1817                 var si = 0, slen = sub.length;
1818                 while(si < slen) {
1819                         var submenu = sub[si++];
1820
1821                         // generate an entry at the submenu
1822                         var submenuid = name2id(menu + '_' + submenu);
1823                         sidebar += '<li class><a href="#' + submenuid + '">' + menus[menu].submenus[submenu].title + '</a></li>';
1824                         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>';
1825
1826                         if(menus[menu].submenus[submenu].info !== null)
1827                                 shtml += '<div class="chart-message netdata-chart-alignment" role="document">' + menus[menu].submenus[submenu].info + '</div>';
1828
1829                         var head = '<div class="netdata-chart-row">';
1830                         var chtml = '';
1831
1832                         // console.log('    \------- ' + submenu + ' (' + menus[menu].submenus[submenu].priority + '): ' + menus[menu].submenus[submenu].title);
1833
1834                         // sort the charts in this submenu of this menu
1835                         menus[menu].submenus[submenu].charts.sort(prioritySort);
1836                         var ci = 0, clen = menus[menu].submenus[submenu].charts.length;
1837                         while(ci < clen) {
1838                                 var chart = menus[menu].submenus[submenu].charts[ci++];
1839
1840                                 // generate the submenu heading charts
1841                                 mhead += generateHeadCharts('mainheads', chart, duration);
1842                                 head += generateHeadCharts('heads', chart, duration);
1843
1844                                 // generate the chart
1845                                 chtml += chartInfo(chart.context) + '<div data-netdata="' + chart.id + '"'
1846                                         + ' data-width="' + pcent_width.toString() + '%"'
1847                                         + ' data-height="' + chartHeight(chart.context, options.chartsHeight).toString() + 'px"'
1848                                         + ' data-before="0"'
1849                                         + ' data-after="-' + duration.toString() + '"'
1850                                         + ' data-id="' + name2id(options.hostname + '/' + chart.id) + '"'
1851                                         + ' data-colors="' + anyAttribute(chartData, 'colors', chart.context, '') + '"'
1852                                         + ' role="application"></div>';
1853
1854                                 // console.log('         \------- ' + chart.id + ' (' + chart.priority + '): ' + chart.context  + ' height: ' + menus[menu].submenus[submenu].height);
1855                         }
1856
1857                         head += '</div>';
1858                         shtml += head + chtml + '</div>';
1859                 }
1860
1861                 mhead += '</div>';
1862                 sidebar += '</ul></li>';
1863                 html += mhead + shtml + '</div></div><hr role="separator"/>';
1864         }
1865
1866         sidebar += '</ul>';
1867         div.innerHTML = html;
1868         document.getElementById('sidebar').innerHTML = sidebar;
1869         finalizePage();
1870 }
1871
1872 function renderChartsAndMenu(data) {
1873         var menus = {};
1874         var charts = data.charts;
1875
1876         for(var c in charts) {
1877                 enrichChartData(charts[c]);
1878
1879                 // create the menu
1880                 if(typeof menus[charts[c].menu] === 'undefined') {
1881                         menus[charts[c].menu] = {
1882                                 priority: charts[c].priority,
1883                                 submenus: {},
1884                                 title: menuTitle(charts[c]),
1885                                 info: menuInfo(charts[c].menu),
1886                                 height: menuHeight(charts[c].menu, options.chartsHeight)
1887                         };
1888                 }
1889
1890                 if(charts[c].priority < menus[charts[c].menu].priority)
1891                         menus[charts[c].menu].priority = charts[c].priority;
1892
1893                 // create the submenu
1894                 if(typeof menus[charts[c].menu].submenus[charts[c].submenu] === 'undefined') {
1895                         menus[charts[c].menu].submenus[charts[c].submenu] = {
1896                                 priority: charts[c].priority,
1897                                 charts: new Array(),
1898                                 title: null,
1899                                 info: submenuInfo(charts[c].menu, charts[c].submenu),
1900                                 height: submenuHeight(charts[c].menu, charts[c].submenu, menus[charts[c].menu].height)
1901                         };
1902                 }
1903
1904                 if(charts[c].priority < menus[charts[c].menu].submenus[charts[c].submenu].priority)
1905                         menus[charts[c].menu].submenus[charts[c].submenu].priority = charts[c].priority;
1906
1907                 // index the chart in the menu/submenu
1908                 menus[charts[c].menu].submenus[charts[c].submenu].charts.push(charts[c]);
1909         }
1910
1911         // propagate the descriptive subname given to QoS
1912         // to all the other submenus with the same name
1913         for(var m in menus) {
1914                 for(var s in menus[m].submenus) {
1915                         // set the family using a name
1916                         if(typeof options.submenu_names[s] !== 'undefined') {
1917                                 menus[m].submenus[s].title = s + ' (' + options.submenu_names[s] + ')';
1918                         }
1919                         else {
1920                                 menus[m].submenus[s].title = submenuTitle(m, s);
1921                         }
1922                 }
1923         }
1924
1925         renderPage(menus, data);
1926 }
1927
1928 function downloadAllCharts(netdata_url) {
1929         if(typeof netdata_url === 'undefined' || netdata_url === null)
1930                 netdata_url = NETDATA.serverDefault;
1931
1932         NETDATA.pause(function() {
1933
1934                 // download all the charts the server knows
1935                 NETDATA.chartRegistry.downloadAll(netdata_url, function(data) {
1936
1937                         options.data = data;
1938                         options.hostname = data.hostname;
1939                         document.getElementById('hostname').innerHTML = options.hostname;
1940                         document.getElementById('hostname').href = NETDATA.serverDefault;
1941                         document.title = options.hostname + ' dashboard';
1942
1943                         renderChartsAndMenu(data);
1944
1945                         // prepare our DOM
1946 //                      prepareScreen(data);
1947
1948                         // due to affix issues, prepareScreen() will unpause
1949                         // netdata as needed
1950                 });
1951         });
1952 }
1953
1954 // ----------------------------------------------------------------------------
1955
1956 function versionLog(msg) {
1957         document.getElementById('versionCheckLog').innerHTML = msg;
1958 }
1959
1960 function getNetdataVersion(callback) {
1961         versionLog('Downloading installed version info from netdata...');
1962
1963         $.ajax({
1964                 url: 'version.txt',
1965                 async: true,
1966                 cache: false
1967         })
1968         .done(function(data) {
1969                 data = data.replace(/(\r\n|\n|\r| |\t)/gm,"");
1970                 if(data.length !== 40) {
1971                         versionLog('Received version string is invalid.');
1972                         callback(null);
1973                 }
1974                 else {
1975                         versionLog('Installed version of netdata is ' + data);
1976                         document.getElementById('netdataVersion').innerHTML = data;
1977                         callback(data);
1978                 }
1979         })
1980         .fail(function() {
1981                 versionLog('Failed to download installed version info from netdata!');
1982                 callback(null);
1983         });
1984 }
1985
1986 function getGithubLatestCommit(callback) {
1987         versionLog('Downloading latest version info from github...');
1988
1989         $.ajax({
1990                 url: 'https://api.github.com/repos/firehol/netdata/commits',
1991                 async: true,
1992                 cache: false
1993         })
1994         .done(function(data) {
1995                 versionLog('Latest version info from github is ' + data[0].sha);
1996                 callback(data[0].sha);
1997         })
1998         .fail(function() {
1999                 versionLog('Failed to download installed version info from github!');
2000                 callback(null);
2001         });
2002 }
2003
2004 function checkForUpdate(callback) {
2005         getNetdataVersion(function(sha1) {
2006                 if(sha1 === null) callback(null, null);
2007
2008                 getGithubLatestCommit(function(sha2) {
2009                         callback(sha1, sha2);
2010                 });
2011         });
2012
2013         return null;
2014 }
2015
2016 var updateBlinkCounter = 0;
2017 function notifyForUpdate(force) {
2018         versionLog('<p>checking for updates...</p>');
2019
2020         var now = new Date().getTime();
2021
2022         if(typeof force === 'undefined' || force !== true) {
2023                 var last = loadLocalStorage('last_update_check');
2024
2025                 if(typeof last === 'string')
2026                         last = parseInt(last);
2027                 else
2028                         last = 0;
2029
2030                 if(now - last < 3600000 * 8) {
2031                         // no need to check it - too soon
2032                         return;
2033                 }
2034         }
2035
2036         checkForUpdate(function(sha1, sha2) {
2037                 var save = false;
2038
2039                 if(sha1 === null) {
2040                         save = false;
2041                         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>');
2042                 }
2043                 else if(sha2 === null) {
2044                         save = false;
2045                         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>');
2046                 }
2047                 else if(sha1 === sha2) {
2048                         save = true;
2049                         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>');
2050                 }
2051                 else {
2052                         save = true;
2053                         var compare = 'https://github.com/firehol/netdata/compare/' + sha1.toString() + '...' + sha2.toString();
2054
2055                         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>');
2056
2057                         function updateButtonBlink() {
2058                                 updateBlinkCounter--;
2059                                 if(updateBlinkCounter > 0)
2060                                         $('#updateButton').fadeOut(500).fadeIn(500, updateButtonBlink);
2061                         }
2062
2063                         if(updateBlinkCounter === 0) {
2064                                 updateBlinkCounter = 300;
2065                                 updateButtonBlink();
2066                         }
2067                 }
2068
2069                 if(save)
2070                         saveLocalStorage('last_update_check', now.toString());
2071         });
2072 }
2073
2074 // ----------------------------------------------------------------------------
2075
2076 function getUrlParameter(sParam) {
2077     var sPageURL = decodeURIComponent(window.location.search.substring(1)),
2078         sURLVariables = sPageURL.split('&'),
2079         sParameterName,
2080         i;
2081
2082     for (i = 0; i < sURLVariables.length; i++) {
2083         sParameterName = sURLVariables[i].split('=');
2084
2085         if (sParameterName[0] === sParam) {
2086             return sParameterName[1] === undefined ? true : sParameterName[1];
2087         }
2088     }
2089 }
2090
2091 function finalizePage() {
2092         // resize all charts - without starting the background thread
2093         // this has to be done while NETDATA is paused
2094         // if we ommit this, the affix menu will be wrong, since all
2095         // the Dom elements are initially zero-sized
2096         NETDATA.parseDom();
2097
2098         var before = 0, after = 0, nowelcome = 0;
2099         after = getUrlParameter('force_after_ms');
2100         before = getUrlParameter('force_before_ms');
2101         nowelcome = (getUrlParameter('nowelcome') === true)?true:false;
2102
2103         if(before > 0 && after > 0) {
2104                 nowelcome = true;
2105                 NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], after, before);
2106         }
2107
2108         // let it run (update the charts)
2109         NETDATA.unpause();
2110
2111         // check if we have to jump to a specific section
2112         var hash = location.hash.replace('#','');
2113         if(hash != '') {
2114                 // Clear the hash in the URL
2115                 // location.hash = '';   // delete front "//" if you want to change the address bar
2116                 var offset = $(location.hash).offset();
2117                 if(typeof offset !== 'undefined')
2118                         $('html, body').animate({ scrollTop: offset.top }, 0);
2119         }
2120
2121         /* activate bootstrap sidebar (affix) */
2122         $('#sidebar').affix({
2123                 offset: {
2124                         top: (isdemo())?150:0,
2125                         bottom: 0
2126                 }
2127         });
2128
2129         /* fix scrolling of very long affix lists
2130            http://stackoverflow.com/questions/21691585/bootstrap-3-1-0-affix-too-long
2131          */
2132         $('#sidebar').on('affixed.bs.affix', function() {
2133                 $(this).removeAttr('style');
2134         });
2135
2136         /* activate bootstrap scrollspy (needed for sidebar) */
2137         $(document.body).scrollspy({
2138                 target: '#sidebar',
2139                 offset: $(window).height() / 3 // controls the diff of the <hX> element to the top, to select it
2140         });
2141
2142         document.getElementById('footer').style.display = 'block';
2143
2144
2145         var update_options_modal = function() {
2146                 // console.log('update_options_modal');
2147
2148                 var sync_option = function(option) {
2149                         var self = $('#' + option);
2150
2151                         if(self.prop('checked') !== NETDATA.getOption(option)) {
2152                                 // console.log('switching ' + option.toString());
2153                                 self.bootstrapToggle(NETDATA.getOption(option)?'on':'off');
2154                         }
2155                 }
2156
2157                 var theme_sync_option = function(option) {
2158                         var self = $('#' + option);
2159
2160                         self.bootstrapToggle(netdataTheme === 'slate'?'on':'off');
2161                 }
2162
2163                 sync_option('eliminate_zero_dimensions');
2164                 sync_option('destroy_on_hide');
2165                 sync_option('parallel_refresher');
2166                 sync_option('concurrent_refreshes');
2167                 sync_option('sync_selection');
2168                 sync_option('sync_pan_and_zoom');
2169                 sync_option('stop_updates_when_focus_is_lost');
2170                 sync_option('smooth_plot');
2171                 sync_option('pan_and_zoom_data_padding');
2172                 sync_option('show_help');
2173                 theme_sync_option('netdata_theme_control');
2174
2175                 if(NETDATA.getOption('parallel_refresher') === false) {
2176                         $('#concurrent_refreshes_row').hide();
2177                 }
2178                 else {
2179                         $('#concurrent_refreshes_row').show();
2180                 }
2181         };
2182         NETDATA.setOption('setOptionCallback', update_options_modal);
2183
2184         // handle options changes
2185         $('#eliminate_zero_dimensions').change(function()       { NETDATA.setOption('eliminate_zero_dimensions', $(this).prop('checked')); });
2186         $('#destroy_on_hide').change(function()                 { NETDATA.setOption('destroy_on_hide', $(this).prop('checked')); });
2187         $('#parallel_refresher').change(function()              { NETDATA.setOption('parallel_refresher', $(this).prop('checked')); });
2188         $('#concurrent_refreshes').change(function()            { NETDATA.setOption('concurrent_refreshes', $(this).prop('checked')); });
2189         $('#sync_selection').change(function()                  { NETDATA.setOption('sync_selection', $(this).prop('checked')); });
2190         $('#sync_pan_and_zoom').change(function()               { NETDATA.setOption('sync_pan_and_zoom', $(this).prop('checked')); });
2191         $('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); });
2192         $('#smooth_plot').change(function()                     { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
2193         $('#pan_and_zoom_data_padding').change(function()       { NETDATA.setOption('pan_and_zoom_data_padding', $(this).prop('checked')); });
2194         $('#show_help').change(function()                       { NETDATA.setOption('show_help', $(this).prop('checked')); location.reload(); });
2195
2196         // this has to be the last
2197         // it reloads the page
2198         $('#netdata_theme_control').change(function() {
2199                 if(setTheme($(this).prop('checked')?'slate':'white'))
2200                         location.reload();
2201         });
2202
2203         $('#updateModal').on('shown.bs.modal', function() {
2204                 notifyForUpdate(true);
2205         });
2206
2207         $('#deleteRegistryModal').on('hidden.bs.modal', function() {
2208                 deleteRegistryGuid = null;
2209         });
2210
2211         if(isdemo()) {
2212                 if(!nowelcome) {
2213                         setTimeout(function() {
2214                                 $('#welcomeModal').modal();
2215                         }, 1000);
2216                 }
2217
2218                 // google analytics when this is used for the home page of the demo sites
2219                 // this does not run on user's installations
2220                 setTimeout(function() {
2221                         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
2222                         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
2223                         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
2224                         })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
2225
2226                         ga('create', 'UA-64295674-3', 'auto');
2227                         ga('send', 'pageview');
2228                 }, 2000);
2229         }
2230         else notifyForUpdate();
2231 }
2232
2233 function resetDashboardOptions() {
2234         var help = NETDATA.options.current.show_help;
2235
2236         NETDATA.resetOptions();
2237         if(setTheme('slate'))
2238                 location.reload();
2239
2240         if(help !== NETDATA.options.current.show_help)
2241                 location.reload();
2242 }
2243
2244 downloadAllCharts();
2245
2246 </script>
2247
2248 </body>
2249 </html>