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