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         .affix {
 113                 position: static;
 114                 top: 70px !important;
 115                 /*width: 220px;*/
 116         }
 117
 118         .affix-top {
 119                 /*width: 220px;*/
 120         }
 121
 122         .dashboard-sidebar {
 123                 max-height: calc(100% - 70px) !important;
 124                 overflow-y: auto;
 125                 /*width: 220px !important;*/
 126         }
 127
 128         /* By default it's not affixed in mobile views, so undo that */
 129         .dashboard-sidebar.affix {
 130                 position: static;
 131         }
 132
 133         @media (min-width: 768px) {
 134                 .dashboard-sidebar {
 135                         padding-left: 20px;
 136                 }
 137         }
 138
 139         /* First level of nav */
 140         .dashboard-sidenav {
 141                 margin-top: 20px;
 142                 margin-bottom: 20px;
 143         }
 144
 145         /* All levels of nav */
 146         .dashboard-sidebar .nav > li > a {
 147                 display: block;
 148                 padding: 4px 20px;
 149                 font-size: 13px;
 150                 font-weight: 500;
 151                 color: #767676;
 152         }
 153         .dashboard-sidebar .nav > li > a:hover,
 154         .dashboard-sidebar .nav > li > a:focus {
 155                 padding-left: 19px;
 156                 color: #563d7c;
 157                 text-decoration: none;
 158                 background-color: transparent;
 159                 border-left: 1px solid #563d7c;
 160         }
 161         .dashboard-sidebar .nav > .active > a,
 162         .dashboard-sidebar .nav > .active:hover > a,
 163         .dashboard-sidebar .nav > .active:focus > a {
 164                 padding-left: 18px;
 165                 font-weight: bold;
 166                 color: #563d7c;
 167                 background-color: transparent;
 168                 border-left: 2px solid #563d7c;
 169         }
 170
 171         /* Nav: second level (shown on .active) */
 172         .dashboard-sidebar .nav .nav {
 173                 display: none; /* Hide by default, but at >768px, show it */
 174                 padding-bottom: 10px;
 175         }
 176         .dashboard-sidebar .nav .nav > li > a {
 177                 padding-top: 1px;
 178                 padding-bottom: 1px;
 179                 padding-left: 30px;
 180                 font-size: 12px;
 181                 font-weight: normal;
 182         }
 183         .dashboard-sidebar .nav .nav > li > a:hover,
 184         .dashboard-sidebar .nav .nav > li > a:focus {
 185                 padding-left: 29px;
 186         }
 187         .dashboard-sidebar .nav .nav > .active > a,
 188         .dashboard-sidebar .nav .nav > .active:hover > a,
 189         .dashboard-sidebar .nav .nav > .active:focus > a {
 190                 padding-left: 28px;
 191                 font-weight: 500;
 192         }
 193
 194         /* Back to top (hidden on mobile) */
 195         .back-to-top,
 196         .dashboard-theme-toggle {
 197                 display: none;
 198                 padding: 4px 10px;
 199                 margin-top: 10px;
 200                 margin-left: 10px;
 201                 font-size: 12px;
 202                 font-weight: 500;
 203                 color: #999;
 204         }
 205         .back-to-top:hover,
 206         .dashboard-theme-toggle:hover {
 207                 color: #563d7c;
 208                 text-decoration: none;
 209         }
 210         .dashboard-theme-toggle {
 211                 margin-top: 0;
 212         }
 213
 214         @media (min-width: 768px) {
 215                 .back-to-top,
 216                 .dashboard-theme-toggle {
 217                         display: block;
 218                 }
 219
 220                 /* Widen the fixed sidebar */
 221                 .dashboard-sidebar.affix,
 222                 .dashboard-sidebar.affix-top,
 223                 .dashboard-sidebar.affix-bottom {
 224                         width: 200px !important;
 225                 }
 226
 227                 .dashboard-sidebar.affix {
 228                         position: fixed; /* Undo the static from mobile first approach */
 229                         top: 20px;
 230                 }
 231
 232                 .dashboard-sidebar.affix-bottom {
 233                         position: absolute; /* Undo the static from mobile first approach */
 234                 }
 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
 243         /* Show and affix the side nav when space allows it */
 244         @media (min-width: 992px) {
 245                 .dashboard-sidebar .nav > .active > ul {
 246                         display: block;
 247                 }
 248
 249                 /* Widen the fixed sidebar */
 250                 .dashboard-sidebar.affix,
 251                 .dashboard-sidebar.affix-top,
 252                 .dashboard-sidebar.affix-bottom {
 253                         width: 200px !important;
 254                 }
 255                 .dashboard-sidebar.affix {
 256                         position: fixed; /* Undo the static from mobile first approach */
 257                         top: 20px;
 258                 }
 259                 .dashboard-sidebar.affix-bottom {
 260                         position: absolute; /* Undo the static from mobile first approach */
 261                 }
 262                 .dashboard-sidebar.affix-bottom .dashboard-sidenav,
 263                 .dashboard-sidebar.affix .dashboard-sidenav {
 264                         margin-top: 0;
 265                         margin-bottom: 0;
 266                 }
 267         }
 268
 269         @media (min-width: 1200px) {
 270                 /* Widen the fixed sidebar again */
 271                 .dashboard-sidebar.affix-bottom,
 272                 .dashboard-sidebar.affix-top,
 273                 .dashboard-sidebar.affix {
 274                         width: 263px;
 275                 }
 276         }
 277         </style>
 278
 279         <!-- you can set your netdata server globally, by ucommenting this -->
 280         <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
 281         <!-- <script> netdataServer = "http://box:19999"; </script> -->
 282
 283         <!-- load the dashboard manager - it will do the rest -->
 284         <script>var netdataTheme = 'slate';</script>
 285         <script type="text/javascript" src="dashboard.js?v25"></script>
 286 </head>
 287
 288 <body data-spy="scroll" data-target="#sidebar">
 289         <nav class="navbar navbar-default navbar-fixed-top" role="banner">
 290                 <div class="container">
 291                         <div class="navbar-header">
 292                                 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
 293                                         <span class="sr-only">Toggle navigation</span>
 294                                         <span class="icon-bar"></span>
 295                                         <span class="icon-bar"></span>
 296                                         <span class="icon-bar"></span>
 297                                 </button>
 298                                 <a href="/" class="navbar-brand" id="hostname">netdata</a>
 299                         </div>
 300                         <nav class="collapse navbar-collapse navbar-right" role="navigation">
 301                                 <ul class="nav navbar-nav">
 302                                         <li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-cog"></i> settings</a></li>
 303                                         <li><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
 304 <!--                                    <li><a href="old/" class="btn" target="_blank"><i class="fa fa-step-backward"></i> old dashboard</a></li> -->
 305                                         <li><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> help</a></li>
 306 <!--                                    <li><a href="#sec">Visualize</a></li>
 307                                         <li><a href="#sec">Prototype</a></li>
 308 -->                             </ul>
 309                         </nav>
 310                 </div>
 311         </nav>
 312
 313         <div id="masthead" style="display: none;">
 314                 <div class="container">
 315                         <div class="row">
 316                                 <div class="col-md-7">
 317                                         <h1>Netdata
 318                                                 <p class="lead">Real-time performance monitoring, in the greatest possible detail</p>
 319                                         </h1>
 320                                 </div>
 321                                 <div class="col-md-5">
 322                                         <div class="well well-lg">
 323                                                 <div class="row">
 324                                                 <div class="col-md-6">
 325                                                         <b>Drag</b> charts to pan.
 326                                                         <b>Shift + wheel</b> on them, to zoom in and out.
 327                                                         <b>Double-click</b> on them, to reset.
 328                                                         <b>Hover</b> on them too!
 329                                                         </div>
 330                                                 <div class="col-md-6">
 331                                                         <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>
 332                                                         </div>
 333                                                 </div>
 334                                         </div>
 335                                 </div>
 336                         </div>
 337                 </div>
 338         </div>
 339
 340         <div class="container">
 341                 <div class="row">
 342                         <div class="col-md-10" role="main">
 343                                 <div id="charts_div"></div>
 344                         </div>
 345                         <div class="col-md-2" role="complementary">
 346                                 <nav class="dashboard-sidebar hidden-print hidden-xs hidden-sm" id="sidebar" role="menu"></nav>
 347                         </div>
 348                 </div>
 349         </div>
 350
 351         <div id="footer" class="container" style="display: none;">
 352                 <div class="row">
 353                         <div class="col-md-10" role="main">
 354                                 <div class="p">
 355                                         <big><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></big><br/>
 356                                         <i class="fa fa-copyright"></i> Copyright 2016, Costa Tsaousis.<br/>
 357                                         Released under <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GPL v3 or later</a>.<br/>
 358                                 </div>
 359                                 <div class="p">
 360                                         <small>
 361                                                 <a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a> re-distributes these software tools:
 362
 363                                                 <i class="fa fa-circle"></i> The excellent <a href="http://dygraphs.com/" target="_blank">Dygraphs.com</a> web chart library,
 364                                                 <i class="fa fa-copyright"></i> Copyright 2009, Dan Vanderkam, <a href="http://dygraphs.com/legal.html" target="_blank">MIT License</a>
 365
 366                                                 <i class="fa fa-circle"></i> <a href="http://omnipotent.net/jquery.sparkline/" target="_blank">jQuery Sparklines</a> web chart library,
 367                                                 <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>
 368
 369                                                 <i class="fa fa-circle"></i> <a href="http://benpickles.github.io/peity/" target="_blank">Peity</a> web chart library,
 370                                                 <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>
 371
 372                                                 <i class="fa fa-circle"></i> <a href="https://rendro.github.io/easy-pie-chart/" target="_blank">Easy Pie Chart</a> web chart library,
 373                                                 <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>
 374
 375                                                 <i class="fa fa-circle"></i> <a href="http://bernii.github.io/gauge.js/" target="_blank">Gauge.js</a> web chart library,
 376                                                 <i class="fa fa-copyright"></i> Copyright, Bernard Kobos, <a href="http://bernii.github.io/gauge.js/" target="_blank">MIT License</a>
 377
 378                                                 <i class="fa fa-circle"></i> <a href="https://jquery.org/" target="_blank">jQuery</a>,
 379                                                 <i class="fa fa-copyright"></i> Copyright 2015, jQuery Foundation, <a href="https://jquery.org/license/" target="_blank">MIT License</a>
 380
 381                                                 <i class="fa fa-circle"></i> <a href="http://getbootstrap.com/getting-started/" target="_blank">Bootstrap</a>,
 382                                                 <i class="fa fa-copyright"></i> Copyright 2015, Twitter, <a href="http://getbootstrap.com/getting-started/#license-faqs" target="_blank">MIT License</a>
 383
 384                                                 <i class="fa fa-circle"></i> <a href="http://www.bootstraptoggle.com/" target="_blank">Bootstrap Toggle</a>,
 385                                                 <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>
 386
 387                                                 <i class="fa fa-circle"></i> <a href="https://jamesflorentino.github.io/nanoScrollerJS/" target="_blank">NanoScroller</a>,
 388                                                 <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>
 389
 390                                                 <i class="fa fa-circle"></i> <a href="https://github.com/marcj/css-element-queries" target="_blank">CSS Element Queries</a>,
 391                                                 <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>
 392
 393                                                 <i class="fa fa-circle"></i> <a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">FontAwesome</a>,
 394                                                 <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>
 395
 396                                                 <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.
 397
 398                                                 <i class="fa fa-circle"></i> <a href="http://morrisjs.github.io/morris.js/" target="_blank">morris.js</a>,
 399                                                 <i class="fa fa-copyright"></i> Copyright 2013, Olly Smith, <a href="http://morrisjs.github.io/morris.js/" target="_blank">Simplified BSD License</a>
 400
 401                                                 <i class="fa fa-circle"></i> <a href="http://raphaeljs.com/" target="_blank">Raphaël</a>,
 402                                                 <i class="fa fa-copyright"></i> Copyright 2008, Dmitry Baranovskiy, <a href="http://raphaeljs.com/license.html" target="_blank">MIT License</a>
 403
 404                                                 <i class="fa fa-circle"></i> <a href="http://C3js.org/" target="_blank">C3</a>,
 405                                                 <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>
 406
 407                                                 <i class="fa fa-circle"></i> <a href="http://D3js.org/" target="_blank">D3</a>,
 408                                                 <i class="fa fa-copyright"></i> Copyright 2015, Mike Bostock, <a href="http://opensource.org/licenses/BSD-3-Clause" target="_blank">BSD License</a>
 409
 410                                         </small>
 411                                 </div>
 412                         </div>
 413                 </div>
 414         </div>
 415
 416         <div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="welcomeModalLabel">
 417                 <div class="modal-dialog modal-lg" role="document">
 418                         <div class="modal-content">
 419                                 <div class="modal-header">
 420                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 421                                         <h4 class="modal-title" id="welcomeModalLabel">Welcome!</h4>
 422                                 </div>
 423                                 <div class="modal-body">
 424                                                 <div class="p">
 425                                                 <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> is the fastest way to visualize metrics. It is a resource efficient, highly optimized system for collecting and visualizing any type of realtime timeseries data, from CPU usage, disk activity, SQL queries, API calls, web site visitors, etc.
 426                                                 </div>
 427                                                 <div class="p">
 428                                                 <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> tries to visualize the truth of <b>now</b>, in its <b>greatest detail</b>, so that you can get insights of what is happening now and what just happened, on your systems and applications.
 429                                                 </div>
 430                                                 <div class="p">
 431                                                 To make a chart in <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b>, you just need a <b>number</b>. Just a number you can read somehow. <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> will turn this number to a real time, interactive, web chart. For collecting these numbers, it supports <a href="https://github.com/firehol/netdata/wiki/External-Plugins" target="_blank">external plugins</a>, even <a href="https://github.com/firehol/netdata/wiki/General-Info---charts.d" target="_blank">shell</a> or <a href="https://github.com/firehol/netdata/wiki/General-Info---charts.d" target="_blank">node.js</a> plugins. Any computer program, in any language, that can print a few lines of text on its standard output, can be a netdata data collector.
 432                                                 </div>
 433                                                 <div class="p">
 434                                                 <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> can embed charts everywhere, like this one <div data-netdata="system.cpu" data-dimensions="system" data-after="-120" data-width="25%" data-height="15px" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-show-value-of-system-at="system.cpu.system.modal.1"></div> (my CPU system usage which is <span id="system.cpu.system.modal.1" style="display: inline-block; width: 40px; text-align: right;"></span>%),
 435                                                 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).
 436                                                 </div>
 437                                                 <div class="p">
 438                                                 You can have <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> charts on your site too. Just give it a <code>div</code> and a real time chart, zoomable and draggable will appear (try it even on these tiny ones - <b>drag</b> them to pan horizontally, <b>shift + drag</b> to zoom in, on <b>chrome shift + mouse wheel</b> to zoom in/out, <b>double click</b> on them to reset them - don't be afraid of <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata</a></b> performance - <a href="https://github.com/firehol/netdata/wiki/Performance" target="_blank">a raspberry pi 2 can sustain 300 charts updates per second</a>!).
 439                                                 </div>
 440                                                 <div class="p">
 441                                                 For more information please refer to the <b><a href="https://github.com/firehol/netdata/wiki" target="_blank">netdata wiki</a></b>.
 442                                                 </div>
 443                                 </div>
 444                                 <div class="modal-footer">
 445                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 446                                 </div>
 447                         </div>
 448                 </div>
 449         </div>
 450
 451         <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel">
 452                 <div class="modal-dialog modal-lg" role="document">
 453                         <div class="modal-content">
 454                                 <div class="modal-header">
 455                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 456                                         <h4 class="modal-title" id="helpModalLabel">Dashboard Help</h4>
 457                                 </div>
 458                                 <div class="modal-body">
 459
 460                                         <h4>Dygraphs (line, area and stacked area charts)</h4>
 461
 462                                         <!-- Nav tabs -->
 463                                         <ul class="nav nav-tabs" role="tablist">
 464                                                 <li role="presentation" class="active"><a href="#help_mouse" aria-controls="help_mouse" role="tab" data-toggle="tab">Mouse Interface</a></li>
 465                                                 <li role="presentation"><a href="#help_touch" aria-controls="help_touch" role="tab" data-toggle="tab">Touch Interface</a></li>
 466                                         </ul>
 467
 468                                         <!-- Tab panes -->
 469                                         <div class="tab-content">
 470                                                 <div role="tabpanel" class="tab-pane active" id="help_mouse">
 471                                                         <div class="p">
 472                                                                 <h4>Mouse Over / Hover</h4>
 473                                                                 Mouse over on a chart to show, at its legend, the values for the timestamp under the mouse (the chart will also highlight the point at the chart).
 474                                                                 <br/>
 475                                                                 All the other visible charts will also show and highlight their values for the same timestamp.
 476                                                         </div>
 477                                                         <hr/>
 478                                                         <div class="p">
 479                                                                 <h4>Drag Chart Contents</h4>
 480                                                                 Drag the contents of a chart to pan it horizontally.
 481                                                                 <br/>
 482                                                                 All the charts will follow soon after you let the chart alone (this little delay is by design: it speeds up your browser and lets you focus on what you are exploring).
 483                                                                 <br/>
 484                                                                 Once a chart is panned, auto refreshing stops for all charts. To enable it again, <b>double click</b> a panned chart.
 485                                                         </div>
 486                                                         <hr/>
 487                                                         <div class="p">
 488                                                                 <h4>Double Click</h4>
 489                                                                 Double Click a chart to reset all the charts to their default auto-refreshing state.
 490                                                         </div>
 491                                                         <hr/>
 492                                                         <div class="p">
 493                                                                 <h4>SHIFT + Drag</h4>
 494                                                                 While pressing the shift key, click on the contents of a chart and move the mouse to select an area, to zoom in. The other charts will follow too. Zooming is performed in two phases:
 495                                                                 <ul>
 496                                                                         <li>The already loaded chart contents are zoomed (low resolution)</li>
 497                                                                         <li>New data are transfered from the netdata server, to refresh the chart with possibly more detail.</li>
 498                                                                 </ul>
 499                                                                 Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, <b>double click</b> a zoomed chart.
 500                                                         </div>
 501                                                         <hr/>
 502                                                         <div class="p">
 503                                                                 <h4>SHIFT + Mouse Wheel <small>(does not work on firefox and IE/Edge)</small></h4>
 504                                                                 While pressing the shift key and the mouse pointer is over the contents of a chart, scroll the mouse wheel to zoom in or out. This kind of zooming is aligned to center below the mouse pointer. The other charts will follow too.
 505                                                                 <br/>
 506                                                                 Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, <b>double click</b> a zoomed chart.
 507                                                         </div>
 508                                                         <hr/>
 509                                                         <div class="p">
 510                                                                 <h4>Legend Operations</h4>
 511                                                                 Click on the label or value of a dimension, will select / unselect this dimension.
 512                                                                 <br/>
 513                                                                 You can press any of the SHIFT or CONTROL keys and then click on legend labels or values, to select / unselect multiple dimensions.
 514                                                         </div>
 515                                                 </div>
 516                                                 <div role="tabpanel" class="tab-pane" id="help_touch">
 517                                                         <div class="p">
 518                                                                 <h4>Single Tap</h4>
 519                                                                 Single Tap on the contents of a chart to show, at its legend, the values for the timestamp tapped (the chart will also highlight the point at the chart).
 520                                                                 <br/>
 521                                                                 All the other visible charts will also show and highlight their values for the same timestamp.
 522                                                         </div>
 523                                                         <hr/>
 524                                                         <div class="p">
 525                                                                 <h4>Drag Chart Contents</h4>
 526                                                                 Touch and Drag the contents of a chart to pan it horizontally.
 527                                                                 <br/>
 528                                                                 All the charts will follow soon after you let the chart alone (this little delay is by design: it speeds up your browser and lets you focus on what you are exploring).
 529                                                                 <br/>
 530                                                                 Once a chart is panned, auto refreshing stops for all charts. To enable it again, <b>double tap</b> a panned chart.
 531                                                         </div>
 532                                                         <hr/>
 533                                                         <div class="p">
 534                                                                 <h4>Double Tap</h4>
 535                                                                 Double tap a chart to reset all the charts to their default auto-refreshing state.
 536                                                         </div>
 537                                                         <hr/>
 538                                                         <div class="p">
 539                                                                 <h4>Zoom <small>(does not work on firefox and IE/Edge)</small></h4>
 540                                                                 With two fingers, zoom in or out.
 541                                                                 <br/>
 542                                                                 Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, <b>double click</b> a zoomed chart.
 543                                                         </div>
 544                                                         <hr/>
 545                                                         <div class="p">
 546                                                                 <h4>Legend Operations</h4>
 547                                                                 Tap on the label or value of a dimension, will select / unselect this dimension.
 548                                                         </div>
 549                                                 </div>
 550                                         </div>
 551                                 </div>
 552                                 <div class="modal-footer">
 553                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 554                                 </div>
 555                         </div>
 556                 </div>
 557         </div>
 558
 559         <div class="modal fade" id="optionsModal" tabindex="-1" role="dialog" aria-labelledby="optionsModalLabel">
 560                 <div class="modal-dialog modal-lg" role="document">
 561                         <div class="modal-content">
 562                                 <div class="modal-header">
 563                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 564                                         <h4 class="modal-title" id="optionsModalLabel">netdata dashboard options</h4>
 565                                 </div>
 566                                 <div class="modal-body">
 567                                         <center>
 568                                                 <small style="color: #BBBBBB;">Settings take effect immediately and are saved permanently to browser local storage (except the refresh on focus / always option).
 569                                                 <br/>
 570                                                 To reset all options (including charts sizes) to their defaults, click <a href="#" onclick="NETDATA.resetOptions(); return false;">here</a>.</small>
 571                                         </center>
 572                                         <div style="padding: 10px;"></div>
 573
 574                                         <!-- Nav tabs -->
 575                                         <ul class="nav nav-tabs" role="tablist">
 576                                                 <li role="presentation" class="active"><a href="#settings_performance" aria-controls="settings_performance" role="tab" data-toggle="tab">Performance</a></li>
 577                                                 <li role="presentation"><a href="#settings_sync" aria-controls="settings_sync" role="tab" data-toggle="tab">Synchronization</a></li>
 578                                                 <li role="presentation"><a href="#settings_visual" aria-controls="settings_visual" role="tab" data-toggle="tab">Visual</a></li>
 579                                         </ul>
 580
 581                                         <!-- Tab panes -->
 582                                         <div class="tab-content">
 583                                                 <div role="tabpanel" class="tab-pane active" id="settings_performance">
 584                                                         <form id="optionsForm" method="get" class="form-horizontal">
 585                                                                 <div class="form-group">
 586                                                                         <table>
 587                                                                         <tr class="option-row">
 588                                                                                 <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>
 589                                                                                 <td class="option-info"><strong>When to refresh the charts?</strong><br/>
 590                                                                                         <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>
 591                                                                                 </td>
 592                                                                                 </tr>
 593                                                                         <tr class="option-row">
 594                                                                                 <td class="option-control">
 595                                                                                 <input id="eliminate_zero_dimensions" type="checkbox" checked data-toggle="toggle" data-on="Non Zero" data-off="All" data-width="110px">
 596                                                                                 </td>
 597                                                                                 <td class="option-info"><strong>Which dimensions to show?</strong><br/>
 598                                                                                         <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>
 599                                                                                 </td>
 600                                                                                 </tr>
 601                                                                         <tr class="option-row">
 602                                                                                 <td class="option-control"><input id="destroy_on_hide" type="checkbox" data-toggle="toggle" data-on="Destroy" data-off="Hide" data-width="110px"></td>
 603                                                                                 <td class="option-info"><strong>How to handle hidden charts?</strong><br/>
 604                                                                                         <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>
 605                                                                                 </td>
 606                                                                                 </tr>
 607                                                                         </table>
 608                                                                 </div>
 609                                                         </form>
 610                                                 </div>
 611                                                 <div role="tabpanel" class="tab-pane" id="settings_sync">
 612                                                         <form id="optionsForm" method="get" class="form-horizontal">
 613                                                                 <div class="form-group">
 614                                                                         <table>
 615                                                                         <tr class="option-row">
 616                                                                                 <td class="option-control"><input id="parallel_refresher" type="checkbox" checked data-toggle="toggle" data-on="Parallel" data-off="Sequencial" data-width="110px"></td>
 617                                                                                 <td class="option-info"><strong>Which chart refresh policy to use?</strong><br/>
 618                                                                                         <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>
 619                                                                                 </td>
 620                                                                                 </tr>
 621                                                                         <tr class="option-row" id="concurrent_refreshes_row">
 622                                                                                 <td class="option-control"></td>
 623                                                                                 <td class="option-info">
 624                                                                                         <table>
 625                                                                                         <tr class="option-row">
 626                                                                                         <td class="option-control">
 627                                                                                         <input id="concurrent_refreshes" type="checkbox" checked data-toggle="toggle" data-on="Resync" data-off="Best Effort" data-width="110px">
 628                                                                                         </td>
 629                                                                                         <td class="option-info">
 630                                                                                         <strong>Shall we re-sync chart refreshes?</strong><br/>
 631                                                                                         <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>
 632                                                                                         </td>
 633                                                                                         </tr>
 634                                                                                         </table>
 635                                                                                 </td>
 636                                                                                 </tr>
 637                                                                         <tr class="option-row">
 638                                                                                 <td class="option-control"><input id="sync_selection" type="checkbox" checked data-toggle="toggle" data-on="Sync" data-off="Don't Sync" data-onstyle="success" data-offstyle="danger" data-width="110px"></td>
 639                                                                                 <td class="option-info"><strong>Sync hover selection on all charts?</strong><br/>
 640                                                                                         <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>
 641                                                                                 </td>
 642                                                                                 </tr>
 643                                                                         <tr class="option-row">
 644                                                                                 <td class="option-control"><input id="sync_pan_and_zoom" type="checkbox" checked data-toggle="toggle"  data-on="Sync" data-off="Don't Sync" data-onstyle="success" data-offstyle="danger" data-width="110px"></td>
 645                                                                                 <td class="option-info"><strong>Sync pan and zoom on all charts?</strong><br/>
 646                                                                                         <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>
 647                                                                                 </td>
 648                                                                                 </tr>
 649                                                                         </table>
 650                                                                 </div>
 651                                                         </form>
 652                                                 </div>
 653                                                 <div role="tabpanel" class="tab-pane" id="settings_visual">
 654                                                         <form id="optionsForm" method="get" class="form-horizontal">
 655                                                                 <div class="form-group">
 656                                                                         <table>
 657                                                                         <tr class="option-row">
 658                                                                                 <td class="option-control"><input id="pan_and_zoom_data_padding" type="checkbox" checked data-toggle="toggle"  data-on="Pad" data-off="Don't Pad" data-width="110px"></td>
 659                                                                                 <td class="option-info"><strong>Enable data padding when panning and zooming?</strong><br/>
 660                                                                                         <small>When set to <b>Pad</b> the charts will be padded with more data, both before and after the visible area, thus giving the impression the whole database is loaded. This padding will happen only after the first pan or zoom operation on the chart (initially all charts have only the visible data). When set to <b>Don't Pad</b> only the visible data will be transfered from the netdata server, even after the first pan and zoom operation.</small>
 661                                                                                 </td>
 662                                                                                 </tr>
 663                                                                         <tr class="option-row">
 664                                                                                 <td class="option-control"><input id="smooth_plot" type="checkbox" checked data-toggle="toggle"  data-on="Smooth" data-off="Rough" data-width="110px"></td>
 665                                                                                 <td class="option-info"><strong>Enable Bézier lines on charts?</strong><br/>
 666                                                                                         <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>
 667                                                                                 </td>
 668                                                                                 </tr>
 669                                                                         </table>
 670                                                                 </div>
 671                                                         </form>
 672                                                 </div>
 673                                         </div>
 674                                 </div>
 675                                 <div class="modal-footer">
 676                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 677                                 </div>
 678                         </div>
 679                 </div>
 680         </div>
 681
 682 <script>
 683
 684 var demo_hostname = 'netdata.firehol.org';
 685 // var demo_hostname = 'box';
 686
 687 if(document.location.hostname === demo_hostname) {
 688         document.getElementById('masthead').style.display = 'block';
 689 }
 690
 691 var options = {
 692         sparklines_registry: {},
 693         submenu_names: {},
 694         data: null,
 695         hostname: 'netdata_server', // will be overwritten by the netdata server
 696         categories: new Array(),
 697         categories_idx: {},
 698         families: new Array(),
 699         families_idx: {},
 700
 701         chartsPerRow: 0,
 702         chartsMinWidth: 1450,
 703         chartsHeight: 180,
 704         sparklinesHeight: 60
 705 };
 706
 707 // generate a sparkline
 708 // used in the documentation
 709 function sparkline(chart, dimension, units) {
 710         var key = chart + '.' + dimension;
 711
 712         if(typeof units === 'undefined')
 713                 units = '';
 714
 715         if(typeof options.sparklines_registry[key] === 'undefined')
 716                 options.sparklines_registry[key] = { count: 1 };
 717         else
 718                 options.sparklines_registry[key].count++;
 719
 720         key = key + '.' + options.sparklines_registry[key].count;
 721
 722         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 + ')';
 723
 724         return h;
 725 }
 726
 727 function chartsPerRow(total) {
 728         if(options.chartsPerRow === 0) {
 729                 width = Math.floor(total / options.chartsMinWidth);
 730                 if(width === 0) width = 1;
 731                 return width;
 732         }
 733         else return options.chartsPerRow;
 734 }
 735
 736 function prioritySort(a, b) {
 737         if(a.priority < b.priority) return -1;
 738         if(a.priority > b.priority) return 1;
 739         if(a.name < b.name) return -1;
 740         return 1;
 741 }
 742
 743 function sortObjectByPriority(object) {
 744         var idx = {};
 745         var sorted = new Array();
 746
 747         for(var i in object) {
 748                 if(typeof idx[i] === 'undefined') {
 749                         idx[i] = object[i];
 750                         sorted.push(i);
 751                 }
 752         }
 753
 754         sorted.sort(function(a, b) {
 755                 if(idx[a].priority < idx[b].priority) return -1;
 756                 if(idx[a].priority > idx[b].priority) return 1;
 757                 if(a < b) return -1;
 758                 return 1;
 759         });
 760
 761         return sorted;
 762 }
 763
 764 // ----------------------------------------------------------------------------
 765
 766 function gaugeChart(title, width, dimensions, colors) {
 767         if(typeof colors === 'undefined')
 768                 colors = '';
 769
 770         if(typeof dimensions === 'undefined')
 771                 dimensions = '';
 772
 773         return '<div data-netdata="CHART_UNIQUE_ID"'
 774                                                         + ' data-dimensions="' + dimensions + '"'
 775                                                         + ' data-chart-library="gauge"'
 776                                                         + ' data-gauge-adjust="width"'
 777                                                         + ' data-title="' + title + '"'
 778                                                         + ' data-width="' + width + '"'
 779                                                         + ' data-before="0"'
 780                                                         + ' data-after="-CHART_DURATION"'
 781                                                         + ' data-points="CHART_DURATION"'
 782                                                         + ' data-colors="' + colors + '"'
 783                                                         + ' role="application"></div>';
 784 }
 785
 786 // ----------------------------------------------------------------------------
 787
 788 var menuData = {
 789         'system': {
 790                 title: 'System Overview',
 791                 info: 'Overview of the key system metrics.'
 792         },
 793
 794         'ap': {
 795                 title: 'Access Points',
 796                 info: undefined
 797         },
 798
 799         'tc': {
 800                 title: 'Quality of Service',
 801                 info: 'Netdata collects and visualizes tc class utilization using its <a href="https://github.com/firehol/netdata/blob/master/plugins.d/tc-qos-helper.sh" target="_blank">tc-helper plugin</a>. If you also use <a href="http://firehol.org/#fireqos" target="_blank">FireQOS</a> for setting up QoS, netdata automatically collects interface and class names. If your QoS configuration includes overheads calculation, the values shown here will include these overheads (the total bandwidth for the same interface as reported in the Network Interfaces section, will be lower than the total bandwidth reported here). Also, data collection may have a slight time difference compared to the interface (QoS data collection is implemented with a BASH script, so a shift in data collection of a few milliseconds should be justified).'
 802         },
 803
 804         'net': {
 805                 title: 'Network Interfaces',
 806                 info: 'Per network interface statistics collected from <code>/proc/net/dev</code>.'
 807         },
 808
 809         'ipv4': {
 810                 title: 'IPv4 Networking',
 811                 info: undefined
 812         },
 813
 814         'ipvs': {
 815                 title: 'IP Virtual Server',
 816                 info: undefined
 817         },
 818
 819         'netfilter': {
 820                 title: 'Firewall (netfilter)',
 821                 info: undefined
 822         },
 823
 824         'cpu': {
 825                 title: 'CPUs',
 826                 info: undefined
 827         },
 828
 829         'mem': {
 830                 title: 'Memory',
 831                 info: undefined
 832         },
 833
 834         'disk': {
 835                 title: 'Disks',
 836                 info: undefined
 837         },
 838
 839         'sensors': {
 840                 title: 'Sensors',
 841                 info: undefined
 842         },
 843
 844         'nfsd': {
 845                 title: 'File Server (nfsd)',
 846                 info: undefined
 847         },
 848
 849         'apps': {
 850                 title: 'Applications',
 851                 info: 'Per application statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics for applications of interest, defined in <code>/etc/netdata/apps_groups.conf</code> (the default is <a href="https://github.com/firehol/netdata/blob/master/conf.d/apps_groups.conf" target="_blank">here</a>). The plugin 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>.',
 852                 height: 1.5
 853         },
 854
 855         'netdata': {
 856                 title: 'Netdata Monitoring',
 857                 info: undefined
 858         },
 859
 860         'example': {
 861                 title: 'Example Charts',
 862                 info: undefined
 863         },
 864 };
 865
 866 var submenuData = {
 867         'mem.ksm': {
 868                 title: 'Memory Deduper',
 869                 info: 'Kernel Same-page Merging (KSM) is the kernel memory de-duper.'
 870         }
 871 };
 872
 873 var chartData = {
 874         'system.cpu': {
 875                 info: 'Total CPU utilization (all cores). 100% here means there is no CPU idle time at all. You can get per core usage at the <a href="#cpu">CPUs</a> section and per application usage at the <a href="#apps">Applications Monitoring</a> section.<br/>Keep an eye on <b>iowait</b> ' + sparkline('system.cpu', 'iowait', '%') + '. If it is constantly high, your disks are a bottleneck and they slow your system down.<br/>Another important metric worth monitoring, is <b>softirq</b> ' + sparkline('system.cpu', 'softirq', '%') + '. A constantly high percentage of softirq may indicate network drivers issues.'
 876         },
 877
 878         'system.load': {
 879                 info: 'Current system load read from <code>/proc/loadavg</code>.',
 880                 height: 0.7
 881         },
 882
 883         'system.io': {
 884                 info: 'Total Disk I/O, for all disks, read from <code>/proc/vmstat</code>. You can get detailed information about each disk at the <a href="#disk">Disks</a> section and per application Disk usage at the <a href="#apps">Applications Monitoring</a> section.'
 885         },
 886
 887         'system.swapio': {
 888                 info: 'Total Swap I/O, read from <code>/proc/vmstat</code>. (netdata measures both <code>in</code> and <code>out</code>. If either of them is not shown in the chart, it is because it is zero - you can change the page settings to always render all the available dimensions on all charts).'
 889         },
 890
 891         'system.pgfaults': {
 892                 info: 'Total page faults, read from <code>/proc/vmstat</code>. <b>Major page faults</b> indicates that the system is using its swap. You can find which applications use the swap at the <a href="#apps">Applications Monitoring</a> section.'
 893         },
 894
 895         'system.entropy': {
 896                 colors: '#CC22AA',
 897                 info: '<a href="https://en.wikipedia.org/wiki/Entropy_(computing)" target="_blank">Entropy</a>, read from <code>/proc/sys/kernel/random/entropy_avail</code>, is like a pool of random numbers that are mainly used in cryptography. It is advised that the pool remains always <a href="https://blog.cloudflare.com/ensuring-randomness-with-linuxs-random-number-generator/" target="_blank">above 200</a>. If the pool of entropy gets empty, you risk your security to be predictable and you should install a user-space random numbers generating daemon, like <a href="http://www.issihosts.com/haveged/" target="_blank">haveged</a>, to keep the pool in healthy levels.'
 898         },
 899
 900         'system.forks': {
 901                 colors: '#5555DD',
 902                 info: 'The number of new processes created per second, read from <code>/proc/stat</code>.'
 903         },
 904
 905         'system.intr': {
 906                 colors: '#DD5555',
 907                 info: 'Total number of CPU interrupts, read from <code>/proc/stat</code>. Check <code>system.interrupts</code> that gives more detail about each interrupt and also the <a href="#cpu">CPUs</a> section where interrupts are analyzed per CPU core.'
 908         },
 909
 910         'system.interrupts': {
 911                 info: 'CPU interrupts in detail, read from <code>/proc/interrupts</code>. At the <a href="#cpu">CPUs</a> section, interrupts are analyzed per CPU core.'
 912         },
 913
 914         'system.softirqs': {
 915                 info: 'CPU softirqs in detail, read from <code>/proc/softirqs</code>. At the <a href="#cpu">CPUs</a> section, softirqs are analyzed per CPU core.'
 916         },
 917
 918         'system.processes': {
 919                 info: 'System processes, read from <code>/proc/stat</code>. <b>Blocked</b> are processes that are willing to execute but they cannot, e.g. because they wait for disk activity.'
 920         },
 921
 922         'system.active_processes': {
 923                 info: 'All system active processes, read from <code>/proc/loadavg</code>.'
 924         },
 925
 926         'system.ctxt': {
 927                 info: '<a href="https://en.wikipedia.org/wiki/Context_switch" target="_blank">Context Switches</a>, read from <code>/proc/stat</code>, is the switching of the CPU from one process, task or thread to another. If there are many processes or threads willing to execute and very few CPU cores available to handle them, the system is making more context switching to balance the CPU resources among them. The whole process is computationally intensive. The more the context switches, the slower the system gets.'
 928         },
 929
 930         'system.idlejitter': {
 931                 colors: '#5555AA',
 932                 info: 'Idle jitter is calculated by netdata. A thread is spawned that requests to sleep for a few microseconds. When the system wakes it up, it measures how many microseconds have passed. The 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).'
 933         },
 934
 935         'system.ipv4': {
 936                 info: 'Total IPv4 Traffic, read from <code>/proc/net/netstat</code>. This includes <code>lo</code> device traffic.'
 937         },
 938
 939         'system.ram': {
 940                 info: 'System memory, read from <code>/proc/meminfo</code>.'
 941         },
 942
 943         'system.swap': {
 944                 info: 'System swap memory, read from <code>/proc/meminfo</code>.'
 945         },
 946
 947         'mem.ksm_savings': {
 948                 heads: [
 949                         gaugeChart('Saved', '12%', 'savings', '#0099CC')
 950                 ]
 951         },
 952
 953         'mem.ksm_ratios': {
 954                 heads: [
 955                         function(id) {
 956                                 return  '<div data-netdata="' + id + '"'
 957                                         + ' data-gauge-max-value="100"'
 958                                         + ' data-chart-library="gauge"'
 959                                         + ' data-title="Savings"'
 960                                         + ' data-units="percentage %"'
 961                                         + ' data-gauge-adjust="width"'
 962                                         + ' data-width="12%"'
 963                                         + ' data-before="0"'
 964                                         + ' data-after="-CHART_DURATION"'
 965                                         + ' data-points="CHART_DURATION"'
 966                                         + ' role="application"></div>';
 967                         }
 968                 ]
 969         },
 970
 971         'mem.committed': {
 972                 colors: NETDATA.colors[3]
 973         },
 974
 975         'apps.cpu': {
 976                 height: 2.0
 977         },
 978
 979         'apps.preads': {
 980                 height: 2.0
 981         },
 982
 983         'apps.pwrites': {
 984                 height: 2.0
 985         },
 986
 987         'tc.qos': {
 988                 heads: [
 989                         function(id) {
 990                                 if(id.match(/.*-ifb$/))
 991                                         return gaugeChart('Inbound', '12%', '', '#5555AA');
 992                                 else
 993                                         return gaugeChart('Outbound', '12%', '', '#AA9900');
 994                         }
 995                 ]
 996         },
 997
 998         'net.net': {
 999                 heads: [
1000                         gaugeChart('Received', '12%', 'received'),
1001                         gaugeChart('Sent', '12%', 'sent')
1002                 ]
1003         },
1004
1005         'disk.util': {
1006                 colors: '#FF5588',
1007                 heads: [
1008                         gaugeChart('Utilization', '12%', '', '#FF5588')
1009                 ]
1010         },
1011
1012         'disk.backlog': {
1013                 colors: '#0099CC'
1014         },
1015
1016         'disk.io': {
1017                 heads: [
1018                         gaugeChart('Read', '12%', 'reads'),
1019                         gaugeChart('Write', '12%', 'writes')
1020                 ]
1021         },
1022
1023         'netfilter.sockets': {
1024                 colors: '#88AA00',
1025                 heads: [
1026                         gaugeChart('Active Connections', '12%', '', '#88AA00')
1027                 ]
1028         },
1029
1030         'netfilter.new': {
1031                 heads: [
1032                         gaugeChart('New Connections', '12%', 'new', '#5555AA')
1033                 ]
1034         },
1035
1036         'disk.iotime': {
1037                 height: 0.5
1038         },
1039         'disk.mops': {
1040                 height: 0.5
1041         },
1042         'disk.svctm': {
1043                 height: 0.5
1044         },
1045         'disk.avgsz': {
1046                 height: 0.5
1047         },
1048         'disk.await': {
1049                 height: 0.5
1050         },
1051
1052         'apache.connections': {
1053                 colors: NETDATA.colors[4],
1054                 mainheads: [
1055                         gaugeChart('Connections', '12%', '', NETDATA.colors[4])
1056                 ]
1057         },
1058
1059         'apache.requests': {
1060                 colors: NETDATA.colors[0],
1061                 mainheads: [
1062                         gaugeChart('Connections', '12%', '', NETDATA.colors[0])
1063                 ]
1064         },
1065
1066         'apache.net': {
1067                 colors: NETDATA.colors[3],
1068                 mainheads: [
1069                         gaugeChart('Bandwidth', '12%', '', NETDATA.colors[3])
1070                 ]
1071         },
1072
1073         'apache.workers': {
1074                 mainheads: [
1075                         function(id) {
1076                                 return  '<div data-netdata="' + id + '"'
1077                                         + ' data-dimensions="busy"'
1078                                         + ' data-append-options="percentage"'
1079                                         + ' data-gauge-max-value="100"'
1080                                         + ' data-chart-library="gauge"'
1081                                         + ' data-title="Workers Utilization"'
1082                                         + ' data-units="percentage %"'
1083                                         + ' data-gauge-adjust="width"'
1084                                         + ' data-width="12%"'
1085                                         + ' data-before="0"'
1086                                         + ' data-after="-CHART_DURATION"'
1087                                         + ' data-points="CHART_DURATION"'
1088                                         + ' role="application"></div>';
1089                         }
1090                 ]
1091         },
1092
1093         'apache.bytesperreq': {
1094                 colors: NETDATA.colors[3],
1095                 height: 0.5
1096         },
1097
1098         'apache.reqpersec': {
1099                 colors: NETDATA.colors[4],
1100                 height: 0.5
1101         },
1102
1103         'apache.bytespersec': {
1104                 colors: NETDATA.colors[6],
1105                 height: 0.5
1106         },
1107
1108         'nginx.connections': {
1109                 colors: NETDATA.colors[4],
1110                 mainheads: [
1111                         gaugeChart('Connections', '12%', '', NETDATA.colors[4])
1112                 ]
1113         },
1114
1115         'nginx.requests': {
1116                 colors: NETDATA.colors[0],
1117                 mainheads: [
1118                         gaugeChart('Requests', '12%', '', NETDATA.colors[0])
1119                 ]
1120         }
1121 };
1122
1123 function anyAttribute(obj, attr, key, def) {
1124         if(typeof obj[key] !== 'undefined') {
1125                 if(typeof obj[key][attr] !== 'undefined')
1126                         return obj[key][attr];
1127         }
1128         return def;
1129 }
1130
1131 function menuTitle(menu) {
1132         return anyAttribute(menuData, 'title', menu, menu);
1133 }
1134
1135 function menuInfo(menu) {
1136         return anyAttribute(menuData, 'title', menu, null);
1137 }
1138
1139 function menuHeight(menu, relative) {
1140         return anyAttribute(menuData, 'height', menu, 1.0) * relative;
1141 }
1142
1143 function submenuTitle(menu, submenu) {
1144         var key = menu + '.' + submenu;
1145         return anyAttribute(submenuData, 'title', key, submenu);
1146 }
1147
1148 function submenuInfo(menu, submenu) {
1149         var key = menu + '.' + submenu;
1150         return anyAttribute(submenuData, 'info', key, null);
1151 }
1152
1153 function submenuHeight(menu, submenu, relative) {
1154         var key = menu + '.' + submenu;
1155         return anyAttribute(submenuData, 'height', key, 1.0) * relative;
1156 }
1157
1158
1159 function chartInfo(id) {
1160         if(typeof chartData[id] !== 'undefined' && typeof chartData[id].info !== 'undefined')
1161                 return '<div class="chart-message netdata-chart-alignment" role="document">' + chartData[id].info + '</div>';
1162         else
1163                 return '';
1164 }
1165
1166 function chartHeight(id, def) {
1167         if(typeof chartData[id] !== 'undefined' && typeof chartData[id].height !== 'undefined')
1168                 return def * chartData[id].height;
1169         else
1170                 return def;
1171 }
1172
1173
1174 // ----------------------------------------------------------------------------
1175
1176 // enrich the data structure returned by netdata
1177 // to reflect our menu system and content
1178 function enrichChartData(chart) {
1179         var tmp = chart.type.split('_')[0];
1180
1181         switch(tmp) {
1182                 case 'ap':
1183                 case 'net':
1184                 case 'disk':
1185                         chart.menu = tmp;
1186                         break;
1187
1188                 case 'tc':
1189                         chart.menu = tmp;
1190
1191                         // find the interface name from the name
1192                         if(typeof options.submenu_names[chart.family] === 'undefined' || options.submenu_names[chart.family] === chart.family)
1193                                 options.submenu_names[chart.family] = chart.name.split('.')[1].split('_')[0];
1194
1195                         // increase the priority of IFB devices
1196                         if(chart.id.match(/.*-ifb$/))
1197                                 chart.priority--;
1198
1199                         break;
1200
1201                 default:
1202                         chart.menu = chart.type;
1203                         break;
1204         }
1205
1206         chart.submenu = chart.family;
1207 }
1208
1209 // ----------------------------------------------------------------------------
1210
1211 function name2id(s) {
1212         return s
1213                 .replace(' ', '_')
1214                 .replace('(', '_')
1215                 .replace(')', '_')
1216                 .replace('.', '_')
1217                 .replace('/', '_');
1218 }
1219
1220 function headMain(charts, duration) {
1221         var head = '';
1222
1223         if(typeof charts['system.swap'] !== 'undefined')
1224                 head += '<div style="margin-right: 10px;" data-netdata="system.swap"'
1225                 + ' data-dimensions="free"'
1226                 + ' data-append-options="percentage"'
1227                 + ' data-chart-library="easypiechart"'
1228                 + ' data-title="Free Swap"'
1229                 + ' data-units="%"'
1230                 + ' data-easypiechart-max-value="100"'
1231                 + ' data-width="8%"'
1232                 + ' data-before="0"'
1233                 + ' data-after="-' + duration.toString() + '"'
1234                 + ' data-points="' + duration.toString() + '"'
1235                 + ' data-colors="#DD4400"'
1236                 + ' role="application"></div>';
1237
1238         if(typeof charts['system.io'] !== 'undefined') {
1239                 head += '<div style="margin-right: 10px;" data-netdata="system.io"'
1240                 + ' data-dimensions="in"'
1241                 + ' data-chart-library="easypiechart"'
1242                 + ' data-title="Disk Read"'
1243                 + ' data-units="KB / s"'
1244                 + ' data-width="10%"'
1245                 + ' data-before="0"'
1246                 + ' data-after="-' + duration.toString() + '"'
1247                 + ' data-points="' + duration.toString() + '"'
1248                 + ' role="application"></div>';
1249
1250                 head += '<div style="margin-right: 10px;" data-netdata="system.io"'
1251                 + ' data-dimensions="out"'
1252                 + ' data-chart-library="easypiechart"'
1253                 + ' data-title="Disk Write"'
1254                 + ' data-units="KB / s"'
1255                 + ' data-width="10%"'
1256                 + ' data-before="0"'
1257                 + ' data-after="-' + duration.toString() + '"'
1258                 + ' data-points="' + duration.toString() + '"'
1259                 + ' role="application"></div>';
1260         }
1261
1262         if(typeof charts['system.cpu'] !== 'undefined')
1263                 head += '<div data-netdata="system.cpu"'
1264                 + ' data-chart-library="gauge"'
1265                 + ' data-title="CPU"'
1266                 + ' data-units="%"'
1267                 + ' data-gauge-max-value="100"'
1268                 + ' data-width="18%"'
1269                 + ' data-after="-' + duration.toString() + '"'
1270                 + ' data-points="' + duration.toString() + '"'
1271                 + ' data-colors="' + NETDATA.colors[12] + '"'
1272                 + ' role="application"></div>';
1273
1274         if(typeof charts['system.ipv4'] !== 'undefined') {
1275                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
1276                 + ' data-dimensions="received"'
1277                 + ' data-chart-library="easypiechart"'
1278                 + ' data-title="IPv4 Inbound"'
1279                 + ' data-units="kbps"'
1280                 + ' data-width="10%"'
1281                 + ' data-before="0"'
1282                 + ' data-after="-' + duration.toString() + '"'
1283                 + ' data-points="' + duration.toString() + '"'
1284                 + ' role="application"></div>';
1285
1286                 head += '<div style="margin-right: 10px;" data-netdata="system.ipv4"'
1287                 + ' data-dimensions="sent"'
1288                 + ' data-chart-library="easypiechart"'
1289                 + ' data-title="IPv4 Outbound"'
1290                 + ' data-units="kbps"'
1291                 + ' data-width="10%"'
1292                 + ' data-before="0"'
1293                 + ' data-after="-' + duration.toString() + '"'
1294                 + ' data-points="' + duration.toString() + '"'
1295                 + ' role="application"></div>';
1296         }
1297
1298         if(typeof charts['system.ram'] !== 'undefined')
1299                 head += '<div style="margin-right: 10px;" data-netdata="system.ram"'
1300                 + ' data-dimensions="cached|free"'
1301                 + ' data-append-options="percentage"'
1302                 + ' data-chart-library="easypiechart"'
1303                 + ' data-title="Available RAM"'
1304                 + ' data-units="%"'
1305                 + ' data-easypiechart-max-value="100"'
1306                 + ' data-width="8%"'
1307                 + ' data-after="-' + duration.toString() + '"'
1308                 + ' data-points="' + duration.toString() + '"'
1309                 + ' data-colors="' + NETDATA.colors[7] + '"'
1310                 + ' role="application"></div>';
1311
1312         return head;
1313 }
1314
1315 function generateHeadCharts(type, chart, duration) {
1316         var head = '';
1317         var hcharts = anyAttribute(chartData, type, chart.context, []);
1318         if(hcharts.length > 0) {
1319                 var hi = 0, hlen = hcharts.length;
1320                 while(hi < hlen) {
1321                         if(typeof hcharts[hi] === 'function')
1322                                 head += hcharts[hi](chart.id).replace('CHART_DURATION', duration.toString()).replace('CHART_UNIQUE_ID', chart.id);
1323                         else
1324                                 head += hcharts[hi].replace('CHART_DURATION', duration.toString()).replace('CHART_UNIQUE_ID', chart.id);
1325                         hi++;
1326                 }
1327         }
1328         return head;
1329 }
1330
1331 function renderPage(menus, data) {
1332         var div = document.getElementById('charts_div');
1333         var pcent_width = Math.floor(100 / chartsPerRow($(div).width()));
1334
1335         // find the proper duration for per-second updates
1336         var duration = Math.round(($(div).width() * pcent_width / 100 * data.update_every / 3) / 60) * 60;
1337         var html = '';
1338         var sidebar = '<ul class="nav dashboard-sidenav" data-spy="affix" id="sidebar_ul">';
1339         var mainhead = headMain(data.charts, duration);
1340
1341         // sort the menus
1342         var main = sortObjectByPriority(menus);
1343         var i = 0, len = main.length;
1344         while(i < len) {
1345                 var menu = main[i++];
1346
1347                 // generate an entry at the main menu
1348
1349                 sidebar += '<li class=""><a href="#' + menu + '">' + menus[menu].title + '</a><ul class="nav">';
1350                 html += '<div role="section"><div role="sectionhead"><h1 id="' + menu + '" role="heading">' + menus[menu].title + '</h1></div><div id="' + menu + '" role="document">';
1351
1352                 if(menus[menu].info !== null)
1353                         html += menus[menu].info;
1354
1355                 // console.log(' >> ' + menu + ' (' + menus[menu].priority + '): ' + menus[menu].title);
1356
1357                 var shtml = '';
1358                 var mhead = '<div style="width: 100%; text-align: center;">' + mainhead;
1359                 mainhead = '';
1360
1361                 // sort the submenus of this menu
1362                 var sub = sortObjectByPriority(menus[menu].submenus);
1363                 var si = 0, slen = sub.length;
1364                 while(si < slen) {
1365                         var submenu = sub[si++];
1366
1367                         // generate an entry at the submenu
1368                         sidebar += '<li class><a href="#' + name2id(menu + '_' + submenu) + '">' + menus[menu].submenus[submenu].title + '</a></li>';
1369                         shtml += '<div class="netdata-group-container" id="submenu_' + name2id(menu + '_' + submenu) + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + name2id(menu + '_' + submenu) + '" class="netdata-chart-alignment" role="heading">' + menus[menu].submenus[submenu].title + '</h2>';
1370
1371                         if(menus[menu].submenus[submenu].info !== null)
1372                                 shtml += '<div class="chart-message netdata-chart-alignment" role="document">' + menus[menu].submenus[submenu].info + '</div>';
1373
1374                         var head = '<div style="width: 100%; text-align: center;">';
1375                         var chtml = '';
1376
1377                         // console.log('    \------- ' + submenu + ' (' + menus[menu].submenus[submenu].priority + '): ' + menus[menu].submenus[submenu].title);
1378
1379                         // sort the charts in this submenu of this menu
1380                         menus[menu].submenus[submenu].charts.sort(prioritySort);
1381                         var ci = 0, clen = menus[menu].submenus[submenu].charts.length;
1382                         while(ci < clen) {
1383                                 var chart = menus[menu].submenus[submenu].charts[ci++];
1384
1385                                 // generate the submenu heading charts
1386                                 mhead += generateHeadCharts('mainheads', chart, duration);
1387                                 head += generateHeadCharts('heads', chart, duration);
1388
1389                                 // generate the chart
1390                                 chtml += chartInfo(chart.context) + '<div data-netdata="' + chart.id + '"'
1391                                         + ' data-width="' + pcent_width.toString() + '%"'
1392                                         + ' data-height="' + chartHeight(chart.context, options.chartsHeight).toString() + 'px"'
1393                                         + ' data-before="0"'
1394                                         + ' data-after="-' + duration.toString() + '"'
1395                                         + ' data-id="' + name2id(options.hostname + '/' + chart.id) + '"'
1396                                         + ' data-colors="' + anyAttribute(chartData, 'colors', chart.context, '') + '"'
1397                                         + ' role="application"></div>';
1398
1399                                 // console.log('         \------- ' + chart.id + ' (' + chart.priority + '): ' + chart.context  + ' height: ' + menus[menu].submenus[submenu].height);
1400                         }
1401
1402                         head += '</div>';
1403                         shtml += head + chtml + '</div>';
1404                 }
1405
1406                 mhead += '</div>';
1407                 sidebar += '</ul></li>';
1408                 html += mhead + shtml + '</div></div><hr role="separator"/>';
1409         }
1410
1411         sidebar += '</ul>';
1412         div.innerHTML = html;
1413         document.getElementById('sidebar').innerHTML = sidebar;
1414         finalizePage();
1415 }
1416
1417 function renderChartsAndMenu(data) {
1418         var menus = {};
1419         var charts = data.charts;
1420
1421         for(var c in charts) {
1422                 enrichChartData(charts[c]);
1423
1424                 // create the menu
1425                 if(typeof menus[charts[c].menu] === 'undefined') {
1426                         menus[charts[c].menu] = {
1427                                 priority: charts[c].priority,
1428                                 submenus: {},
1429                                 title: menuTitle(charts[c].menu),
1430                                 info: menuInfo(charts[c].menu),
1431                                 height: menuHeight(charts[c].menu, options.chartsHeight)
1432                         };
1433                 }
1434
1435                 if(charts[c].priority < menus[charts[c].menu].priority)
1436                         menus[charts[c].menu].priority = charts[c].priority;
1437
1438                 // create the submenu
1439                 if(typeof menus[charts[c].menu].submenus[charts[c].submenu] === 'undefined') {
1440                         menus[charts[c].menu].submenus[charts[c].submenu] = {
1441                                 priority: charts[c].priority,
1442                                 charts: new Array(),
1443                                 title: null,
1444                                 info: submenuInfo(charts[c].menu, charts[c].submenu),
1445                                 height: submenuHeight(charts[c].menu, charts[c].submenu, menus[charts[c].menu].height)
1446                         };
1447                 }
1448
1449                 if(charts[c].priority < menus[charts[c].menu].submenus[charts[c].submenu].priority)
1450                         menus[charts[c].menu].submenus[charts[c].submenu].priority = charts[c].priority;
1451
1452                 // index the chart in the menu/submenu
1453                 menus[charts[c].menu].submenus[charts[c].submenu].charts.push(charts[c]);
1454         }
1455
1456         for(var m in menus) {
1457                 for(var s in menus[m].submenus) {
1458                         // set the family using a name
1459                         if(typeof options.submenu_names[s] !== 'undefined') {
1460                                 menus[m].submenus[s].title = s + ' (' + options.submenu_names[s] + ')';
1461                         }
1462                         else {
1463                                 menus[m].submenus[s].title = submenuTitle(m, s);
1464                         }
1465                 }
1466         }
1467
1468         renderPage(menus, data);
1469 }
1470
1471 function downloadAllCharts(netdata_url) {
1472         if(typeof netdata_url === 'undefined' || netdata_url === null)
1473                 netdata_url = NETDATA.serverDefault;
1474
1475         NETDATA.pause(function() {
1476
1477                 // download all the charts the server knows
1478                 NETDATA.chartRegistry.downloadAll(netdata_url, function(data) {
1479
1480                         options.data = data;
1481                         options.hostname = data.hostname;
1482                         document.getElementById('hostname').innerHTML = options.hostname;
1483                         document.getElementById('hostname').href = NETDATA.serverDefault;
1484                         document.title = options.hostname + ' dashboard';
1485
1486                         renderChartsAndMenu(data);
1487
1488                         // prepare our DOM
1489 //                      prepareScreen(data);
1490
1491                         // due to affix issues, prepareScreen() will unpause
1492                         // netdata as needed
1493                 });
1494         });
1495 }
1496
1497 // ----------------------------------------------------------------------------
1498
1499 function finalizePage() {
1500         // resize all charts - without starting the background thread
1501         // this has to be done while NETDATA is paused
1502         // if we ommit this, the affix menu will be wrong, since all
1503         // the Dom elements are initially zero-sized
1504         NETDATA.parseDom();
1505
1506         // let it run (update the charts)
1507         NETDATA.unpause();
1508
1509         // check if we have to jump to a specific section
1510         var hash = location.hash.replace('#','');
1511         if(hash != '') {
1512                 // Clear the hash in the URL
1513                 // location.hash = '';   // delete front "//" if you want to change the address bar
1514                 var offset = $(location.hash).offset();
1515                 if(typeof offset !== 'undefined')
1516                         $('html, body').animate({ scrollTop: offset.top }, 0);
1517         }
1518
1519         /* activate bootstrap sidebar (affix) */
1520         $('#sidebar').affix({
1521                 offset: {
1522                         top: (document.location.hostname === demo_hostname)?150:0,
1523                         bottom: 0
1524                 }
1525         });
1526
1527         /* fix scrolling of very long affix lists
1528            http://stackoverflow.com/questions/21691585/bootstrap-3-1-0-affix-too-long
1529          */
1530         $('#sidebar').on('affixed.bs.affix', function() {
1531                 $(this).removeAttr('style');
1532         });
1533
1534         /* activate bootstrap scrollspy (needed for sidebar) */
1535         $(document.body).scrollspy({
1536                 target: '#sidebar',
1537                 offset: $(window).height() / 3 // controls the diff of the <hX> element to the top, to select it
1538         });
1539
1540         document.getElementById('footer').style.display = 'block';
1541
1542
1543         var update_options_modal = function() {
1544                 // console.log('update_options_modal');
1545
1546                 var sync_option = function(option) {
1547                         var self = $('#' + option);
1548
1549                         if(self.prop('checked') !== NETDATA.getOption(option)) {
1550                                 // console.log('switching ' + option.toString());
1551                                 self.bootstrapToggle(NETDATA.getOption(option)?'on':'off');
1552                         }
1553                 }
1554
1555                 sync_option('eliminate_zero_dimensions');
1556                 sync_option('destroy_on_hide');
1557                 sync_option('parallel_refresher');
1558                 sync_option('concurrent_refreshes');
1559                 sync_option('sync_selection');
1560                 sync_option('sync_pan_and_zoom');
1561                 sync_option('stop_updates_when_focus_is_lost');
1562                 sync_option('smooth_plot');
1563                 sync_option('pan_and_zoom_data_padding');
1564
1565                 if(NETDATA.getOption('parallel_refresher') === false) {
1566                         $('#concurrent_refreshes_row').hide();
1567                 }
1568                 else {
1569                         $('#concurrent_refreshes_row').show();
1570                 }
1571         };
1572         NETDATA.setOption('setOptionCallback', update_options_modal);
1573
1574         // handle options changes
1575         $('#eliminate_zero_dimensions').change(function()       { NETDATA.setOption('eliminate_zero_dimensions', $(this).prop('checked')); });
1576         $('#destroy_on_hide').change(function()                 { NETDATA.setOption('destroy_on_hide', $(this).prop('checked')); });
1577         $('#parallel_refresher').change(function()              { NETDATA.setOption('parallel_refresher', $(this).prop('checked')); });
1578         $('#concurrent_refreshes').change(function()            { NETDATA.setOption('concurrent_refreshes', $(this).prop('checked')); });
1579         $('#sync_selection').change(function()                  { NETDATA.setOption('sync_selection', $(this).prop('checked')); });
1580         $('#sync_pan_and_zoom').change(function()               { NETDATA.setOption('sync_pan_and_zoom', $(this).prop('checked')); });
1581         $('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); });
1582         $('#smooth_plot').change(function()                     { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
1583         $('#pan_and_zoom_data_padding').change(function()       { NETDATA.setOption('pan_and_zoom_data_padding', $(this).prop('checked')); });
1584
1585         if(document.location.hostname === demo_hostname)
1586                 setTimeout(function() {
1587                         $('#welcomeModal').modal();
1588                 }, 1000);
1589 }
1590
1591 downloadAllCharts();
1592
1593 </script>
1594
1595 </body>
1596 </html>