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         .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         .dashboard-sidebar {
 113                 max-height: calc(100% - 70px) !important;
 114                 overflow-y: auto;
 115                 /*width: 220px !important;*/
 116         }
 117
 118         /* By default it's not affixed in mobile views, so undo that */
 119         .dashboard-sidebar.affix {
 120                 position: static;
 121         }
 122         @media (min-width: 768px) {
 123                 .dashboard-sidebar {
 124                         padding-left: 20px;
 125                 }
 126         }
 127
 128         .affix {
 129                 position: static;
 130                 top: 70px !important;
 131                 /*width: 220px;*/
 132         }
 133         .affix-top {
 134                 /*width: 220px;*/
 135         }
 136
 137         /* First level of nav */
 138         .dashboard-sidenav {
 139                 margin-top: 20px;
 140                 margin-bottom: 20px;
 141         }
 142
 143         /* All levels of nav */
 144         .dashboard-sidebar .nav > li > a {
 145                 display: block;
 146                 padding: 4px 20px;
 147                 font-size: 13px;
 148                 font-weight: 500;
 149                 color: #767676;
 150         }
 151         .dashboard-sidebar .nav > li > a:hover,
 152         .dashboard-sidebar .nav > li > a:focus {
 153                 padding-left: 19px;
 154                 color: #563d7c;
 155                 text-decoration: none;
 156                 background-color: transparent;
 157                 border-left: 1px solid #563d7c;
 158         }
 159         .dashboard-sidebar .nav > .active > a,
 160         .dashboard-sidebar .nav > .active:hover > a,
 161         .dashboard-sidebar .nav > .active:focus > a {
 162                 padding-left: 18px;
 163                 font-weight: bold;
 164                 color: #563d7c;
 165                 background-color: transparent;
 166                 border-left: 2px solid #563d7c;
 167         }
 168
 169         /* Nav: second level (shown on .active) */
 170         .dashboard-sidebar .nav .nav {
 171                 display: none; /* Hide by default, but at >768px, show it */
 172                 padding-bottom: 10px;
 173         }
 174         .dashboard-sidebar .nav .nav > li > a {
 175                 padding-top: 1px;
 176                 padding-bottom: 1px;
 177                 padding-left: 30px;
 178                 font-size: 12px;
 179                 font-weight: normal;
 180         }
 181         .dashboard-sidebar .nav .nav > li > a:hover,
 182         .dashboard-sidebar .nav .nav > li > a:focus {
 183                 padding-left: 29px;
 184         }
 185         .dashboard-sidebar .nav .nav > .active > a,
 186         .dashboard-sidebar .nav .nav > .active:hover > a,
 187         .dashboard-sidebar .nav .nav > .active:focus > a {
 188                 padding-left: 28px;
 189                 font-weight: 500;
 190         }
 191
 192         /* Back to top (hidden on mobile) */
 193         .back-to-top,
 194         .dashboard-theme-toggle {
 195                 display: none;
 196                 padding: 4px 10px;
 197                 margin-top: 10px;
 198                 margin-left: 10px;
 199                 font-size: 12px;
 200                 font-weight: 500;
 201                 color: #999;
 202         }
 203         .back-to-top:hover,
 204         .dashboard-theme-toggle:hover {
 205                 color: #563d7c;
 206                 text-decoration: none;
 207         }
 208         .dashboard-theme-toggle {
 209                 margin-top: 0;
 210         }
 211
 212         @media (min-width: 768px) {
 213                 .back-to-top,
 214                 .dashboard-theme-toggle {
 215                         display: block;
 216                 }
 217         }
 218
 219         /* Show and affix the side nav when space allows it */
 220         @media (min-width: 992px) {
 221                 .dashboard-sidebar .nav > .active > ul {
 222                         display: block;
 223                 }
 224                 /* Widen the fixed sidebar */
 225                 .dashboard-sidebar.affix,
 226                 .dashboard-sidebar.affix-bottom {
 227                         width: 213px;
 228                 }
 229                 .dashboard-sidebar.affix {
 230                         position: fixed; /* Undo the static from mobile first approach */
 231                         top: 20px;
 232                 }
 233                 .dashboard-sidebar.affix-bottom {
 234                         position: absolute; /* Undo the static from mobile first approach */
 235                 }
 236                 .dashboard-sidebar.affix-bottom .dashboard-sidenav,
 237                 .dashboard-sidebar.affix .dashboard-sidenav {
 238                         margin-top: 0;
 239                         margin-bottom: 0;
 240                 }
 241         }
 242         @media (min-width: 1200px) {
 243                 /* Widen the fixed sidebar again */
 244                 .dashboard-sidebar.affix-bottom,
 245                 .dashboard-sidebar.affix {
 246                         width: 263px;
 247                 }
 248         }
 249         </style>
 250
 251         <!-- you can set your netdata server globally, by ucommenting this -->
 252         <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
 253         <!-- <script> netdataServer = "http://box:19999"; </script> -->
 254
 255         <!-- load the dashboard manager - it will do the rest -->
 256         <script type="text/javascript" src="dashboard.js?v19"></script>
 257 </head>
 258
 259 <body data-spy="scroll" data-target="#sidebar">
 260         <nav class="navbar navbar-default navbar-fixed-top" role="banner">
 261                 <div class="container">
 262                         <div class="navbar-header">
 263                                 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
 264                                         <span class="sr-only">Toggle navigation</span>
 265                                         <span class="icon-bar"></span>
 266                                         <span class="icon-bar"></span>
 267                                         <span class="icon-bar"></span>
 268                                 </button>
 269                                 <a href="/" class="navbar-brand" id="hostname">netdata</a>
 270                         </div>
 271                         <nav class="collapse navbar-collapse navbar-right" role="navigation">
 272                                 <ul class="nav navbar-nav">
 273                                         <li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-cog"></i> settings</a></li>
 274                                         <li><a href="https://github.com/firehol/netdata" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
 275                                         <li><a href="old/" class="btn" target="_blank"><i class="fa fa-step-backward"></i> old dashboard</a></li>
 276 <!--                                    <li><a href="#sec">Visualize</a></li>
 277                                         <li><a href="#sec">Prototype</a></li>
 278 -->                             </ul>
 279                         </nav>
 280                 </div>
 281         </nav>
 282
 283         <div id="masthead" style="display: none;">
 284                 <div class="container">
 285                         <div class="row">
 286                                 <div class="col-md-7">
 287                                         <h1>Netdata Dashboard
 288                                                 <p class="lead">Real time data collection and graphs...</p>
 289                                         </h1>
 290                                 </div>
 291                                 <div class="col-md-5">
 292                                         <div class="well well-lg">
 293                                                 <div class="row">
 294                                                 <div class="col-md-6">
 295                                                         <b>Drag</b> charts to pan.
 296                                                         <b>Shift + wheel</b> on them, to zoom in and out.
 297                                                         <b>Double-click</b> on them, to reset.
 298                                                         <b>Hover</b> on them too!
 299                                                         </div>
 300                                                 <div class="col-md-6">
 301                                                         <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>
 302                                                         </div>
 303                                                 </div>
 304                                         </div>
 305                                 </div>
 306                         </div>
 307                 </div>
 308         </div>
 309
 310         <div class="container">
 311                 <div class="row">
 312                         <div class="col-md-10" role="main">
 313                                 <div id="charts_div"></div>
 314                         </div>
 315                         <div class="col-md-2" role="complementary">
 316                                 <nav class="dashboard-sidebar hidden-print hidden-xs hidden-sm" id="sidebar" role="menu"></nav>
 317                         </div>
 318                 </div>
 319         </div>
 320
 321         <div id="footer" class="container" style="display: none;">
 322                 <div class="row">
 323                         <div class="col-md-10" role="main">
 324                                 <div class="p">
 325                                         <big><a href="https://github.com/firehol/netdata" target="_blank">netdata</a></big><br/>
 326                                         <i class="fa fa-copyright"></i> Copyright 2016, Costa Tsaousis.<br/>
 327                                         Released under <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GPL v3 or later</a>.<br/>
 328                                 </div>
 329                                 <div class="p">
 330                                         <small>
 331                                                 <a href="https://github.com/firehol/netdata" target="_blank">netdata</a> re-distributes these software tools:
 332
 333                                                 <i class="fa fa-circle"></i> The excellent <a href="http://dygraphs.com/" target="_blank">Dygraphs.com</a> web chart library,
 334                                                 <i class="fa fa-copyright"></i> Copyright 2009, Dan Vanderkam, <a href="http://dygraphs.com/legal.html" target="_blank">MIT License</a>
 335
 336                                                 <i class="fa fa-circle"></i> <a href="http://omnipotent.net/jquery.sparkline/" target="_blank">jQuery Sparklines</a> web chart library,
 337                                                 <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>
 338
 339                                                 <i class="fa fa-circle"></i> <a href="http://benpickles.github.io/peity/" target="_blank">Peity</a> web chart library,
 340                                                 <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>
 341
 342                                                 <i class="fa fa-circle"></i> <a href="https://rendro.github.io/easy-pie-chart/" target="_blank">Easy Pie Chart</a> web chart library,
 343                                                 <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>
 344
 345                                                 <i class="fa fa-circle"></i> <a href="http://bernii.github.io/gauge.js/" target="_blank">Gauge.js</a> web chart library,
 346                                                 <i class="fa fa-copyright"></i> Copyright, Bernard Kobos, <a href="http://bernii.github.io/gauge.js/" target="_blank">MIT License</a>
 347
 348                                                 <i class="fa fa-circle"></i> <a href="https://jquery.org/" target="_blank">jQuery</a>,
 349                                                 <i class="fa fa-copyright"></i> Copyright 2015, jQuery Foundation, <a href="https://jquery.org/license/" target="_blank">MIT License</a>
 350
 351                                                 <i class="fa fa-circle"></i> <a href="http://getbootstrap.com/getting-started/" target="_blank">Bootstrap</a>,
 352                                                 <i class="fa fa-copyright"></i> Copyright 2015, Twitter, <a href="http://getbootstrap.com/getting-started/#license-faqs" target="_blank">MIT License</a>
 353
 354                                                 <i class="fa fa-circle"></i> <a href="http://www.bootstraptoggle.com/" target="_blank">Bootstrap Toggle</a>,
 355                                                 <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>
 356
 357                                                 <i class="fa fa-circle"></i> <a href="https://jamesflorentino.github.io/nanoScrollerJS/" target="_blank">NanoScroller</a>,
 358                                                 <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>
 359
 360                                                 <i class="fa fa-circle"></i> <a href="https://github.com/marcj/css-element-queries" target="_blank">CSS Element Queries</a>,
 361                                                 <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>
 362
 363                                                 <i class="fa fa-circle"></i> <a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">FontAwesome</a>,
 364                                                 <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>
 365
 366                                                 <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.
 367
 368                                                 <i class="fa fa-circle"></i> <a href="http://morrisjs.github.io/morris.js/" target="_blank">morris.js</a>,
 369                                                 <i class="fa fa-copyright"></i> Copyright 2013, Olly Smith, <a href="http://morrisjs.github.io/morris.js/" target="_blank">Simplified BSD License</a>
 370
 371                                                 <i class="fa fa-circle"></i> <a href="http://raphaeljs.com/" target="_blank">Raphaël</a>,
 372                                                 <i class="fa fa-copyright"></i> Copyright 2008, Dmitry Baranovskiy, <a href="http://raphaeljs.com/license.html" target="_blank">MIT License</a>
 373
 374                                                 <i class="fa fa-circle"></i> <a href="http://C3js.org/" target="_blank">C3</a>,
 375                                                 <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>
 376
 377                                                 <i class="fa fa-circle"></i> <a href="http://D3js.org/" target="_blank">D3</a>,
 378                                                 <i class="fa fa-copyright"></i> Copyright 2015, Mike Bostock, <a href="http://opensource.org/licenses/BSD-3-Clause" target="_blank">BSD License</a>
 379
 380                                         </small>
 381                                 </div>
 382                         </div>
 383                 </div>
 384         </div>
 385
 386         <div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="welcomeModalLabel">
 387                 <div class="modal-dialog modal-lg" role="document">
 388                         <div class="modal-content">
 389                                 <div class="modal-header">
 390                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 391                                         <h4 class="modal-title" id="welcomeModalLabel">Welcome to netdata!</h4>
 392                                 </div>
 393                                 <div class="modal-body">
 394                                                 <div class="p">
 395                                                 <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.
 396                                                 </div>
 397                                                 <div class="p">
 398                                                 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.
 399                                                 </div>
 400                                                 <div class="p">
 401                                                 <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>%),
 402                                                 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).
 403                                                 </div>
 404                                                 <div class="p">
 405                                                 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>!).
 406                                                 </div>
 407                                                 <div class="p">
 408                                                 If you like this project, <b>we need help writing documentation, coding plugins, testing new features, supporting end users.</b>
 409                                                 </div>
 410                                                 <div class="p">
 411                                                 We will be glad to have you on board...
 412                                                 </div>
 413                                 </div>
 414                                 <div class="modal-footer">
 415                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 416                                 </div>
 417                         </div>
 418                 </div>
 419         </div>
 420
 421         <div class="modal fade" id="optionsModal" tabindex="-1" role="dialog" aria-labelledby="optionsModalLabel">
 422                 <div class="modal-dialog modal-lg" role="document">
 423                         <div class="modal-content">
 424                                 <div class="modal-header">
 425                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 426                                         <h4 class="modal-title" id="optionsModalLabel">netdata dashboard options</h4>
 427                                 </div>
 428                                 <div class="modal-body">
 429                                         <form id="optionsForm" method="get" class="form-horizontal">
 430                                                 <div class="form-group">
 431                                                         <center>
 432                                                                 <small style="color: #BBBBBB;">Settings take effect immediately and are saved permanently to browser local storage (except the refresh on focus / always option).
 433                                                                 <br/>
 434                                                                 To reset all options (including charts sizes) to their defaults, click <a href="#" onclick="NETDATA.resetOptions(); return false;">here</a>.</small>
 435                                                         </center>
 436
 437                                                         <table>
 438                                                         <tr class="option-row">
 439                                                                 <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>
 440                                                                 <td class="option-info"><strong>When to refresh the charts?</strong><br/>
 441                                                                         <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>
 442                                                                 </td>
 443                                                                 </tr>
 444                                                         <tr class="option-row">
 445                                                                 <td class="option-control">
 446                                                                 <input id="eliminate_zero_dimensions" type="checkbox" checked data-toggle="toggle" data-on="Non Zero" data-off="All" data-width="110px">
 447                                                                 </td>
 448                                                                 <td class="option-info"><strong>Which dimensions to show?</strong><br/>
 449                                                                         <small>When set to <b>Non Zero</b>, 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). When set to <b>All</b>, all dimensions will always be shown. Set it to <b>Non Zero</b> to lower the data transfered 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>
 450                                                                 </td>
 451                                                                 </tr>
 452                                                         <tr class="option-row">
 453                                                                 <td class="option-control"><input id="destroy_on_hide" type="checkbox" data-toggle="toggle" data-on="Destroy" data-off="Hide" data-width="110px"></td>
 454                                                                 <td class="option-info"><strong>How to handle hidden charts?</strong><br/>
 455                                                                         <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>
 456                                                                 </td>
 457                                                                 </tr>
 458                                                         <tr class="option-row">
 459                                                                 <td class="option-control"><input id="parallel_refresher" type="checkbox" checked data-toggle="toggle" data-on="Parallel" data-off="Sequencial" data-width="110px"></td>
 460                                                                 <td class="option-info"><strong>Which chart refresh policy to use?</strong><br/>
 461                                                                         <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>
 462                                                                 </td>
 463                                                                 </tr>
 464                                                         <tr class="option-row" id="concurrent_refreshes_row">
 465                                                                 <td class="option-control"></td>
 466                                                                 <td class="option-info">
 467                                                                         <table>
 468                                                                         <tr class="option-row">
 469                                                                         <td class="option-control">
 470                                                                         <input id="concurrent_refreshes" type="checkbox" checked data-toggle="toggle" data-on="Resync" data-off="Best Effort" data-width="110px">
 471                                                                         </td>
 472                                                                         <td class="option-info">
 473                                                                         <strong>Shall we re-sync chart refreshes?</strong><br/>
 474                                                                         <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>
 475                                                                         </td>
 476                                                                         </tr>
 477                                                                         </table>
 478                                                                 </td>
 479                                                                 </tr>
 480                                                         <tr class="option-row">
 481                                                                 <td class="option-control"><input id="sync_selection" type="checkbox" checked data-toggle="toggle" data-on="Sync" data-off="Don't Sync" data-width="110px"></td>
 482                                                                 <td class="option-info"><strong>Sync hover selection on all charts?</strong><br/>
 483                                                                         <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>
 484                                                                 </td>
 485                                                                 </tr>
 486                                                         <tr class="option-row">
 487                                                                 <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-width="110px"></td>
 488                                                                 <td class="option-info"><strong>Sync pan and zoom on all charts?</strong><br/>
 489                                                                         <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>
 490                                                                 </td>
 491                                                                 </tr>
 492                                                         <tr class="option-row">
 493                                                                 <td class="option-control"><input id="smooth_plot" type="checkbox" checked data-toggle="toggle"  data-on="Smooth" data-off="Rough" data-width="110px"></td>
 494                                                                 <td class="option-info"><strong>Enable Bézier lines on charts?</strong><br/>
 495                                                                         <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.</small>
 496                                                                 </td>
 497                                                                 </tr>
 498                                                         </table>
 499                                                 </div>
 500                                         </form>
 501                                 </div>
 502                                 <div class="modal-footer">
 503                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 504                                 </div>
 505                         </div>
 506                 </div>
 507         </div>
 508
 509 </body>
 510 </html>
 511 <script>
 512
 513 var demo_hostname = 'netdata.firehol.org';
 514 // var demo_hostname = 'box';
 515
 516 if(document.location.hostname === demo_hostname) {
 517         document.getElementById('masthead').style.display = 'block';
 518 }
 519
 520 var options = {
 521         sparklines_registry: {},
 522         interfaces_registry: {},
 523         data: null,
 524         hostname: 'netdata_server', // will be overwritten by the netdata server
 525         categories: new Array(),
 526         categories_idx: {},
 527         families: new Array(),
 528         families_idx: {},
 529
 530         chartsPerRow: 0,
 531         chartsMinWidth: 1450,
 532         chartsHeight: 180,
 533         sparklinesHeight: 60
 534 };
 535
 536 // generate a sparkline
 537 // used in the documentation
 538 function sparkline(chart, dimension, units) {
 539         var key = chart + '.' + dimension;
 540
 541         if(typeof units === 'undefined')
 542                 units = '';
 543
 544         if(typeof options.sparklines_registry[key] === 'undefined')
 545                 options.sparklines_registry[key] = { count: 1 };
 546         else
 547                 options.sparklines_registry[key].count++;
 548
 549         key = key + '.' + options.sparklines_registry[key].count;
 550
 551         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 + ')';
 552
 553         return h;
 554 }
 555
 556 // documentation for each category and chart
 557 var messages = {
 558
 559         // categories / sections
 560         'system': 'Overview of the key system metrices.',
 561         '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. 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).',
 562         'net': 'Per network interface statistics collected from <code>/proc/net/dev</code>.',
 563         '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>.',
 564
 565         // charts
 566         '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.',
 567         '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.',
 568         '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).',
 569         '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.',
 570         '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.',
 571         'system.forks': 'The number of new processes created per second, read from <code>/proc/stat</code>.',
 572         '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.',
 573         '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.',
 574         '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.',
 575         '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.',
 576         '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.',
 577         '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).',
 578         'system.ipv4': 'Total IPv4 Traffic, read from <code>/proc/net/netstat</code>. This includes <code>lo</code> device traffic.',
 579         'system.ram': 'System memory, read from <code>/proc/meminfo</code>.',
 580         'system.swap': 'System swap memory, read from <code>/proc/meminfo</code>.',
 581
 582         // just a line to allow ending all entries above with comma
 583         'end': 'end'
 584 };
 585
 586 function screenWidth() {
 587         return (($(window).width() * 0.95) - 50);
 588 }
 589
 590 function chartsPerRow(total) {
 591         if(options.chartsPerRow === 0) {
 592                 width = Math.floor(total / options.chartsMinWidth);
 593                 if(width === 0) width = 1;
 594                 return width;
 595         }
 596         else return options.chartsPerRow;
 597 }
 598
 599 function chartsPrioritySort(a, b) {
 600         if(a.priority === b.priority) {
 601                 if(a.name < b.name) return -1;
 602         }
 603         else if(a.priority < b.priority) return -1;
 604         return 1;
 605 }
 606
 607 function uniq(array, find_key, get_result) {
 608         if(typeof get_result === 'undefined' || get_result === null)
 609                 get_result = find_key;
 610
 611         var idx = {};
 612         var result = new Array();
 613
 614         $.each(array, function(i, c) {
 615                 key = find_key(c);
 616                 if(typeof idx[key] === 'undefined') {
 617                         idx[key] = true;
 618                         result.push(get_result(c));
 619                 }
 620         });
 621         return result;
 622 }
 623
 624 function uniq_with_list(array, find_key_function) {
 625         var idx = {};
 626         var result = new Array();
 627
 628         $.each(array, function(i, c) {
 629                 key = find_key_function(c);
 630                 if(typeof idx[key] === 'undefined') {
 631                         idx[key] = new Array();
 632                         result.push( { name: key, values: idx[key] } );
 633                 }
 634                 idx[key].push(c);
 635         });
 636         result.sort(function(a, b) {
 637                 if(a.name < b.name) return -1;
 638                 return 1;
 639         });
 640         return result;
 641 }
 642
 643 function prepareScreen(data) {
 644         // console.log('NETDATA is paused - ready to prepare the screen');
 645         // console.log(data);
 646
 647         options.data = data;
 648         options.hostname = data.hostname;
 649         document.getElementById('hostname').innerHTML = options.hostname;
 650         document.title = options.hostname + ' dashboard';
 651         var charts = data.charts;
 652
 653         function name2id(s) {
 654                 return s
 655                         .replace(' ', '_')
 656                         .replace('(', '_')
 657                         .replace(')', '_')
 658                         .replace('/', '_');
 659         }
 660
 661         $.each(charts, function(i, c) {
 662                 if(c.enabled === true) {
 663
 664                         // find the category of the chart
 665                         c.category = c.type.split('.')[0];
 666
 667                         var tmp = c.category.split('_')[0];
 668                         if(tmp === 'net' || tmp === 'disk' || tmp === 'ap')
 669                                 c.category = tmp;
 670
 671                         switch(c.category) {
 672                                 case 'system':
 673                                         c.category_priority = 10;
 674                                         c.category_title = 'System Summary';
 675                                         c.glyphicon = "glyphicon-dashboard";
 676                                         break;
 677
 678                                 case 'tc':
 679                                         c.category_priority = 20;
 680                                         c.category_title = 'Quality Of Service';
 681                                         c.glyphicon = "glyphicon-random";
 682
 683                                         // find the name of the interface from the tc family
 684                                         if(typeof options.interfaces_registry[c.family] === 'undefined' || options.interfaces_registry[c.family] === c.family)
 685                                                  options.interfaces_registry[c.family] = c.name.split('.')[1].split('_')[0];
 686
 687                                         break;
 688
 689                                 case 'net':
 690                                         c.category_priority = 30;
 691                                         c.category_title = 'Network Interfaces';
 692                                         c.glyphicon = "glyphicon-transfer";
 693                                         break;
 694
 695                                 case 'ap':
 696                                         c.category_priority = 35;
 697                                         c.category_title = 'Access Points';
 698                                         c.glyphicon = "glyphicon-transfer";
 699                                         break;
 700
 701                                 case 'apps':
 702                                         c.category_priority = 40;
 703                                         c.category_title = 'Applications Monitoring';
 704                                         c.glyphicon = "glyphicon-tasks";
 705                                         break;
 706
 707                                 case 'ipvs':
 708                                         c.category_priority = 50;
 709                                         c.category_title = 'IP Virtual Server';
 710                                         c.glyphicon = "glyphicon-transfer";
 711                                         break;
 712
 713                                 case 'netfilter':
 714                                         c.category_priority = 60;
 715                                         c.category_title = 'Netfilter / IPTables';
 716                                         c.glyphicon = "glyphicon-cloud";
 717                                         break;
 718
 719                                 case 'ipv4':
 720                                         c.category_priority = 70;
 721                                         c.category_title = 'IPv4 Summary';
 722                                         c.glyphicon = "glyphicon-globe";
 723                                         break;
 724
 725                                 case 'mem':
 726                                         c.category_priority = 80;
 727                                         c.category_title = 'Memory';
 728                                         c.glyphicon = "glyphicon-dashboard";
 729                                         break;
 730
 731                                 case 'cpu':
 732                                         c.category_priority = 90;
 733                                         c.category_title = 'CPU Cores';
 734                                         c.glyphicon = "glyphicon-dashboard";
 735
 736                                         if(c.id.match(/^cpu\.cpu[0-9]+$/)) {
 737                                                 c.family = 'Utilization';
 738                                         }
 739                                         else if(c.id.match(/^cpu\.cpu[0-9]+_interrupts$/)) {
 740                                                 c.family = 'Interrupts';
 741                                         }
 742                                         else if(c.id.match(/^cpu\.cpu[0-9]+_softirqs$/)) {
 743                                                 c.family = 'SoftIRQs';
 744                                         }
 745
 746                                         break;
 747
 748                                 case 'disk':
 749                                         c.category_priority = 100;
 750                                         c.category_title = 'Disks';
 751                                         c.glyphicon = "glyphicon-hdd";
 752                                         break;
 753
 754                                 case 'nfsd':
 755                                         c.category_priority = 110;
 756                                         c.category_title = 'NFS Server';
 757                                         c.glyphicon = "glyphicon-hdd";
 758                                         break;
 759
 760                                 case 'squid':
 761                                         c.category_priority = 140;
 762                                         c.category_title = 'Proxy Server';
 763                                         c.glyphicon = "glyphicon-link";
 764                                         break;
 765
 766                                 case 'netdata':
 767                                         c.category_priority = 150;
 768                                         c.category_title = 'Netdata Monitoring';
 769                                         c.glyphicon = "glyphicon-thumbs-up";
 770                                         break;
 771
 772                                 case 'sensors':
 773                                         c.category_priority = 160;
 774                                         c.category_title = 'Hardware Sensors';
 775                                         c.glyphicon = "glyphicon-thumbs-up";
 776                                         break;
 777
 778                                 case 'postfix':
 779                                         c.category_priority = 170;
 780                                         c.category_title = 'Mail Server';
 781                                         c.glyphicon = "glyphicon-thumbs-up";
 782                                         break;
 783
 784                                 case 'example':
 785                                         c.category_priority = 100000;
 786                                         c.category_title = 'Example Plugins';
 787                                         c.glyphicon = "glyphicon-search";
 788                                         break;
 789
 790                                 default:
 791                                         c.category_priority = 150;
 792                                         c.category_title = c.type;
 793                                         c.glyphicon = "glyphicon-dashboard";
 794                                         break;
 795                         }
 796
 797                         // find the unique categories
 798                         if(typeof options.categories_idx[c.category] === 'undefined') {
 799                                 options.categories_idx[c.category] = {
 800                                         charts: new Array()
 801                                 }
 802                                 options.categories.push({
 803                                         name: c.category,
 804                                         title: c.category_title,
 805                                         priority: c.category_priority,
 806                                         glyphicon: c.glyphicon,
 807                                         charts: options.categories_idx[c.category].charts
 808                                 });
 809                         }
 810                         options.categories_idx[c.category].charts.push(c);
 811
 812                         // find the unique families
 813                         if(typeof options.families_idx[c.family] === 'undefined') {
 814                                 options.families_idx[c.family] = {
 815                                         charts: new Array()
 816                                 };
 817                                 options.families.push({
 818                                         name: c.family,
 819                                         title: c.family,
 820                                         priority: c.category_priority,
 821                                         glyphicon: c.glyphicon,
 822                                         charts: options.categories_idx[c.category].charts
 823                                 });
 824                         }
 825                         options.families_idx[c.family].charts.push(c);
 826                 }
 827         });
 828
 829         function prioritySort(a, b) {
 830                 if(a.priority < b.priority) return -1;
 831                 if(a.priority > b.priority) return 1;
 832                 if(a.name < b.name) return -1;
 833                 return 1;
 834         }
 835
 836         // sort all of them
 837         options.categories.sort(prioritySort);
 838         options.families.sort(prioritySort);
 839         $.each(options.families,   function(i, c) { c.charts.sort(prioritySort); });
 840
 841         var div = document.getElementById('charts_div');
 842         var pcent_width = Math.floor(100 / chartsPerRow($(div).width()));
 843
 844         // find the proper duration for per-second updates
 845         var duration = Math.round(($(div).width() * pcent_width / 100 * data.update_every / 3) / 60) * 60;
 846         var html = '';
 847         var sidebar = '<ul class="nav dashboard-sidenav" data-spy="affix" id="sidebar_ul">';
 848
 849         function getMessage(id) {
 850                 if(typeof messages[id] !== 'undefined')
 851                         return '<div class="chart-message" role="document">' + messages[id] + '</div>';
 852                 else
 853                         return '';
 854         }
 855
 856         // render the charts
 857         $.each(options.categories, function(i, t) {
 858                 t.charts.sort(prioritySort);
 859
 860                 sidebar += '<li class="' + ((i === 0)?'active':'').toString() + '"><a href="#' + name2id(t.name) + '">' + t.title + '</a>';
 861                 html += '<div role="section"><div role="sectionhead"><h1 id="' + name2id(t.name) + '" role="heading">' + t.title + '</h1>' + getMessage(t.name) + '</div><div id="' + name2id(t.name) + '" role="document">';
 862
 863                 if(t.name === 'cpu') {
 864                         var families = uniq_with_list(t.charts, function(c) { return c.family; });
 865
 866                         sidebar += '<ul class="nav">';
 867                         $.each(families, function(j, c) {
 868                                 sidebar += '<li class><a href="#' + name2id(t.name) + '_' + name2id(c.name) + '">' + c.name + '</a></li>';
 869                                 html += '<div class="netdata-group-container" id="family_' + name2id(t.name) + '_' + name2id(c.name) + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + name2id(t.name) + '_' + name2id(c.name) + '" class="netdata-chart-alignment" role="heading">' + c.name + '</h2>';
 870                                 $.each(c.values, function(x, f) {
 871                                         var c = null;
 872                                         var h = options.chartsHeight;
 873
 874                                         html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
 875                                                 + ' data-width="100%"'
 876                                                 + ' data-height="' + h.toString() + 'px"'
 877                                                 + ' data-before="0"'
 878                                                 + ' data-after="-' + duration.toString() + '"'
 879                                                 + ' data-colors="' + c + '"'
 880                                                 + ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
 881                                                 + ' role="application"></div>';
 882                                 });
 883                                 html += '</div>'; // netdata-group-container
 884                         });
 885                         sidebar += '</ul>';
 886                 }
 887                 else if(t.name === 'net' || t.name === 'tc' || t.name === 'ap') {
 888                         var interfaces = uniq_with_list(t.charts, function(c) { return c.family; });
 889
 890                         sidebar += '<ul class="nav">';
 891                         $.each(interfaces, function(j, c) {
 892                                 var menuitem = c.name;
 893                                 var name = options.interfaces_registry[menuitem];
 894                                 if(typeof name !== 'undefined' && name !== menuitem)
 895                                         menuitem = menuitem + ' (' + name + ')';
 896
 897                                 sidebar += '<li class><a href="#' + name2id(t.name) + '_' + name2id(c.name) + '">' + menuitem + '</a></li>';
 898                                 html += '<div class="netdata-group-container" id="interface_' + name2id(t.name) + '_' + name2id(c.name) + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + name2id(t.name) + '_' + name2id(c.name) + '" class="netdata-chart-alignment" role="heading">' + menuitem + '</h2>';
 899
 900                                 var head = '<div style="width: 100%; text-align: center;">';
 901                                 var all = '';
 902
 903                                 $.each(c.values, function(x, f) {
 904                                         var c = null;
 905                                         var h = options.chartsHeight / 2;
 906                                         switch(f.type) {
 907                                                 case 'net':
 908                                                         h = options.chartsHeight;
 909
 910                                                         head += '<div data-netdata="' + f.id + '"'
 911                                                         + ' data-dimensions="received"'
 912                                                         + ' data-chart-library="gauge"'
 913                                                         + ' data-gauge-adjust="width"'
 914                                                         + ' data-title="Receive"'
 915                                                         + ' data-width="12%"'
 916                                                         + ' data-before="0"'
 917                                                         + ' data-after="-' + duration.toString() + '"'
 918                                                         + ' data-points="' + duration.toString() + '"'
 919                                                         + ' data-colors="' + NETDATA.colors[0] + '"'
 920                                                         + ' role="application"></div>';
 921
 922                                                         head += '<div data-netdata="' + f.id + '"'
 923                                                         + ' data-dimensions="sent"'
 924                                                         + ' data-chart-library="gauge"'
 925                                                         + ' data-gauge-adjust="width"'
 926                                                         + ' data-title="Sent"'
 927                                                         + ' data-width="12%"'
 928                                                         + ' data-before="0"'
 929                                                         + ' data-after="-' + duration.toString() + '"'
 930                                                         + ' data-points="' + duration.toString() + '"'
 931                                                         + ' data-colors="' + NETDATA.colors[1] + '"'
 932                                                         + ' role="application"></div>';
 933                                                         break;
 934
 935                                                 case 'tc':
 936                                                         h = options.chartsHeight;
 937                                                         if(f.id.match(/.*-ifb$/) !== null)
 938                                                                 head += '<div data-netdata="' + f.id + '"'
 939                                                                 + ' data-chart-library="gauge"'
 940                                                                 + ' data-gauge-adjust="width"'
 941                                                                 + ' data-title="Receive"'
 942                                                                 + ' data-width="12%"'
 943                                                                 + ' data-before="0"'
 944                                                                 + ' data-after="-' + duration.toString() + '"'
 945                                                                 + ' data-points="' + duration.toString() + '"'
 946                                                                 + ' data-colors="' + NETDATA.colors[2] + '"'
 947                                                                 + ' role="application"></div>';
 948
 949                                                         else
 950                                                                 head += '<div data-netdata="' + f.id + '"'
 951                                                                 + ' data-chart-library="gauge"'
 952                                                                 + ' data-gauge-adjust="width"'
 953                                                                 + ' data-title="Sent"'
 954                                                                 + ' data-width="12%"'
 955                                                                 + ' data-before="0"'
 956                                                                 + ' data-after="-' + duration.toString() + '"'
 957                                                                 + ' data-points="' + duration.toString() + '"'
 958                                                                 + ' data-colors="' + NETDATA.colors[3] + '"'
 959                                                                 + ' role="application"></div>';
 960                                                         break;
 961                                                 case 'ap_bandwidth': h = options.chartsHeight; break;
 962                                                 case 'ap_bitrate'  : h = options.chartsHeight; break;
 963                                         }
 964
 965                                         all += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
 966                                                 + ' data-width="100%"'
 967                                                 + ' data-height="' + h.toString() + 'px"'
 968                                                 + ' data-before="0"'
 969                                                 + ' data-after="-' + duration.toString() + '"'
 970                                                 + ' data-colors="' + c + '"'
 971                                                 + ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
 972                                                 + ' role="application"></div>';
 973                                 });
 974
 975                                 head += '</div>';
 976                                 html += head + all + '</div>'; // netdata-group-container
 977                         });
 978                         sidebar += '</ul>';
 979                 }
 980                 else if(t.name === 'disk') {
 981                         var disks = uniq_with_list(t.charts, function(c) { return c.family; });
 982
 983                         sidebar += '<ul class="nav">';
 984                         $.each(disks, function(j, c) {
 985                                 sidebar += '<li class><a href="#' + name2id(c.name) + '">' + c.name + '</a></li>';
 986                                 html += '<div class="netdata-group-container" id="disk_' + name2id(c.name) + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + name2id(c.name) + '" class="netdata-chart-alignment" role="heading">' + c.name + '</h2>';
 987                                 var head = '<div style="width: 100%; text-align: center;">';
 988                                 var all = '';
 989                                 $.each(c.values, function(x, f) {
 990                                         var c = null;
 991                                         var h = options.chartsHeight / 2;
 992                                         switch(f.type) {
 993                                                 case 'disk'        : h = options.chartsHeight;
 994                                                                 head += '<div data-netdata="' + f.id + '"'
 995                                                                 + ' data-dimensions="reads"'
 996                                                                 + ' data-chart-library="gauge"'
 997                                                                 + ' data-gauge-adjust="width"'
 998                                                                 + ' data-title="Read"'
 999                                                                 + ' data-width="12%"'
1000                                                                 + ' data-before="0"'
1001                                                                 + ' data-after="-' + duration.toString() + '"'
1002                                                                 + ' data-points="' + duration.toString() + '"'
1003                                                                 + ' data-colors="' + NETDATA.colors[0] + '"'
1004                                                                 + ' role="application"></div>';
1005
1006                                                                 head += '<div data-netdata="' + f.id + '"'
1007                                                                 + ' data-dimensions="writes"'
1008                                                                 + ' data-chart-library="gauge"'
1009                                                                 + ' data-gauge-adjust="width"'
1010                                                                 + ' data-title="Write"'
1011                                                                 + ' data-width="12%"'
1012                                                                 + ' data-before="0"'
1013                                                                 + ' data-after="-' + duration.toString() + '"'
1014                                                                 + ' data-points="' + duration.toString() + '"'
1015                                                                 + ' data-colors="' + NETDATA.colors[1] + '"'
1016                                                                 + ' role="application"></div>';
1017                                                                 break;
1018                                                 case 'disk_backlog': c = '#DD4477'; break;
1019                                                 case 'disk_util'   : c = '#109618';
1020                                                                 head += '<div data-netdata="' + f.id + '"'
1021                                                                 + ' data-chart-library="gauge"'
1022                                                                 + ' data-title="Utilization"'
1023                                                                 + ' data-gauge-max-value="100"'
1024                                                                 + ' data-gauge-adjust="width"'
1025                                                                 + ' data-width="12%"'
1026                                                                 + ' data-before="0"'
1027                                                                 + ' data-after="-' + duration.toString() + '"'
1028                                                                 + ' data-points="' + duration.toString() + '"'
1029                                                                 + ' data-colors="' + c + '"'
1030                                                                 + ' role="application"></div>';
1031                                                                 break;
1032                                                 case 'disk_qops'   : c = '#E67300'; break;
1033                                         }
1034
1035                                         all += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
1036                                                 + ' data-width="100%"'
1037                                                 + ' data-height="' + h.toString() + 'px"'
1038                                                 + ' data-before="0"'
1039                                                 + ' data-after="-' + duration.toString() + '"'
1040                                                 + ' data-colors="' + c + '"'
1041                                                 + ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
1042                                                 + ' role="application"></div>';
1043                                 });
1044                                 head += '</div>';
1045                                 html += head + all + '</div>'; // netdata-group-container
1046                         });
1047                         sidebar += '</ul>';
1048                 }
1049                 else if(t.name === 'apps') {
1050                         $.each(t.charts, function(x, f) {
1051                                 var c = null;
1052                                 var h = options.chartsHeight / 2;
1053                                 switch(f.id) {
1054                                         case 'apps.cpu'         : h = options.chartsHeight; break;
1055                                         case 'apps.preads'      : h = options.chartsHeight; break;
1056                                         case 'apps.pwrites'     : h = options.chartsHeight; break;
1057                                         case 'apps.mem'         : h = options.chartsHeight; break;
1058                                         case 'apps.major_faults': h = options.chartsHeight; break;
1059                                 }
1060
1061                                 html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
1062                                         + ' data-width="100%"'
1063                                         + ' data-height="' + h.toString() + 'px"'
1064                                         + ' data-before="0"'
1065                                         + ' data-after="-' + duration.toString() + '"'
1066                                         + ' data-colors="' + c + '"'
1067                                         + ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
1068                                         + ' role="application"></div>';
1069                         });
1070                 }
1071                 else if(t.name === 'system') {
1072                         var head = '<div style="text-align: center; vertical-align: bottom; width: 100%;">';
1073
1074                         if(typeof charts['system.swap'] !== 'undefined')
1075                                 head += '<div style="margin-right: 10px;" data-netdata="system.swap"'
1076                                 + ' data-dimensions="free"'
1077                                 + ' data-append-options="percentage"'
1078                                 + ' data-chart-library="easypiechart"'
1079                                 + ' data-title="Free Swap"'
1080                                 + ' data-units="%"'
1081                                 + ' data-easypiechart-max-value="100"'
1082                                 + ' data-width="8%"'
1083                                 + ' data-before="0"'
1084                                 + ' data-after="-' + duration.toString() + '"'
1085                                 + ' data-points="' + duration.toString() + '"'
1086                                 + ' data-colors="' + NETDATA.colors[1] + '"'
1087                                 + ' role="application"></div>';
1088
1089                         if(typeof charts['system.io'] !== 'undefined') {
1090                                 head += '<div style="margin-right: 10px;" data-netdata="system.io"'
1091                                 + ' data-dimensions="in"'
1092                                 + ' data-chart-library="easypiechart"'
1093                                 + ' data-title="Disk Read"'
1094                                 + ' data-units="KB / s"'
1095                                 + ' data-width="10%"'
1096                                 + ' data-before="0"'
1097                                 + ' data-after="-' + duration.toString() + '"'
1098                                 + ' data-points="' + duration.toString() + '"'
1099                                 + ' data-colors="' + NETDATA.colors[0] + '"'
1100                                 + ' role="application"></div>';
1101
1102                                 head += '<div style="margin-right: 10px;" data-netdata="system.io"'
1103                                 + ' data-dimensions="out"'
1104                                 + ' data-chart-library="easypiechart"'
1105                                 + ' data-title="Disk Write"'
1106                                 + ' data-units="KB / s"'
1107                                 + ' data-width="10%"'
1108                                 + ' data-before="0"'
1109                                 + ' data-after="-' + duration.toString() + '"'
1110                                 + ' data-points="' + duration.toString() + '"'
1111                                 + ' data-colors="' + NETDATA.colors[1] + '"'
1112                                 + ' role="application"></div>';
1113                         }
1114
1115                         if(typeof charts['system.cpu'] !== 'undefined')
1116                                 head += '<div data-netdata="system.cpu"'
1117                                 + ' data-chart-library="gauge"'
1118                                 + ' data-title="CPU"'
1119                                 + ' data-units="%"'
1120                                 + ' data-gauge-max-value="100"'
1121                                 + ' data-width="18%"'
1122                                 + ' data-after="-' + duration.toString() + '"'
1123                                 + ' data-points="' + duration.toString() + '"'
1124                                 + ' data-colors="' + NETDATA.colors[12] + '"'
1125                                 + ' role="application"></div>';
1126
1127                         if(typeof charts['system.ipv4'] !== 'undefined') {
1128                                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
1129                                 + ' data-dimensions="received"'
1130                                 + ' data-chart-library="easypiechart"'
1131                                 + ' data-title="IPv4 Inbound"'
1132                                 + ' data-units="kbps"'
1133                                 + ' data-width="10%"'
1134                                 + ' data-before="0"'
1135                                 + ' data-after="-' + duration.toString() + '"'
1136                                 + ' data-points="' + duration.toString() + '"'
1137                                 + ' data-colors="' + NETDATA.colors[0] + '"'
1138                                 + ' role="application"></div>';
1139
1140                                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
1141                                 + ' data-dimensions="sent"'
1142                                 + ' data-chart-library="easypiechart"'
1143                                 + ' data-title="IPv4 Outbound"'
1144                                 + ' data-units="kbps"'
1145                                 + ' data-width="10%"'
1146                                 + ' data-before="0"'
1147                                 + ' data-after="-' + duration.toString() + '"'
1148                                 + ' data-points="' + duration.toString() + '"'
1149                                 + ' data-colors="' + NETDATA.colors[1] + '"'
1150                                 + ' role="application"></div>';
1151                         }
1152
1153                         if(typeof charts['system.ram'] !== 'undefined')
1154                                 head += '<div style="margin-right: 10px;" data-netdata="system.ram"'
1155                                 + ' data-dimensions="cached|free"'
1156                                 + ' data-append-options="percentage"'
1157                                 + ' data-chart-library="easypiechart"'
1158                                 + ' data-title="Available RAM"'
1159                                 + ' data-units="%"'
1160                                 + ' data-easypiechart-max-value="100"'
1161                                 + ' data-width="8%"'
1162                                 + ' data-after="-' + duration.toString() + '"'
1163                                 + ' data-points="' + duration.toString() + '"'
1164                                 + ' data-colors="' + NETDATA.colors[7] + '"'
1165                                 + ' role="application"></div>';
1166
1167 /*                      if(typeof charts['system.swapio'] !== 'undefined') {
1168                                 head += "<div style=\"display: inline-block\">";
1169
1170                                 head += '<div style="margin-right: 10px;" data-netdata="system.swapio"'
1171                                 + ' data-dimensions="in"'
1172                                 + ' data-chart-library="easypiechart"'
1173                                 + ' data-title="Swap Read"'
1174                                 + ' data-width="100px"'
1175                                 + ' data-before="0"'
1176                                 + ' data-after="-' + duration.toString() + '"'
1177                                 + ' data-points="' + duration.toString() + '"'
1178                                 + ' data-colors="' + NETDATA.colors[2] + '"'
1179                                 + ' role="application"></div>';
1180
1181                                 head += '<div style="margin-right: 10px;" data-netdata="system.swapio"'
1182                                 + ' data-dimensions="out"'
1183                                 + ' data-chart-library="easypiechart"'
1184                                 + ' data-title="Swap Write"'
1185                                 + ' data-width="100px"'
1186                                 + ' data-before="0"'
1187                                 + ' data-after="-' + duration.toString() + '"'
1188                                 + ' data-points="' + duration.toString() + '"'
1189                                 + ' data-colors="' + NETDATA.colors[1] + '"'
1190                                 + ' role="application"></div>';
1191
1192                                 head += "</div>";
1193                         }
1194
1195                         if(typeof charts['system.ctxt'] !== 'undefined')
1196                                 head += '<div style="margin-right: 10px;" data-netdata="system.ctxt"'
1197                                 + ' data-chart-library="easypiechart"'
1198                                 + ' data-title="Switches"'
1199                                 + ' data-width="100px"'
1200                                 + ' data-before="0"'
1201                                 + ' data-after="-' + duration.toString() + '"'
1202                                 + ' data-points="' + duration.toString() + '"'
1203                                 + ' data-colors="' + NETDATA.colors[3] + '"'
1204                                 + ' role="application"></div>';
1205
1206                         if(typeof charts['system.intr'] !== 'undefined')
1207                                 head += '<div style="margin-right: 10px;" data-netdata="system.intr"'
1208                                 + ' data-chart-library="easypiechart"'
1209                                 + ' data-title="Interrupts"'
1210                                 + ' data-width="100px"'
1211                                 + ' data-before="0"'
1212                                 + ' data-after="-' + duration.toString() + '"'
1213                                 + ' data-points="' + duration.toString() + '"'
1214                                 + ' data-colors="' + NETDATA.colors[7] + '"'
1215                                 + ' role="application"></div>';
1216 */
1217                         head += "</div>";
1218                         var all = '';
1219                         $.each(t.charts, function(x, f) {
1220                                 all += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
1221                                         + ' data-width="' + pcent_width.toString() + '%"'
1222                                         + ' data-height="' + options.chartsHeight.toString() + 'px"'
1223                                         + ' data-before="0"'
1224                                         + ' data-after="-' + duration.toString() + '"'
1225                                         + ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
1226                                         + ' role="application"></div>';
1227                         });
1228                         html += head + all;
1229                 }
1230                 else if(t.name === 'netdata') {
1231                         var head = '<div style="width: 100%; text-align: center;">';
1232                         var all = '';
1233
1234                         $.each(t.charts, function(x, f) {
1235                                 switch(f.id) {
1236                                         case 'netdata.net'   :
1237                                                         head += '<div data-netdata="' + f.id + '"'
1238                                                         + ' data-dimensions="in"'
1239                                                         + ' data-chart-library="gauge"'
1240                                                         + ' data-title="Received"'
1241                                                         + ' data-gauge-adjust="width"'
1242                                                         + ' data-width="12%"'
1243                                                         + ' data-before="0"'
1244                                                         + ' data-after="-' + duration.toString() + '"'
1245                                                         + ' data-points="' + duration.toString() + '"'
1246                                                         + ' role="application"></div>';
1247
1248                                                         head += '<div data-netdata="' + f.id + '"'
1249                                                         + ' data-dimensions="out"'
1250                                                         + ' data-chart-library="gauge"'
1251                                                         + ' data-title="Sent"'
1252                                                         + ' data-gauge-adjust="width"'
1253                                                         + ' data-width="12%"'
1254                                                         + ' data-before="0"'
1255                                                         + ' data-after="-' + duration.toString() + '"'
1256                                                         + ' data-points="' + duration.toString() + '"'
1257                                                         + ' role="application"></div>';
1258                                                         break;
1259
1260                                         case 'netdata.requests'   : c = NETDATA.colors[2];
1261                                                         head += '<div data-netdata="' + f.id + '"'
1262                                                         + ' data-chart-library="gauge"'
1263                                                         + ' data-title="Requests / second"'
1264                                                         + ' data-gauge-adjust="width"'
1265                                                         + ' data-width="12%"'
1266                                                         + ' data-before="0"'
1267                                                         + ' data-after="-' + duration.toString() + '"'
1268                                                         + ' data-points="' + duration.toString() + '"'
1269                                                         + ' data-colors="' + c + '"'
1270                                                         + ' role="application"></div>';
1271                                                         break;
1272
1273                                         case 'netdata.clients'   : c = NETDATA.colors[3];
1274                                                         head += '<div data-netdata="' + f.id + '"'
1275                                                         + ' data-chart-library="gauge"'
1276                                                         + ' data-title="Connections"'
1277                                                         + ' data-gauge-adjust="width"'
1278                                                         + ' data-width="12%"'
1279                                                         + ' data-before="0"'
1280                                                         + ' data-after="-' + duration.toString() + '"'
1281                                                         + ' data-points="' + duration.toString() + '"'
1282                                                         + ' data-colors="' + c + '"'
1283                                                         + ' role="application"></div>';
1284                                                         break;
1285                                 }
1286
1287                                 all += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
1288                                         + ' data-width="' + pcent_width.toString() + '%"'
1289                                         + ' data-height="' + options.chartsHeight.toString() + 'px"'
1290                                         + ' data-before="0"'
1291                                         + ' data-after="-' + duration.toString() + '"'
1292                                         + ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
1293                                         + ' role="application"></div>';
1294                         });
1295                         head += '</div>';
1296                         html += head + all;
1297                 }
1298                 else {
1299                         $.each(t.charts, function(x, f) {
1300                                 html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
1301                                         + ' data-width="' + pcent_width.toString() + '%"'
1302                                         + ' data-height="' + options.chartsHeight.toString() + 'px"'
1303                                         + ' data-before="0"'
1304                                         + ' data-after="-' + duration.toString() + '"'
1305                                         + ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
1306                                         + ' role="application"></div>';
1307                         });
1308                 }
1309
1310                 sidebar += '</li>';
1311                 html += '</div>'; // document
1312                 html += '</div>'; // section
1313                 html += '<hr role="separator"/>';
1314         });
1315         sidebar += '</ul>';
1316 /*
1317         // show the colors
1318         html += '<br/><div class="row">'
1319         $.each(NETDATA.colors, function(i, c){
1320                 html += '<div style="display: inline-block;"><div style="display: inline-block; width: 100px; height: 100px; background: ' + c + ';"></div><br/>' + c + '</div>';
1321         });
1322         html += '</div>'
1323 */
1324         div.innerHTML = html;
1325         document.getElementById('sidebar').innerHTML = sidebar;
1326
1327         // resize all charts - without starting the background thread
1328         // this has to be done while NETDATA is paused
1329         // if we ommit this, the affix menu will be wrong, since all
1330         // the Dom elements are initially zero-sized
1331         NETDATA.parseDom();
1332
1333         // let it run (update the charts)
1334         NETDATA.unpause();
1335
1336         // check if we have to jump to a specific section
1337         var hash = location.hash.replace('#','');
1338         if(hash != '') {
1339                 // Clear the hash in the URL
1340                 // location.hash = '';   // delete front "//" if you want to change the address bar
1341                 var offset = $(location.hash).offset();
1342                 if(typeof offset !== 'undefined')
1343                         $('html, body').animate({ scrollTop: offset.top }, 0);
1344         }
1345
1346         /* activate bootstrap sidebar (affix) */
1347         $('#sidebar').affix({
1348                 offset: {
1349                         top: (document.location.hostname === demo_hostname)?150:0,
1350                         bottom: 0
1351                 }
1352         });
1353
1354         /* fix scrolling of very long affix lists
1355            http://stackoverflow.com/questions/21691585/bootstrap-3-1-0-affix-too-long
1356          */
1357         $('#sidebar').on('affixed.bs.affix', function() {
1358                 $(this).removeAttr('style');
1359         });
1360
1361         /* activate bootstrap scrollspy (needed for sidebar) */
1362         $(document.body).scrollspy({
1363                 target: '#sidebar',
1364                 offset: $(window).height() / 3 // controls the diff of the <hX> element to the top, to select it
1365         });
1366
1367         document.getElementById('footer').style.display = 'block';
1368
1369
1370         var update_options_modal = function() {
1371                 // console.log('update_options_modal');
1372
1373                 var sync_option = function(option) {
1374                         var self = $('#' + option);
1375
1376                         if(self.prop('checked') !== NETDATA.getOption(option)) {
1377                                 // console.log('switching ' + option.toString());
1378                                 self.bootstrapToggle(NETDATA.getOption(option)?'on':'off');
1379                         }
1380                 }
1381
1382                 sync_option('eliminate_zero_dimensions');
1383                 sync_option('destroy_on_hide');
1384                 sync_option('parallel_refresher');
1385                 sync_option('concurrent_refreshes');
1386                 sync_option('sync_selection');
1387                 sync_option('sync_pan_and_zoom');
1388                 sync_option('stop_updates_when_focus_is_lost');
1389                 sync_option('smooth_plot');
1390
1391                 if(NETDATA.getOption('parallel_refresher') === false) {
1392                         $('#concurrent_refreshes_row').hide();
1393                 }
1394                 else {
1395                         $('#concurrent_refreshes_row').show();
1396                 }
1397         };
1398         NETDATA.setOption('setOptionCallback', update_options_modal);
1399
1400         // handle options changes
1401         $('#eliminate_zero_dimensions').change(function()       { NETDATA.setOption('eliminate_zero_dimensions', $(this).prop('checked')); });
1402         $('#destroy_on_hide').change(function()                 { NETDATA.setOption('destroy_on_hide', $(this).prop('checked')); });
1403         $('#parallel_refresher').change(function()              { NETDATA.setOption('parallel_refresher', $(this).prop('checked')); });
1404         $('#concurrent_refreshes').change(function()            { NETDATA.setOption('concurrent_refreshes', $(this).prop('checked')); });
1405         $('#sync_selection').change(function()                  { NETDATA.setOption('sync_selection', $(this).prop('checked')); });
1406         $('#sync_pan_and_zoom').change(function()               { NETDATA.setOption('sync_pan_and_zoom', $(this).prop('checked')); });
1407         $('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); });
1408         $('#smooth_plot').change(function()                     { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
1409
1410         if(document.location.hostname === demo_hostname)
1411                 setTimeout(function() {
1412                         $('#welcomeModal').modal();
1413                 }, 1000);
1414 }
1415
1416 NETDATA.pause(function() {
1417
1418 //      $('#welcomeModal').on('hidden.bs.modal', function (e) {
1419 //              NETDATA.updatedDom();
1420 //      });
1421 //      $('#welcomeModal').on('shown.bs.modal', function (e) {
1422 //              NETDATA.updatedDom();
1423 //      });
1424
1425         // download all the charts the server knows
1426         NETDATA.chartRegistry.downloadAll(NETDATA.serverDefault, function(data) {
1427
1428                 // prepare our DOM
1429                 // this will be called when NETDATA is paused
1430                 prepareScreen(data);
1431
1432                 // due to affix issues, prepareScreen() will unpause
1433                 // netdata as needed
1434         });
1435 });
1436
1437 </script>