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 hidding under the navbar */
  32         body {
  33                 padding-top: 50px;
  34         }
  35
  36         /* fix # anchors scrolling under the navbar
  37            https://github.com/twbs/bootstrap/issues/1768#issuecomment-46519033
  38          */
  39         h1 {
  40                 position: relative;
  41                 z-index: -1;
  42         }
  43         h2 {
  44                 position: relative;
  45                 z-index: -2;
  46         }
  47         h1:before, h2:before {
  48                 display: block;
  49                 content: " ";
  50                 margin-top: -70px;
  51                 height: 70px;
  52                 visibility: hidden;
  53         }
  54
  55         .p {
  56                 display: block;
  57                 margin-top: 15px;
  58         }
  59
  60         .option-row,
  61         .option-control {
  62                 vertical-align: top;
  63                 padding: 10px;
  64                 padding-top: 30px;
  65         }
  66
  67         .option-info {
  68                 padding: 10px;
  69         }
  70
  71         .chart-message {
  72                 display: block;
  73                 margin-top: 10px;
  74         }
  75
  76         .container {
  77                 width: 90% !important;
  78         }
  79
  80         #masthead h1 {
  81                 /*font-size: 30px;*/
  82                 line-height: 1;
  83                 padding-top: 30px;
  84         }
  85
  86         #masthead .well {
  87                 margin-top:4%;
  88         }
  89
  90         /* fix the navbar shifting when a modal is open */
  91         /* https://github.com/twbs/bootstrap/issues/14040#issuecomment-159891033 */
  92         body.modal-open{
  93                 width: 100% !important;
  94                 padding-right: 0 !important;
  95 /*              overflow-y: scroll !important; */
  96 /*              position: fixed !important;*/
  97                 overflow: visible;
  98         }
  99
 100         /*
 101          * Side navigation
 102          *
 103          * Scrollspy and affixed enhanced navigation to highlight sections and secondary
 104          * sections of docs content.
 105          */
 106
 107         .dashboard-sidebar {
 108                 max-height: calc(100% - 70px) !important;
 109                 overflow-y: auto;
 110                 /*width: 220px !important;*/
 111         }
 112
 113         /* By default it's not affixed in mobile views, so undo that */
 114         .dashboard-sidebar.affix {
 115                 position: static;
 116         }
 117         @media (min-width: 768px) {
 118                 .dashboard-sidebar {
 119                         padding-left: 20px;
 120                 }
 121         }
 122
 123         .affix {
 124                 position: static;
 125                 top: 70px !important;
 126                 /*width: 220px;*/
 127         }
 128         .affix-top {
 129                 /*width: 220px;*/
 130         }
 131
 132         /* First level of nav */
 133         .dashboard-sidenav {
 134                 margin-top: 20px;
 135                 margin-bottom: 20px;
 136         }
 137
 138         /* All levels of nav */
 139         .dashboard-sidebar .nav > li > a {
 140                 display: block;
 141                 padding: 4px 20px;
 142                 font-size: 13px;
 143                 font-weight: 500;
 144                 color: #767676;
 145         }
 146         .dashboard-sidebar .nav > li > a:hover,
 147         .dashboard-sidebar .nav > li > a:focus {
 148                 padding-left: 19px;
 149                 color: #563d7c;
 150                 text-decoration: none;
 151                 background-color: transparent;
 152                 border-left: 1px solid #563d7c;
 153         }
 154         .dashboard-sidebar .nav > .active > a,
 155         .dashboard-sidebar .nav > .active:hover > a,
 156         .dashboard-sidebar .nav > .active:focus > a {
 157                 padding-left: 18px;
 158                 font-weight: bold;
 159                 color: #563d7c;
 160                 background-color: transparent;
 161                 border-left: 2px solid #563d7c;
 162         }
 163
 164         /* Nav: second level (shown on .active) */
 165         .dashboard-sidebar .nav .nav {
 166                 display: none; /* Hide by default, but at >768px, show it */
 167                 padding-bottom: 10px;
 168         }
 169         .dashboard-sidebar .nav .nav > li > a {
 170                 padding-top: 1px;
 171                 padding-bottom: 1px;
 172                 padding-left: 30px;
 173                 font-size: 12px;
 174                 font-weight: normal;
 175         }
 176         .dashboard-sidebar .nav .nav > li > a:hover,
 177         .dashboard-sidebar .nav .nav > li > a:focus {
 178                 padding-left: 29px;
 179         }
 180         .dashboard-sidebar .nav .nav > .active > a,
 181         .dashboard-sidebar .nav .nav > .active:hover > a,
 182         .dashboard-sidebar .nav .nav > .active:focus > a {
 183                 padding-left: 28px;
 184                 font-weight: 500;
 185         }
 186
 187         /* Back to top (hidden on mobile) */
 188         .back-to-top,
 189         .dashboard-theme-toggle {
 190                 display: none;
 191                 padding: 4px 10px;
 192                 margin-top: 10px;
 193                 margin-left: 10px;
 194                 font-size: 12px;
 195                 font-weight: 500;
 196                 color: #999;
 197         }
 198         .back-to-top:hover,
 199         .dashboard-theme-toggle:hover {
 200                 color: #563d7c;
 201                 text-decoration: none;
 202         }
 203         .dashboard-theme-toggle {
 204                 margin-top: 0;
 205         }
 206
 207         @media (min-width: 768px) {
 208                 .back-to-top,
 209                 .dashboard-theme-toggle {
 210                         display: block;
 211                 }
 212         }
 213
 214         /* Show and affix the side nav when space allows it */
 215         @media (min-width: 992px) {
 216                 .dashboard-sidebar .nav > .active > ul {
 217                         display: block;
 218                 }
 219                 /* Widen the fixed sidebar */
 220                 .dashboard-sidebar.affix,
 221                 .dashboard-sidebar.affix-bottom {
 222                         width: 213px;
 223                 }
 224                 .dashboard-sidebar.affix {
 225                         position: fixed; /* Undo the static from mobile first approach */
 226                         top: 20px;
 227                 }
 228                 .dashboard-sidebar.affix-bottom {
 229                         position: absolute; /* Undo the static from mobile first approach */
 230                 }
 231                 .dashboard-sidebar.affix-bottom .dashboard-sidenav,
 232                 .dashboard-sidebar.affix .dashboard-sidenav {
 233                         margin-top: 0;
 234                         margin-bottom: 0;
 235                 }
 236         }
 237         @media (min-width: 1200px) {
 238                 /* Widen the fixed sidebar again */
 239                 .dashboard-sidebar.affix-bottom,
 240                 .dashboard-sidebar.affix {
 241                         width: 263px;
 242                 }
 243         }
 244         </style>
 245
 246         <!-- you can set your netdata server globally, by ucommenting this -->
 247         <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
 248         <!-- <script> netdataServer = "http://box:19999"; </script> -->
 249
 250         <!-- load the dashboard manager - it will do the rest -->
 251         <script type="text/javascript" src="dashboard.js?v2"></script>
 252 </head>
 253
 254 <body data-spy="scroll" data-target="#sidebar">
 255         <nav class="navbar navbar-default navbar-fixed-top" role="banner">
 256                 <div class="container">
 257                         <div class="navbar-header">
 258                                 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
 259                                         <span class="sr-only">Toggle navigation</span>
 260                                         <span class="icon-bar"></span>
 261                                         <span class="icon-bar"></span>
 262                                         <span class="icon-bar"></span>
 263                                 </button>
 264                                 <a href="/" class="navbar-brand" id="hostname">netdata</a>
 265                         </div>
 266                         <nav class="collapse navbar-collapse navbar-right" role="navigation">
 267                                 <ul class="nav navbar-nav">
 268                                         <li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-cog"></i> settings</a></li>
 269                                         <li><a href="https://github.com/firehol/netdata" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
 270                                         <li><a href="old/" class="btn" target="_blank"><i class="fa fa-step-backward"></i> old dashboard</a></li>
 271 <!--                                    <li><a href="#sec">Visualize</a></li>
 272                                         <li><a href="#sec">Prototype</a></li>
 273 -->                             </ul>
 274                         </nav>
 275                 </div>
 276         </nav>
 277
 278         <div id="masthead" style="display: none;">
 279                 <div class="container">
 280                         <div class="row">
 281                                 <div class="col-md-7">
 282                                         <h1>Netdata Dashboard
 283                                                 <p class="lead">Real time data collection and graphs...</p>
 284                                         </h1>
 285                                 </div>
 286                                 <div class="col-md-5">
 287                                         <div class="well well-lg">
 288                                                 <div class="row">
 289                                                 <div class="col-md-6">
 290                                                         <b>Drag</b> charts to pan.
 291                                                         <b>Shift + wheel</b> on them, to zoom in and out.
 292                                                         <b>Double-click</b> on them, to reset.
 293                                                         <b>Hover</b> on them too!
 294                                                         </div>
 295                                                 <div class="col-md-6">
 296                                                         <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>
 297                                                         </div>
 298                                                 </div>
 299                                         </div>
 300                                 </div>
 301                         </div>
 302                 </div>
 303         </div>
 304
 305         <div class="container">
 306                 <div class="row">
 307                         <div class="col-md-10" role="main">
 308                                 <div id="charts_div"></div>
 309                         </div>
 310                         <div class="col-md-2" role="complementary">
 311                                 <nav class="dashboard-sidebar hidden-print hidden-xs hidden-sm" id="sidebar" role="menu"></nav>
 312                         </div>
 313                 </div>
 314         </div>
 315
 316         <div id="footer" class="container" style="display: none;">
 317                 <div class="row">
 318                         <div class="col-md-10" role="main">
 319                                 <div class="p">
 320                                         <big><a href="https://github.com/firehol/netdata" target="_blank">netdata</a></big><br/>
 321                                         <i class="fa fa-copyright"></i> Copyright 2016, Costa Tsaousis.<br/>
 322                                         Released under <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GPL v3 or later</a>.<br/>
 323                                 </div>
 324                                 <div class="p">
 325                                         <small>
 326                                                 <a href="https://github.com/firehol/netdata" target="_blank">netdata</a> re-distributes these software tools:
 327
 328                                                 <i class="fa fa-circle"></i> The excellent <a href="http://dygraphs.com/" target="_blank">Dygraphs.com</a> web chart library,
 329                                                 <i class="fa fa-copyright"></i> Copyright 2009, Dan Vanderkam, <a href="http://dygraphs.com/legal.html" target="_blank">MIT License</a>
 330
 331                                                 <i class="fa fa-circle"></i> <a href="http://omnipotent.net/jquery.sparkline/" target="_blank">jQuery Sparklines</a> web chart library,
 332                                                 <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>
 333
 334                                                 <i class="fa fa-circle"></i> <a href="http://benpickles.github.io/peity/" target="_blank">Peity</a> web chart library,
 335                                                 <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>
 336
 337                                                 <i class="fa fa-circle"></i> <a href="https://rendro.github.io/easy-pie-chart/" target="_blank">Easy Pie Chart</a> web chart library,
 338                                                 <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>
 339
 340                                                 <i class="fa fa-circle"></i> <a href="https://jquery.org/" target="_blank">jQuery</a>,
 341                                                 <i class="fa fa-copyright"></i> Copyright 2015, jQuery Foundation, <a href="https://jquery.org/license/" target="_blank">MIT License</a>
 342
 343                                                 <i class="fa fa-circle"></i> <a href="http://getbootstrap.com/getting-started/" target="_blank">Bootstrap</a>,
 344                                                 <i class="fa fa-copyright"></i> Copyright 2015, Twitter, <a href="http://getbootstrap.com/getting-started/#license-faqs" target="_blank">MIT License</a>
 345
 346                                                 <i class="fa fa-circle"></i> <a href="http://www.bootstraptoggle.com/" target="_blank">Bootstrap Toggle</a>,
 347                                                 <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>
 348
 349                                                 <i class="fa fa-circle"></i> <a href="https://jamesflorentino.github.io/nanoScrollerJS/" target="_blank">NanoScroller</a>,
 350                                                 <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>
 351
 352                                                 <i class="fa fa-circle"></i> <a href="https://github.com/marcj/css-element-queries" target="_blank">CSS Element Queries</a>,
 353                                                 <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>
 354
 355                                                 <i class="fa fa-circle"></i> <a href="http://morrisjs.github.io/morris.js/" target="_blank">morris.js</a>,
 356                                                 <i class="fa fa-copyright"></i> Copyright 2013, Olly Smith, <a href="http://morrisjs.github.io/morris.js/" target="_blank">Simplified BSD License</a>
 357
 358                                                 <i class="fa fa-circle"></i> <a href="http://raphaeljs.com/" target="_blank">Raphaël</a>,
 359                                                 <i class="fa fa-copyright"></i> Copyright 2008, Dmitry Baranovskiy, <a href="http://raphaeljs.com/license.html" target="_blank">MIT License</a>
 360
 361                                                 <i class="fa fa-circle"></i> <a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">FontAwesome</a>,
 362                                                 <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>
 363
 364                                                 <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.
 365                                         </small>
 366                                 </div>
 367                         </div>
 368                 </div>
 369         </div>
 370
 371         <div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="welcomeModalLabel">
 372                 <div class="modal-dialog modal-lg" role="document">
 373                         <div class="modal-content">
 374                                 <div class="modal-header">
 375                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 376                                         <h4 class="modal-title" id="welcomeModalLabel">Welcome to netdata!</h4>
 377                                 </div>
 378                                 <div class="modal-body">
 379                                                 <div class="p">
 380                                                 <b><a href="https://github.com/firehol/netdata/" target="_blank">netdata</a></b> is the fastest way to visualize data. It is a resource efficient, highly optimized system for collecting and visualizing any type of realtime timeseries data, from CPU usage, disk activity, SQL queries, to web site visitors, e-shop orders, revenue and profits.
 381                                                 </div>
 382                                                 <div class="p">
 383                                                 To make a chart in <b><a href="https://github.com/firehol/netdata/" 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/" target="_blank">netdata</a></b> will turn this number to a real time web chart. For collecting these numbers, it supports <a href="https://github.com/firehol/netdata/tree/master/plugins.d" target="_blank">external plugins</a>, even <a href="https://github.com/firehol/netdata/tree/master/charts.d" target="_blank">bash shell plugins</a>. Any computer program, in any language, that can print a few lines of text on its standard output, can be a netdata data collector.
 384                                                 </div>
 385                                                 <div class="p">
 386                                                 <b><a href="https://github.com/firehol/netdata/" 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>%),
 387                                                 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).
 388                                                 </div>
 389                                                 <div class="p">
 390                                                 You can have <b><a href="https://github.com/firehol/netdata/" 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/" target="_blank">netdata</a></b> performance - <a href="https://github.com/firehol/netdata/issues/36" target="_blank">a raspberry pi 2 can sustain 300 charts updates per second</a>!).
 391                                                 </div>
 392                                                 <div class="p">
 393                                                 If you like this project, <b>we need help writing documentation, coding plugins, testing new features, supporting end users.</b>
 394                                                 </div>
 395                                                 <div class="p">
 396                                                 We will be glad to have you on board...
 397                                                 </div>
 398                                 </div>
 399                                 <div class="modal-footer">
 400                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 401                                 </div>
 402                         </div>
 403                 </div>
 404         </div>
 405
 406         <div class="modal fade" id="optionsModal" tabindex="-1" role="dialog" aria-labelledby="optionsModalLabel">
 407                 <div class="modal-dialog modal-lg" role="document">
 408                         <div class="modal-content">
 409                                 <div class="modal-header">
 410                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 411                                         <h4 class="modal-title" id="optionsModalLabel">netdata dashboard options</h4>
 412                                 </div>
 413                                 <div class="modal-body">
 414                                         <form id="optionsForm" method="get" class="form-horizontal">
 415                                                 <div class="form-group">
 416                                                         <table>
 417                                                         <tr class="option-row">
 418                                                                 <td class="option-control">
 419                                                                 <input id="eliminate_zero_dimensions" type="checkbox" checked data-toggle="toggle" data-width="110px">
 420                                                                 </td>
 421                                                                 <td class="option-info"><strong>Eliminate chart dimensions with zero values.</strong><br/>
 422                                                                         <small>When enabled, dimensions that have all their values (within the current view) set to zero will not be transfered from the netdata server, except if all dimensions of the chart are zero, in which case this setting does nothing (all dimensions are transfered and shown). Enable this to lower the data transfered between the browser and netdata, lower the CPU requirements of the browser (fewer lines to draw) and increase the focus on the legend (fewer entries at the legends).</small>
 423                                                                 </td>
 424                                                                 </tr>
 425                                                         <tr class="option-row">
 426                                                                 <td class="option-control"><input id="destroy_on_hide" type="checkbox" data-toggle="toggle" data-width="110px"></td>
 427                                                                 <td class="option-info"><strong>Destroy charts when they are not visible.</strong><br/>
 428                                                                         <small>When enabled, 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 disabled, the not-visible charts will be just hidden to simplify the DOM and speed up the browser. Enable it, to lower the memory requirements of the browser. Disable it for smoother page scrolling.</small>
 429                                                                 </td>
 430                                                                 </tr>
 431                                                         <tr class="option-row">
 432                                                                 <td class="option-control"><input id="parallel_refresher" type="checkbox" checked data-toggle="toggle" data-on="Parallel" data-off="Sequencial" data-width="110px"></td>
 433                                                                 <td class="option-info"><strong>Chart refresh policy.</strong><br/>
 434                                                                         <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>sequencial</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 sequencial if you work on an older/slower computer.</small>
 435                                                                 </td>
 436                                                                 </tr>
 437                                                         <tr class="option-row">
 438                                                                 <td class="option-control"><input id="sync_selection" type="checkbox" checked data-toggle="toggle" data-width="110px"></td>
 439                                                                 <td class="option-info"><strong>Sync hover selection on all charts.</strong><br/>
 440                                                                         <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>
 441                                                                 </td>
 442                                                                 </tr>
 443                                                         <tr class="option-row">
 444                                                                 <td class="option-control"><input id="sync_pan_and_zoom" type="checkbox" checked data-toggle="toggle" data-width="110px"></td>
 445                                                                 <td class="option-info"><strong>Sync pan and zoom on all charts.</strong><br/>
 446                                                                         <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>
 447                                                                 </td>
 448                                                                 </tr>
 449                                                         <tr class="option-row">
 450                                                                 <td class="option-control"><input id="stop_updates_when_focus_is_lost" type="checkbox" checked data-toggle="toggle" data-width="110px"></td>
 451                                                                 <td class="option-info"><strong>Stop updates when this page looses focus.</strong><br/>
 452                                                                         <small>When enabled, the charts will not be updated if the page / tab does not have the focus of the user. When disabled, the charts will always be refreshed. Enable it to lower the CPU requirements of the browser (and extend the battery of laptops and tablets) when this page does not have the focus of the user. Disable it to work on another window (i.e. change the settings of something) and have the charts auto-refresh in another window. </small>
 453                                                                 </td>
 454                                                                 </tr>
 455                                                         </table>
 456                                                 </div>
 457                                         </form>
 458                                 </div>
 459                                 <div class="modal-footer">
 460                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 461                                 </div>
 462                         </div>
 463                 </div>
 464         </div>
 465
 466 </body>
 467 </html>
 468 <script>
 469
 470 var demo_hostname = 'netdata.firehol.org';
 471 // var demo_hostname = 'box';
 472
 473 if(document.location.hostname === demo_hostname) {
 474         document.getElementById('masthead').style.display = 'block';
 475 }
 476
 477 var options = {
 478         sparklines_registry: {},
 479         data: null,
 480         hostname: 'netdata_server', // will be overwritten by the netdata server
 481         categories: new Array(),
 482         categories_idx: {},
 483         families: new Array(),
 484         families_idx: {},
 485
 486         chartsPerRow: 0,
 487         chartsMinWidth: 1450,
 488         chartsHeight: 180,
 489         sparklinesHeight: 60
 490 };
 491
 492 // generate a sparkline
 493 // used in the documentation
 494 function sparkline(chart, dimension, units) {
 495         var key = chart + '.' + dimension;
 496
 497         if(typeof units === 'undefined')
 498                 units = '';
 499
 500         if(typeof options.sparklines_registry[key] === 'undefined')
 501                 options.sparklines_registry[key] = { count: 1 };
 502         else
 503                 options.sparklines_registry[key].count++;
 504
 505         key = key + '.' + options.sparklines_registry[key].count;
 506
 507         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 + ')';
 508
 509         return h;
 510 }
 511
 512 // documentation for each category and chart
 513 var messages = {
 514
 515         // categories / sections
 516         'system': 'Overview of the key system metrices.',
 517         'tc': '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.',
 518         'net': 'Per network interface statistics collected from <code>/proc/net/dev</code>.',
 519         'apps': '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 internaly 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 childs continiously, 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 childs 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 unrealisting utilization for each process group. So, we decided to ignore these values and present only the utilization of <b>the currently running processes</b>.',
 520
 521         // charts
 522         'system.cpu': '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.',
 523         'system.io': '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.',
 524         'system.swapio': '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).',
 525         'system.pgfaults': '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.',
 526         'system.entropy': '<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.',
 527         'system.forks': 'The number of new processes created per second, read from <code>/proc/stat</code>.',
 528         'system.intr': '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.',
 529         'system.interrupts': 'CPU interrupts in detail, read from <code>/proc/interrupts</code>. At the <a href="#cpu">CPUs</a> section, interrupts are analyzed per CPU core.',
 530         'system.softirqs': 'CPU softirqs in detail, read from <code>/proc/softirqs</code>. At the <a href="#cpu">CPUs</a> section, softirqs are analyzed per CPU core.',
 531         'system.processes': '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.',
 532         'system.ctxt': '<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.',
 533         'system.idlejitter': '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 different between the requested and the actual duration of the sleep, is the <b>idle jitter</b>. This number is useful in realtime environments, where CPU jitter can affect the quality of the service (like VoIP media gateways).',
 534         'system.ipv4': 'Total IPv4 Traffic, read from <code>/proc/net/netstat</code>. This includes <code>lo</code> device traffic.',
 535         'system.ram': 'System memory, read from <code>/proc/meminfo</code>.',
 536         'system.swap': 'System swap memory, read from <code>/proc/meminfo</code>.',
 537
 538         // just a line to allow ending all entries above with comma
 539         'end': 'end'
 540 };
 541
 542 function screenWidth() {
 543         return (($(window).width() * 0.95) - 50);
 544 }
 545
 546 function chartsPerRow(total) {
 547         if(options.chartsPerRow === 0) {
 548                 width = Math.floor(total / options.chartsMinWidth);
 549                 if(width === 0) width = 1;
 550                 return width;
 551         }
 552         else return options.chartsPerRow;
 553 }
 554
 555 function chartsPrioritySort(a, b) {
 556         if(a.priority === b.priority) {
 557                 if(a.name < b.name) return -1;
 558         }
 559         else if(a.priority < b.priority) return -1;
 560         return 1;
 561 }
 562
 563 function uniq(array, find_key, get_result) {
 564         if(typeof get_result === 'undefined' || get_result === null)
 565                 get_result = find_key;
 566
 567         var idx = {};
 568         var result = new Array();
 569
 570         $.each(array, function(i, c) {
 571                 key = find_key(c);
 572                 if(typeof idx[key] === 'undefined') {
 573                         idx[key] = true;
 574                         result.push(get_result(c));
 575                 }
 576         });
 577         return result;
 578 }
 579
 580 function uniq_with_list(array, find_key_function) {
 581         var idx = {};
 582         var result = new Array();
 583
 584         $.each(array, function(i, c) {
 585                 key = find_key_function(c);
 586                 if(typeof idx[key] === 'undefined') {
 587                         idx[key] = new Array();
 588                         result.push( { name: key, values: idx[key] } );
 589                 }
 590                 idx[key].push(c);
 591         });
 592         result.sort(function(a, b) {
 593                 if(a.name < b.name) return -1;
 594                 return 1;
 595         });
 596         return result;
 597 }
 598
 599 function prepareScreen(data) {
 600         // console.log('NETDATA is paused - ready to prepare the screen');
 601         // console.log(data);
 602
 603         options.data = data;
 604         options.hostname = data.hostname;
 605         document.getElementById('hostname').innerHTML = options.hostname;
 606         document.title = options.hostname + ' dashboard';
 607         var charts = data.charts;
 608
 609         $.each(charts, function(i, c) {
 610                 if(c.enabled === true) {
 611
 612                         // find the category of the chart
 613                         c.category = c.type.split('.')[0];
 614
 615                         var tmp = c.category.split('_')[0];
 616                         if(tmp === 'net' || tmp === 'disk')
 617                                 c.category = tmp;
 618
 619                         if(c.category === 'cpu') {
 620                                 if(c.id.match(/^cpu\.cpu[0-9]+$/)) {
 621                                         c.family = 'Utilization';
 622                                 }
 623                                 else if(c.id.match(/^cpu\.cpu[0-9]+_interrupts$/)) {
 624                                         c.family = 'Interrupts';
 625                                 }
 626                                 else if(c.id.match(/^cpu\.cpu[0-9]+_softirqs$/)) {
 627                                         c.family = 'SoftIRQs';
 628                                 }
 629                         }
 630
 631                         switch(c.category) {
 632                                 case 'system':
 633                                         c.category_priority = 10;
 634                                         c.category_title = 'System Summary';
 635                                         c.glyphicon = "glyphicon-dashboard";
 636                                         break;
 637
 638                                 case 'tc':
 639                                         c.category_priority = 20;
 640                                         c.category_title = 'Quality Of Service';
 641                                         c.glyphicon = "glyphicon-random";
 642                                         break;
 643
 644                                 case 'net':
 645                                         c.category_priority = 30;
 646                                         c.category_title = 'Network Interfaces';
 647                                         c.glyphicon = "glyphicon-transfer";
 648                                         break;
 649
 650                                 case 'apps':
 651                                         c.category_priority = 40;
 652                                         c.category_title = 'Applications Monitoring';
 653                                         c.glyphicon = "glyphicon-tasks";
 654                                         break;
 655
 656                                 case 'ipvs':
 657                                         c.category_priority = 50;
 658                                         c.category_title = 'IP Virtual Server';
 659                                         c.glyphicon = "glyphicon-transfer";
 660                                         break;
 661
 662                                 case 'netfilter':
 663                                         c.category_priority = 60;
 664                                         c.category_title = 'Netfilter / IPTables';
 665                                         c.glyphicon = "glyphicon-cloud";
 666                                         break;
 667
 668                                 case 'ipv4':
 669                                         c.category_priority = 70;
 670                                         c.category_title = 'IPv4 Summary';
 671                                         c.glyphicon = "glyphicon-globe";
 672                                         break;
 673
 674                                 case 'mem':
 675                                         c.category_priority = 80;
 676                                         c.category_title = 'Memory';
 677                                         c.glyphicon = "glyphicon-dashboard";
 678                                         break;
 679
 680                                 case 'cpu':
 681                                         c.category_priority = 90;
 682                                         c.category_title = 'CPU Cores';
 683                                         c.glyphicon = "glyphicon-dashboard";
 684                                         break;
 685
 686                                 case 'disk':
 687                                         c.category_priority = 100;
 688                                         c.category_title = 'Disks';
 689                                         c.glyphicon = "glyphicon-hdd";
 690                                         break;
 691
 692                                 case 'nfsd':
 693                                         c.category_priority = 110;
 694                                         c.category_title = 'NFS Server';
 695                                         c.glyphicon = "glyphicon-hdd";
 696                                         break;
 697
 698                                 case 'squid':
 699                                         c.category_priority = 140;
 700                                         c.category_title = 'Proxy Server';
 701                                         c.glyphicon = "glyphicon-link";
 702                                         break;
 703
 704                                 case 'netdata':
 705                                         c.category_priority = 150;
 706                                         c.category_title = 'Netdata Monitoring';
 707                                         c.glyphicon = "glyphicon-thumbs-up";
 708                                         break;
 709
 710                                 case 'sensors':
 711                                         c.category_priority = 160;
 712                                         c.category_title = 'Hardware Sensors';
 713                                         c.glyphicon = "glyphicon-thumbs-up";
 714                                         break;
 715
 716                                 case 'postfix':
 717                                         c.category_priority = 170;
 718                                         c.category_title = 'Mail Server';
 719                                         c.glyphicon = "glyphicon-thumbs-up";
 720                                         break;
 721
 722                                 case 'example':
 723                                         c.category_priority = 100000;
 724                                         c.category_title = 'Example Plugins';
 725                                         c.glyphicon = "glyphicon-search";
 726                                         break;
 727
 728                                 default:
 729                                         c.category_priority = 150;
 730                                         c.category_title = c.type;
 731                                         c.glyphicon = "glyphicon-dashboard";
 732                                         break;
 733                         }
 734
 735                         // find the unique categories
 736                         if(typeof options.categories_idx[c.category] === 'undefined') {
 737                                 options.categories_idx[c.category] = {
 738                                         charts: new Array()
 739                                 }
 740                                 options.categories.push({
 741                                         name: c.category,
 742                                         title: c.category_title,
 743                                         priority: c.category_priority,
 744                                         glyphicon: c.glyphicon,
 745                                         charts: options.categories_idx[c.category].charts
 746                                 });
 747                         }
 748                         options.categories_idx[c.category].charts.push(c);
 749
 750                         // find the unique families
 751                         if(typeof options.families_idx[c.family] === 'undefined') {
 752                                 options.families_idx[c.family] = {
 753                                         charts: new Array()
 754                                 };
 755                                 options.families.push({
 756                                         name: c.family,
 757                                         title: c.family,
 758                                         priority: c.category_priority,
 759                                         glyphicon: c.glyphicon,
 760                                         charts: options.categories_idx[c.category].charts
 761                                 });
 762                         }
 763                         options.families_idx[c.family].charts.push(c);
 764                 }
 765         });
 766
 767         function prioritySort(a, b) {
 768                 if(a.priority < b.priority) return -1;
 769                 if(a.priority > b.priority) return 1;
 770                 if(a.name < b.name) return -1;
 771                 return 1;
 772         }
 773
 774         // sort all of them
 775         options.categories.sort(prioritySort);
 776         options.families.sort(prioritySort);
 777         $.each(options.families,   function(i, c) { c.charts.sort(prioritySort); });
 778
 779         var div = document.getElementById('charts_div');
 780         var pcent_width = Math.floor(100 / chartsPerRow($(div).width()));
 781
 782         // find the proper duration for per-second updates
 783         var duration = Math.round(($(div).width() * pcent_width / 100 * data.update_every / 3) / 60) * 60;
 784         var html = '';
 785         var sidebar = '<ul class="nav dashboard-sidenav" data-spy="affix" id="sidebar_ul">';
 786
 787         function getMessage(id) {
 788                 if(typeof messages[id] !== 'undefined')
 789                         return '<div class="chart-message" role="document">' + messages[id] + '</div>';
 790                 else
 791                         return '';
 792         }
 793
 794         // render the charts
 795         $.each(options.categories, function(i, t) {
 796                 t.charts.sort(prioritySort);
 797
 798                 sidebar += '<li class="' + ((i === 0)?'active':'').toString() + '"><a href="#' + t.name + '">' + t.title + '</a>';
 799                 html += '<div role="section"><div role="sectionhead"><h1 id="' + t.name + '" role="heading">' + t.title + '</h1>' + getMessage(t.name) + '</div><div id="' + t.name + '" role="document">';
 800
 801                 if(t.name === 'cpu') {
 802                         var families = uniq_with_list(t.charts, function(c) { return c.family; });
 803
 804                         sidebar += '<ul class="nav">';
 805                         $.each(families, function(j, c) {
 806                                 sidebar += '<li class><a href="#' + t.name + '_' + c.name + '">' + c.name + '</a></li>';
 807                                 html += '<div class="netdata-group-container" id="family_' + t.name + '_' + c.name + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + t.name + '_' + c.name + '" class="netdata-chart-alignment" role="heading">' + c.name + '</h2>';
 808                                 $.each(c.values, function(x, f) {
 809                                         var c = null;
 810                                         var h = options.chartsHeight;
 811
 812                                         html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
 813                                                 + ' data-width="100%"'
 814                                                 + ' data-height="' + h.toString() + 'px"'
 815                                                 + ' data-before="0"'
 816                                                 + ' data-after="-' + duration.toString() + '"'
 817                                                 + ' data-colors="' + c + '"'
 818                                                 + ' role="application"></div>';
 819                                 });
 820                                 html += '</div>'; // netdata-group-container
 821                         });
 822                         sidebar += '</ul>';
 823                 }
 824                 else if(t.name === 'net' || t.name === 'tc') {
 825                         var interfaces = uniq_with_list(t.charts, function(c) { return c.family; });
 826
 827                         sidebar += '<ul class="nav">';
 828                         $.each(interfaces, function(j, c) {
 829                                 sidebar += '<li class><a href="#' + t.name + '_' + c.name + '">' + c.name + '</a></li>';
 830                                 html += '<div class="netdata-group-container" id="interface_' + t.name + '_' + c.name + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + t.name + '_' + c.name + '" class="netdata-chart-alignment" role="heading">' + c.name + '</h2>';
 831                                 $.each(c.values, function(x, f) {
 832                                         var c = null;
 833                                         var h = options.chartsHeight / 2;
 834                                         switch(f.type) {
 835                                                 case 'net'        : h = options.chartsHeight; break;
 836                                                 case 'tc'         : h = options.chartsHeight; break;
 837                                         }
 838
 839                                         html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
 840                                                 + ' data-width="100%"'
 841                                                 + ' data-height="' + h.toString() + 'px"'
 842                                                 + ' data-before="0"'
 843                                                 + ' data-after="-' + duration.toString() + '"'
 844                                                 + ' data-colors="' + c + '"'
 845                                                 + ' role="application"></div>';
 846                                 });
 847                                 html += '</div>'; // netdata-group-container
 848                         });
 849                         sidebar += '</ul>';
 850                 }
 851                 else if(t.name === 'disk') {
 852                         var disks = uniq_with_list(t.charts, function(c) { return c.family; });
 853
 854                         sidebar += '<ul class="nav">';
 855                         $.each(disks, function(j, c) {
 856                                 sidebar += '<li class><a href="#' + c.name + '">' + c.name + '</a></li>';
 857                                 html += '<div class="netdata-group-container" id="disk_' + c.name + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + c.name + '" class="netdata-chart-alignment" role="heading">' + c.name + '</h2>';
 858                                 $.each(c.values, function(x, f) {
 859                                         var c = null;
 860                                         var h = options.chartsHeight / 2;
 861                                         switch(f.type) {
 862                                                 case 'disk'        : h = options.chartsHeight; break;
 863                                                 case 'disk_backlog': c = '#DD4477'; break;
 864                                                 case 'disk_util'   : c = '#109618'; break;
 865                                                 case 'disk_qops'   : c = '#E67300'; break;
 866                                         }
 867
 868                                         html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
 869                                                 + ' data-width="100%"'
 870                                                 + ' data-height="' + h.toString() + 'px"'
 871                                                 + ' data-before="0"'
 872                                                 + ' data-after="-' + duration.toString() + '"'
 873                                                 + ' data-colors="' + c + '"'
 874                                                 + ' role="application"></div>';
 875                                 });
 876                                 html += '</div>'; // netdata-group-container
 877                         });
 878                         sidebar += '</ul>';
 879                 }
 880                 else if(t.name === 'apps') {
 881                         $.each(t.charts, function(x, f) {
 882                                 var c = null;
 883                                 var h = options.chartsHeight / 2;
 884                                 switch(f.id) {
 885                                         case 'apps.cpu'         : h = options.chartsHeight; break;
 886                                         case 'apps.preads'      : h = options.chartsHeight; break;
 887                                         case 'apps.pwrites'     : h = options.chartsHeight; break;
 888                                         case 'apps.mem'         : h = options.chartsHeight; break;
 889                                         case 'apps.major_faults': h = options.chartsHeight; break;
 890                                 }
 891
 892                                 html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
 893                                         + ' data-width="100%"'
 894                                         + ' data-height="' + h.toString() + 'px"'
 895                                         + ' data-before="0"'
 896                                         + ' data-after="-' + duration.toString() + '"'
 897                                         + ' data-colors="' + c + '"'
 898                                         + ' role="application"></div>';
 899                         });
 900                 }
 901                 else {
 902                         $.each(t.charts, function(x, c) {
 903                                 html += getMessage(c.id) + '<div data-netdata="' + c.id + '"'
 904                                         + ' data-width="' + pcent_width.toString() + '%"'
 905                                         + ' data-height="' + options.chartsHeight.toString() + 'px"'
 906                                         + ' data-before="0"'
 907                                         + ' data-after="-' + duration.toString() + '"'
 908                                         + ' role="application"></div>';
 909                         });
 910                 }
 911
 912                 sidebar += '</li>';
 913                 html += '</div>'; // document
 914                 html += '</div>'; // section
 915                 html += '<hr role="separator"/>';
 916         });
 917         sidebar += '</ul>';
 918 /*
 919         // show the colors
 920         html += '<br/><div class="row">'
 921         $.each(NETDATA.colors, function(i, c){
 922                 html += '<div style="display: inline-block;"><div style="display: inline-block; width: 100px; height: 100px; background: ' + c + ';"></div><br/>' + c + '</div>';
 923         });
 924         html += '</div>'
 925 */
 926         div.innerHTML = html;
 927         document.getElementById('sidebar').innerHTML = sidebar;
 928
 929         // resize all charts - without starting the background thread
 930         // this has to be done while NETDATA is paused
 931         // if we ommit this, the affix menu will be wrong, since all
 932         // the Dom elements are initially zero-sized
 933         NETDATA.parseDom();
 934
 935         // let it run (update the charts)
 936         NETDATA.unpause();
 937
 938         // check if we have to jump to a specific section
 939         var hash = location.hash.replace('#','');
 940         if(hash != '') {
 941                 // Clear the hash in the URL
 942                 // location.hash = '';   // delete front "//" if you want to change the address bar
 943                 var offset = $(location.hash).offset();
 944                 if(typeof offset !== 'undefined')
 945                         $('html, body').animate({ scrollTop: offset.top }, 0);
 946         }
 947
 948         /* activate bootstrap sidebar (affix) */
 949         $('#sidebar').affix({
 950                 offset: {
 951                         top: (document.location.hostname === demo_hostname)?150:0,
 952                         bottom: 0
 953                 }
 954         });
 955
 956         /* fix scrolling of very long affix lists
 957            http://stackoverflow.com/questions/21691585/bootstrap-3-1-0-affix-too-long
 958          */
 959         $('#sidebar').on('affixed.bs.affix', function() {
 960                 $(this).removeAttr('style');
 961         });
 962
 963         /* activate bootstrap scrollspy (needed for sidebar) */
 964         $(document.body).scrollspy({
 965                 target: '#sidebar',
 966                 offset: $(window).height() / 3 // controls the diff of the <hX> element to the top, to select it
 967         });
 968
 969         document.getElementById('footer').style.display = 'block';
 970
 971         // default options
 972         $('#eliminate_zero_dimensions').bootstrapToggle(NETDATA.options.current.eliminate_zero_dimensions?'on':'off');
 973         $('#destroy_on_hide').bootstrapToggle(NETDATA.options.current.destroy_on_hide?'on':'off');
 974         $('#parallel_refresher').bootstrapToggle(NETDATA.options.current.parallel_refresher?'on':'off');
 975         $('#sync_selection').bootstrapToggle(NETDATA.options.current.sync_selection?'on':'off');
 976         $('#sync_pan_and_zoom').bootstrapToggle(NETDATA.options.current.sync_pan_and_zoom?'on':'off');
 977         $('#stop_updates_when_focus_is_lost').bootstrapToggle(NETDATA.options.current.stop_updates_when_focus_is_lost?'on':'off');
 978
 979         // handle options changes
 980         $('#eliminate_zero_dimensions').change(function() { NETDATA.options.current.eliminate_zero_dimensions = $(this).prop('checked'); });
 981         $('#destroy_on_hide').change(function() { NETDATA.options.current.destroy_on_hide = $(this).prop('checked'); });
 982         $('#parallel_refresher').change(function() { NETDATA.options.current.parallel_refresher = $(this).prop('checked'); });
 983         $('#sync_selection').change(function() { NETDATA.options.current.sync_selection = $(this).prop('checked'); });
 984         $('#sync_pan_and_zoom').change(function() { NETDATA.options.current.sync_pan_and_zoom = $(this).prop('checked'); });
 985         $('#stop_updates_when_focus_is_lost').change(function() { NETDATA.options.current.stop_updates_when_focus_is_lost = $(this).prop('checked'); });
 986
 987         if(document.location.hostname === demo_hostname)
 988                 setTimeout(function() {
 989                         $('#welcomeModal').modal();
 990                 }, 1000);
 991 }
 992
 993 NETDATA.ready(function() {
 994
 995         $('#welcomeModal').on('hidden.bs.modal', function (e) {
 996                 NETDATA.updatedDom();
 997         });
 998         $('#welcomeModal').on('shown.bs.modal', function (e) {
 999                 NETDATA.updatedDom();
1000         });
1001
1002         // download all the charts the server knows
1003         NETDATA.chartRegistry.downloadAll(NETDATA.serverDefault, function(data) {
1004
1005                 // pause the NETDATA thread that updates the charts
1006                 NETDATA.pause(function() {
1007
1008                         // prepare our DOM
1009                         // this will be called when NETDATA is paused
1010                         prepareScreen(data);
1011                 });
1012         });
1013 });
1014
1015 </script>