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