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?v9"></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="https://jquery.org/" target="_blank">jQuery</a>,
 346                                                 <i class="fa fa-copyright"></i> Copyright 2015, jQuery Foundation, <a href="https://jquery.org/license/" target="_blank">MIT License</a>
 347
 348                                                 <i class="fa fa-circle"></i> <a href="http://getbootstrap.com/getting-started/" target="_blank">Bootstrap</a>,
 349                                                 <i class="fa fa-copyright"></i> Copyright 2015, Twitter, <a href="http://getbootstrap.com/getting-started/#license-faqs" target="_blank">MIT License</a>
 350
 351                                                 <i class="fa fa-circle"></i> <a href="http://www.bootstraptoggle.com/" target="_blank">Bootstrap Toggle</a>,
 352                                                 <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>
 353
 354                                                 <i class="fa fa-circle"></i> <a href="https://jamesflorentino.github.io/nanoScrollerJS/" target="_blank">NanoScroller</a>,
 355                                                 <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>
 356
 357                                                 <i class="fa fa-circle"></i> <a href="https://github.com/marcj/css-element-queries" target="_blank">CSS Element Queries</a>,
 358                                                 <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>
 359
 360                                                 <i class="fa fa-circle"></i> <a href="http://morrisjs.github.io/morris.js/" target="_blank">morris.js</a>,
 361                                                 <i class="fa fa-copyright"></i> Copyright 2013, Olly Smith, <a href="http://morrisjs.github.io/morris.js/" target="_blank">Simplified BSD License</a>
 362
 363                                                 <i class="fa fa-circle"></i> <a href="http://raphaeljs.com/" target="_blank">Raphaël</a>,
 364                                                 <i class="fa fa-copyright"></i> Copyright 2008, Dmitry Baranovskiy, <a href="http://raphaeljs.com/license.html" target="_blank">MIT License</a>
 365
 366                                                 <i class="fa fa-circle"></i> <a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">FontAwesome</a>,
 367                                                 <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>
 368
 369                                                 <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.
 370                                         </small>
 371                                 </div>
 372                         </div>
 373                 </div>
 374         </div>
 375
 376         <div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="welcomeModalLabel">
 377                 <div class="modal-dialog modal-lg" role="document">
 378                         <div class="modal-content">
 379                                 <div class="modal-header">
 380                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 381                                         <h4 class="modal-title" id="welcomeModalLabel">Welcome to netdata!</h4>
 382                                 </div>
 383                                 <div class="modal-body">
 384                                                 <div class="p">
 385                                                 <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.
 386                                                 </div>
 387                                                 <div class="p">
 388                                                 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.
 389                                                 </div>
 390                                                 <div class="p">
 391                                                 <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>%),
 392                                                 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).
 393                                                 </div>
 394                                                 <div class="p">
 395                                                 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>!).
 396                                                 </div>
 397                                                 <div class="p">
 398                                                 If you like this project, <b>we need help writing documentation, coding plugins, testing new features, supporting end users.</b>
 399                                                 </div>
 400                                                 <div class="p">
 401                                                 We will be glad to have you on board...
 402                                                 </div>
 403                                 </div>
 404                                 <div class="modal-footer">
 405                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 406                                 </div>
 407                         </div>
 408                 </div>
 409         </div>
 410
 411         <div class="modal fade" id="optionsModal" tabindex="-1" role="dialog" aria-labelledby="optionsModalLabel">
 412                 <div class="modal-dialog modal-lg" role="document">
 413                         <div class="modal-content">
 414                                 <div class="modal-header">
 415                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 416                                         <h4 class="modal-title" id="optionsModalLabel">netdata dashboard options</h4>
 417                                 </div>
 418                                 <div class="modal-body">
 419                                         <form id="optionsForm" method="get" class="form-horizontal">
 420                                                 <div class="form-group">
 421                                                         <center>
 422                                                                 <small style="color: #BBBBBB;">Settings take effect immediately and are saved permanently to browser local storage (except the refresh on focus / always option).
 423                                                                 <br/>
 424                                                                 To reset all options (including charts sizes) to their defaults, click <a href="#" onclick="NETDATA.resetOptions(); return false;">here</a>.</small>
 425                                                         </center>
 426
 427                                                         <table>
 428                                                         <tr class="option-row">
 429                                                                 <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>
 430                                                                 <td class="option-info"><strong>When to refresh the charts?</strong><br/>
 431                                                                         <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>
 432                                                                 </td>
 433                                                                 </tr>
 434                                                         <tr class="option-row">
 435                                                                 <td class="option-control">
 436                                                                 <input id="eliminate_zero_dimensions" type="checkbox" checked data-toggle="toggle" data-on="Non Zero" data-off="All" data-width="110px">
 437                                                                 </td>
 438                                                                 <td class="option-info"><strong>Which dimensions to show?</strong><br/>
 439                                                                         <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>
 440                                                                 </td>
 441                                                                 </tr>
 442                                                         <tr class="option-row">
 443                                                                 <td class="option-control"><input id="destroy_on_hide" type="checkbox" data-toggle="toggle" data-on="Destroy" data-off="Hide" data-width="110px"></td>
 444                                                                 <td class="option-info"><strong>How to handle hidden charts?</strong><br/>
 445                                                                         <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>
 446                                                                 </td>
 447                                                                 </tr>
 448                                                         <tr class="option-row">
 449                                                                 <td class="option-control"><input id="parallel_refresher" type="checkbox" checked data-toggle="toggle" data-on="Parallel" data-off="Sequencial" data-width="110px"></td>
 450                                                                 <td class="option-info"><strong>Which chart refresh policy to use?</strong><br/>
 451                                                                         <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>
 452                                                                 </td>
 453                                                                 </tr>
 454                                                         <tr class="option-row" id="concurrent_refreshes_row">
 455                                                                 <td class="option-control"></td>
 456                                                                 <td class="option-info">
 457                                                                         <table>
 458                                                                         <tr class="option-row">
 459                                                                         <td class="option-control">
 460                                                                         <input id="concurrent_refreshes" type="checkbox" checked data-toggle="toggle" data-on="Resync" data-off="Best Effort" data-width="110px">
 461                                                                         </td>
 462                                                                         <td class="option-info">
 463                                                                         <strong>Shall we re-sync chart refreshes?</strong><br/>
 464                                                                         <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>
 465                                                                         </td>
 466                                                                         </tr>
 467                                                                         </table>
 468                                                                 </td>
 469                                                                 </tr>
 470                                                         <tr class="option-row">
 471                                                                 <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>
 472                                                                 <td class="option-info"><strong>Sync hover selection on all charts?</strong><br/>
 473                                                                         <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>
 474                                                                 </td>
 475                                                                 </tr>
 476                                                         <tr class="option-row">
 477                                                                 <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>
 478                                                                 <td class="option-info"><strong>Sync pan and zoom on all charts?</strong><br/>
 479                                                                         <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>
 480                                                                 </td>
 481                                                                 </tr>
 482                                                         <tr class="option-row">
 483                                                                 <td class="option-control"><input id="smooth_plot" type="checkbox" checked data-toggle="toggle"  data-on="Smooth" data-off="Rough" data-width="110px"></td>
 484                                                                 <td class="option-info"><strong>Enable Bézier lines on charts?</strong><br/>
 485                                                                         <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>
 486                                                                 </td>
 487                                                                 </tr>
 488                                                         </table>
 489                                                 </div>
 490                                         </form>
 491                                 </div>
 492                                 <div class="modal-footer">
 493                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 494                                 </div>
 495                         </div>
 496                 </div>
 497         </div>
 498
 499 </body>
 500 </html>
 501 <script>
 502
 503 var demo_hostname = 'netdata.firehol.org';
 504 // var demo_hostname = 'box';
 505
 506 if(document.location.hostname === demo_hostname) {
 507         document.getElementById('masthead').style.display = 'block';
 508 }
 509
 510 var options = {
 511         sparklines_registry: {},
 512         interfaces_registry: {},
 513         data: null,
 514         hostname: 'netdata_server', // will be overwritten by the netdata server
 515         categories: new Array(),
 516         categories_idx: {},
 517         families: new Array(),
 518         families_idx: {},
 519
 520         chartsPerRow: 0,
 521         chartsMinWidth: 1450,
 522         chartsHeight: 180,
 523         sparklinesHeight: 60
 524 };
 525
 526 // generate a sparkline
 527 // used in the documentation
 528 function sparkline(chart, dimension, units) {
 529         var key = chart + '.' + dimension;
 530
 531         if(typeof units === 'undefined')
 532                 units = '';
 533
 534         if(typeof options.sparklines_registry[key] === 'undefined')
 535                 options.sparklines_registry[key] = { count: 1 };
 536         else
 537                 options.sparklines_registry[key].count++;
 538
 539         key = key + '.' + options.sparklines_registry[key].count;
 540
 541         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 + ')';
 542
 543         return h;
 544 }
 545
 546 // documentation for each category and chart
 547 var messages = {
 548
 549         // categories / sections
 550         'system': 'Overview of the key system metrices.',
 551         '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.',
 552         'net': 'Per network interface statistics collected from <code>/proc/net/dev</code>.',
 553         '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>.',
 554
 555         // charts
 556         '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.',
 557         '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.',
 558         '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).',
 559         '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.',
 560         '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.',
 561         'system.forks': 'The number of new processes created per second, read from <code>/proc/stat</code>.',
 562         '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.',
 563         '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.',
 564         '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.',
 565         '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.',
 566         '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.',
 567         '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).',
 568         'system.ipv4': 'Total IPv4 Traffic, read from <code>/proc/net/netstat</code>. This includes <code>lo</code> device traffic.',
 569         'system.ram': 'System memory, read from <code>/proc/meminfo</code>.',
 570         'system.swap': 'System swap memory, read from <code>/proc/meminfo</code>.',
 571
 572         // just a line to allow ending all entries above with comma
 573         'end': 'end'
 574 };
 575
 576 function screenWidth() {
 577         return (($(window).width() * 0.95) - 50);
 578 }
 579
 580 function chartsPerRow(total) {
 581         if(options.chartsPerRow === 0) {
 582                 width = Math.floor(total / options.chartsMinWidth);
 583                 if(width === 0) width = 1;
 584                 return width;
 585         }
 586         else return options.chartsPerRow;
 587 }
 588
 589 function chartsPrioritySort(a, b) {
 590         if(a.priority === b.priority) {
 591                 if(a.name < b.name) return -1;
 592         }
 593         else if(a.priority < b.priority) return -1;
 594         return 1;
 595 }
 596
 597 function uniq(array, find_key, get_result) {
 598         if(typeof get_result === 'undefined' || get_result === null)
 599                 get_result = find_key;
 600
 601         var idx = {};
 602         var result = new Array();
 603
 604         $.each(array, function(i, c) {
 605                 key = find_key(c);
 606                 if(typeof idx[key] === 'undefined') {
 607                         idx[key] = true;
 608                         result.push(get_result(c));
 609                 }
 610         });
 611         return result;
 612 }
 613
 614 function uniq_with_list(array, find_key_function) {
 615         var idx = {};
 616         var result = new Array();
 617
 618         $.each(array, function(i, c) {
 619                 key = find_key_function(c);
 620                 if(typeof idx[key] === 'undefined') {
 621                         idx[key] = new Array();
 622                         result.push( { name: key, values: idx[key] } );
 623                 }
 624                 idx[key].push(c);
 625         });
 626         result.sort(function(a, b) {
 627                 if(a.name < b.name) return -1;
 628                 return 1;
 629         });
 630         return result;
 631 }
 632
 633 function prepareScreen(data) {
 634         // console.log('NETDATA is paused - ready to prepare the screen');
 635         // console.log(data);
 636
 637         options.data = data;
 638         options.hostname = data.hostname;
 639         document.getElementById('hostname').innerHTML = options.hostname;
 640         document.title = options.hostname + ' dashboard';
 641         var charts = data.charts;
 642
 643         function name2id(s) {
 644                 return s
 645                         .replace(' ', '_')
 646                         .replace('(', '_')
 647                         .replace(')', '_')
 648                         .replace('/', '_');
 649         }
 650
 651         $.each(charts, function(i, c) {
 652                 if(c.enabled === true) {
 653
 654                         // find the category of the chart
 655                         c.category = c.type.split('.')[0];
 656
 657                         var tmp = c.category.split('_')[0];
 658                         if(tmp === 'net' || tmp === 'disk' || tmp === 'ap')
 659                                 c.category = tmp;
 660
 661                         switch(c.category) {
 662                                 case 'system':
 663                                         c.category_priority = 10;
 664                                         c.category_title = 'System Summary';
 665                                         c.glyphicon = "glyphicon-dashboard";
 666                                         break;
 667
 668                                 case 'tc':
 669                                         c.category_priority = 20;
 670                                         c.category_title = 'Quality Of Service';
 671                                         c.glyphicon = "glyphicon-random";
 672
 673                                         // find the name of the interface from the tc family
 674                                         if(typeof options.interfaces_registry[c.family] === 'undefined' || options.interfaces_registry[c.family] === c.family)
 675                                                  options.interfaces_registry[c.family] = c.name.split('.')[1].split('_')[0];
 676
 677                                         break;
 678
 679                                 case 'net':
 680                                         c.category_priority = 30;
 681                                         c.category_title = 'Network Interfaces';
 682                                         c.glyphicon = "glyphicon-transfer";
 683                                         break;
 684
 685                                 case 'ap':
 686                                         c.category_priority = 35;
 687                                         c.category_title = 'Access Points';
 688                                         c.glyphicon = "glyphicon-transfer";
 689                                         break;
 690
 691                                 case 'apps':
 692                                         c.category_priority = 40;
 693                                         c.category_title = 'Applications Monitoring';
 694                                         c.glyphicon = "glyphicon-tasks";
 695                                         break;
 696
 697                                 case 'ipvs':
 698                                         c.category_priority = 50;
 699                                         c.category_title = 'IP Virtual Server';
 700                                         c.glyphicon = "glyphicon-transfer";
 701                                         break;
 702
 703                                 case 'netfilter':
 704                                         c.category_priority = 60;
 705                                         c.category_title = 'Netfilter / IPTables';
 706                                         c.glyphicon = "glyphicon-cloud";
 707                                         break;
 708
 709                                 case 'ipv4':
 710                                         c.category_priority = 70;
 711                                         c.category_title = 'IPv4 Summary';
 712                                         c.glyphicon = "glyphicon-globe";
 713                                         break;
 714
 715                                 case 'mem':
 716                                         c.category_priority = 80;
 717                                         c.category_title = 'Memory';
 718                                         c.glyphicon = "glyphicon-dashboard";
 719                                         break;
 720
 721                                 case 'cpu':
 722                                         c.category_priority = 90;
 723                                         c.category_title = 'CPU Cores';
 724                                         c.glyphicon = "glyphicon-dashboard";
 725
 726                                         if(c.id.match(/^cpu\.cpu[0-9]+$/)) {
 727                                                 c.family = 'Utilization';
 728                                         }
 729                                         else if(c.id.match(/^cpu\.cpu[0-9]+_interrupts$/)) {
 730                                                 c.family = 'Interrupts';
 731                                         }
 732                                         else if(c.id.match(/^cpu\.cpu[0-9]+_softirqs$/)) {
 733                                                 c.family = 'SoftIRQs';
 734                                         }
 735
 736                                         break;
 737
 738                                 case 'disk':
 739                                         c.category_priority = 100;
 740                                         c.category_title = 'Disks';
 741                                         c.glyphicon = "glyphicon-hdd";
 742                                         break;
 743
 744                                 case 'nfsd':
 745                                         c.category_priority = 110;
 746                                         c.category_title = 'NFS Server';
 747                                         c.glyphicon = "glyphicon-hdd";
 748                                         break;
 749
 750                                 case 'squid':
 751                                         c.category_priority = 140;
 752                                         c.category_title = 'Proxy Server';
 753                                         c.glyphicon = "glyphicon-link";
 754                                         break;
 755
 756                                 case 'netdata':
 757                                         c.category_priority = 150;
 758                                         c.category_title = 'Netdata Monitoring';
 759                                         c.glyphicon = "glyphicon-thumbs-up";
 760                                         break;
 761
 762                                 case 'sensors':
 763                                         c.category_priority = 160;
 764                                         c.category_title = 'Hardware Sensors';
 765                                         c.glyphicon = "glyphicon-thumbs-up";
 766                                         break;
 767
 768                                 case 'postfix':
 769                                         c.category_priority = 170;
 770                                         c.category_title = 'Mail Server';
 771                                         c.glyphicon = "glyphicon-thumbs-up";
 772                                         break;
 773
 774                                 case 'example':
 775                                         c.category_priority = 100000;
 776                                         c.category_title = 'Example Plugins';
 777                                         c.glyphicon = "glyphicon-search";
 778                                         break;
 779
 780                                 default:
 781                                         c.category_priority = 150;
 782                                         c.category_title = c.type;
 783                                         c.glyphicon = "glyphicon-dashboard";
 784                                         break;
 785                         }
 786
 787                         // find the unique categories
 788                         if(typeof options.categories_idx[c.category] === 'undefined') {
 789                                 options.categories_idx[c.category] = {
 790                                         charts: new Array()
 791                                 }
 792                                 options.categories.push({
 793                                         name: c.category,
 794                                         title: c.category_title,
 795                                         priority: c.category_priority,
 796                                         glyphicon: c.glyphicon,
 797                                         charts: options.categories_idx[c.category].charts
 798                                 });
 799                         }
 800                         options.categories_idx[c.category].charts.push(c);
 801
 802                         // find the unique families
 803                         if(typeof options.families_idx[c.family] === 'undefined') {
 804                                 options.families_idx[c.family] = {
 805                                         charts: new Array()
 806                                 };
 807                                 options.families.push({
 808                                         name: c.family,
 809                                         title: c.family,
 810                                         priority: c.category_priority,
 811                                         glyphicon: c.glyphicon,
 812                                         charts: options.categories_idx[c.category].charts
 813                                 });
 814                         }
 815                         options.families_idx[c.family].charts.push(c);
 816                 }
 817         });
 818
 819         function prioritySort(a, b) {
 820                 if(a.priority < b.priority) return -1;
 821                 if(a.priority > b.priority) return 1;
 822                 if(a.name < b.name) return -1;
 823                 return 1;
 824         }
 825
 826         // sort all of them
 827         options.categories.sort(prioritySort);
 828         options.families.sort(prioritySort);
 829         $.each(options.families,   function(i, c) { c.charts.sort(prioritySort); });
 830
 831         var div = document.getElementById('charts_div');
 832         var pcent_width = Math.floor(100 / chartsPerRow($(div).width()));
 833
 834         // find the proper duration for per-second updates
 835         var duration = Math.round(($(div).width() * pcent_width / 100 * data.update_every / 3) / 60) * 60;
 836         var html = '';
 837         var sidebar = '<ul class="nav dashboard-sidenav" data-spy="affix" id="sidebar_ul">';
 838
 839         function getMessage(id) {
 840                 if(typeof messages[id] !== 'undefined')
 841                         return '<div class="chart-message" role="document">' + messages[id] + '</div>';
 842                 else
 843                         return '';
 844         }
 845
 846         // render the charts
 847         $.each(options.categories, function(i, t) {
 848                 t.charts.sort(prioritySort);
 849
 850                 sidebar += '<li class="' + ((i === 0)?'active':'').toString() + '"><a href="#' + name2id(t.name) + '">' + t.title + '</a>';
 851                 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">';
 852
 853                 if(t.name === 'cpu') {
 854                         var families = uniq_with_list(t.charts, function(c) { return c.family; });
 855
 856                         sidebar += '<ul class="nav">';
 857                         $.each(families, function(j, c) {
 858                                 sidebar += '<li class><a href="#' + name2id(t.name) + '_' + name2id(c.name) + '">' + c.name + '</a></li>';
 859                                 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>';
 860                                 $.each(c.values, function(x, f) {
 861                                         var c = null;
 862                                         var h = options.chartsHeight;
 863
 864                                         html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
 865                                                 + ' data-width="100%"'
 866                                                 + ' data-height="' + h.toString() + 'px"'
 867                                                 + ' data-before="0"'
 868                                                 + ' data-after="-' + duration.toString() + '"'
 869                                                 + ' data-colors="' + c + '"'
 870                                                 + ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
 871                                                 + ' role="application"></div>';
 872                                 });
 873                                 html += '</div>'; // netdata-group-container
 874                         });
 875                         sidebar += '</ul>';
 876                 }
 877                 else if(t.name === 'net' || t.name === 'tc' || t.name === 'ap') {
 878                         var interfaces = uniq_with_list(t.charts, function(c) { return c.family; });
 879
 880                         sidebar += '<ul class="nav">';
 881                         $.each(interfaces, function(j, c) {
 882                                 var menuitem = c.name;
 883                                 var name = options.interfaces_registry[menuitem];
 884                                 if(typeof name !== 'undefined' && name !== menuitem)
 885                                         menuitem = menuitem + ' (' + name + ')';
 886
 887                                 sidebar += '<li class><a href="#' + name2id(t.name) + '_' + name2id(c.name) + '">' + menuitem + '</a></li>';
 888                                 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>';
 889                                 $.each(c.values, function(x, f) {
 890                                         var c = null;
 891                                         var h = options.chartsHeight / 2;
 892                                         switch(f.type) {
 893                                                 case 'net'         : h = options.chartsHeight; break;
 894                                                 case 'tc'          : h = options.chartsHeight; break;
 895                                                 case 'ap_bandwidth': h = options.chartsHeight; break;
 896                                                 case 'ap_bitrate'  : h = options.chartsHeight; break;
 897                                         }
 898
 899                                         html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
 900                                                 + ' data-width="100%"'
 901                                                 + ' data-height="' + h.toString() + 'px"'
 902                                                 + ' data-before="0"'
 903                                                 + ' data-after="-' + duration.toString() + '"'
 904                                                 + ' data-colors="' + c + '"'
 905                                                 + ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
 906                                                 + ' role="application"></div>';
 907                                 });
 908                                 html += '</div>'; // netdata-group-container
 909                         });
 910                         sidebar += '</ul>';
 911                 }
 912                 else if(t.name === 'disk') {
 913                         var disks = uniq_with_list(t.charts, function(c) { return c.family; });
 914
 915                         sidebar += '<ul class="nav">';
 916                         $.each(disks, function(j, c) {
 917                                 sidebar += '<li class><a href="#' + name2id(c.name) + '">' + c.name + '</a></li>';
 918                                 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>';
 919                                 $.each(c.values, function(x, f) {
 920                                         var c = null;
 921                                         var h = options.chartsHeight / 2;
 922                                         switch(f.type) {
 923                                                 case 'disk'        : h = options.chartsHeight; break;
 924                                                 case 'disk_backlog': c = '#DD4477'; break;
 925                                                 case 'disk_util'   : c = '#109618'; break;
 926                                                 case 'disk_qops'   : c = '#E67300'; break;
 927                                         }
 928
 929                                         html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
 930                                                 + ' data-width="100%"'
 931                                                 + ' data-height="' + h.toString() + 'px"'
 932                                                 + ' data-before="0"'
 933                                                 + ' data-after="-' + duration.toString() + '"'
 934                                                 + ' data-colors="' + c + '"'
 935                                                 + ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
 936                                                 + ' role="application"></div>';
 937                                 });
 938                                 html += '</div>'; // netdata-group-container
 939                         });
 940                         sidebar += '</ul>';
 941                 }
 942                 else if(t.name === 'apps') {
 943                         $.each(t.charts, function(x, f) {
 944                                 var c = null;
 945                                 var h = options.chartsHeight / 2;
 946                                 switch(f.id) {
 947                                         case 'apps.cpu'         : h = options.chartsHeight; break;
 948                                         case 'apps.preads'      : h = options.chartsHeight; break;
 949                                         case 'apps.pwrites'     : h = options.chartsHeight; break;
 950                                         case 'apps.mem'         : h = options.chartsHeight; break;
 951                                         case 'apps.major_faults': h = options.chartsHeight; break;
 952                                 }
 953
 954                                 html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
 955                                         + ' data-width="100%"'
 956                                         + ' data-height="' + h.toString() + 'px"'
 957                                         + ' data-before="0"'
 958                                         + ' data-after="-' + duration.toString() + '"'
 959                                         + ' data-colors="' + c + '"'
 960                                         + ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
 961                                         + ' role="application"></div>';
 962                         });
 963                 }
 964                 else {
 965                         $.each(t.charts, function(x, f) {
 966                                 html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
 967                                         + ' data-width="' + pcent_width.toString() + '%"'
 968                                         + ' data-height="' + options.chartsHeight.toString() + 'px"'
 969                                         + ' data-before="0"'
 970                                         + ' data-after="-' + duration.toString() + '"'
 971                                         + ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
 972                                         + ' role="application"></div>';
 973                         });
 974                 }
 975
 976                 sidebar += '</li>';
 977                 html += '</div>'; // document
 978                 html += '</div>'; // section
 979                 html += '<hr role="separator"/>';
 980         });
 981         sidebar += '</ul>';
 982 /*
 983         // show the colors
 984         html += '<br/><div class="row">'
 985         $.each(NETDATA.colors, function(i, c){
 986                 html += '<div style="display: inline-block;"><div style="display: inline-block; width: 100px; height: 100px; background: ' + c + ';"></div><br/>' + c + '</div>';
 987         });
 988         html += '</div>'
 989 */
 990         div.innerHTML = html;
 991         document.getElementById('sidebar').innerHTML = sidebar;
 992
 993         // resize all charts - without starting the background thread
 994         // this has to be done while NETDATA is paused
 995         // if we ommit this, the affix menu will be wrong, since all
 996         // the Dom elements are initially zero-sized
 997         NETDATA.parseDom();
 998
 999         // let it run (update the charts)
1000         NETDATA.unpause();
1001
1002         // check if we have to jump to a specific section
1003         var hash = location.hash.replace('#','');
1004         if(hash != '') {
1005                 // Clear the hash in the URL
1006                 // location.hash = '';   // delete front "//" if you want to change the address bar
1007                 var offset = $(location.hash).offset();
1008                 if(typeof offset !== 'undefined')
1009                         $('html, body').animate({ scrollTop: offset.top }, 0);
1010         }
1011
1012         /* activate bootstrap sidebar (affix) */
1013         $('#sidebar').affix({
1014                 offset: {
1015                         top: (document.location.hostname === demo_hostname)?150:0,
1016                         bottom: 0
1017                 }
1018         });
1019
1020         /* fix scrolling of very long affix lists
1021            http://stackoverflow.com/questions/21691585/bootstrap-3-1-0-affix-too-long
1022          */
1023         $('#sidebar').on('affixed.bs.affix', function() {
1024                 $(this).removeAttr('style');
1025         });
1026
1027         /* activate bootstrap scrollspy (needed for sidebar) */
1028         $(document.body).scrollspy({
1029                 target: '#sidebar',
1030                 offset: $(window).height() / 3 // controls the diff of the <hX> element to the top, to select it
1031         });
1032
1033         document.getElementById('footer').style.display = 'block';
1034
1035
1036         var update_options_modal = function() {
1037                 // console.log('update_options_modal');
1038
1039                 var sync_option = function(option) {
1040                         var self = $('#' + option);
1041
1042                         if(self.prop('checked') !== NETDATA.getOption(option)) {
1043                                 // console.log('switching ' + option.toString());
1044                                 self.bootstrapToggle(NETDATA.getOption(option)?'on':'off');
1045                         }
1046                 }
1047
1048                 sync_option('eliminate_zero_dimensions');
1049                 sync_option('destroy_on_hide');
1050                 sync_option('parallel_refresher');
1051                 sync_option('concurrent_refreshes');
1052                 sync_option('sync_selection');
1053                 sync_option('sync_pan_and_zoom');
1054                 sync_option('stop_updates_when_focus_is_lost');
1055                 sync_option('smooth_plot');
1056
1057                 if(NETDATA.getOption('parallel_refresher') === false) {
1058                         $('#concurrent_refreshes_row').hide();
1059                 }
1060                 else {
1061                         $('#concurrent_refreshes_row').show();
1062                 }
1063         };
1064         NETDATA.setOption('setOptionCallback', update_options_modal);
1065
1066         // handle options changes
1067         $('#eliminate_zero_dimensions').change(function()       { NETDATA.setOption('eliminate_zero_dimensions', $(this).prop('checked')); });
1068         $('#destroy_on_hide').change(function()                 { NETDATA.setOption('destroy_on_hide', $(this).prop('checked')); });
1069         $('#parallel_refresher').change(function()              { NETDATA.setOption('parallel_refresher', $(this).prop('checked')); });
1070         $('#concurrent_refreshes').change(function()            { NETDATA.setOption('concurrent_refreshes', $(this).prop('checked')); });
1071         $('#sync_selection').change(function()                  { NETDATA.setOption('sync_selection', $(this).prop('checked')); });
1072         $('#sync_pan_and_zoom').change(function()               { NETDATA.setOption('sync_pan_and_zoom', $(this).prop('checked')); });
1073         $('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); });
1074         $('#smooth_plot').change(function()                     { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
1075
1076         if(document.location.hostname === demo_hostname)
1077                 setTimeout(function() {
1078                         $('#welcomeModal').modal();
1079                 }, 1000);
1080 }
1081
1082 NETDATA.ready(function() {
1083
1084         $('#welcomeModal').on('hidden.bs.modal', function (e) {
1085                 NETDATA.updatedDom();
1086         });
1087         $('#welcomeModal').on('shown.bs.modal', function (e) {
1088                 NETDATA.updatedDom();
1089         });
1090
1091         // download all the charts the server knows
1092         NETDATA.chartRegistry.downloadAll(NETDATA.serverDefault, function(data) {
1093
1094                 // pause the NETDATA thread that updates the charts
1095                 NETDATA.pause(function() {
1096
1097                         // prepare our DOM
1098                         // this will be called when NETDATA is paused
1099                         prepareScreen(data);
1100                 });
1101         });
1102 });
1103
1104 </script>