4 <title>NetData - Real-time performance monitoring, done right!</title>
6 <meta http-equiv="Content-Type" content="text/html; 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">
14 // --- OPTIONS FOR THE DASHBOARD --
16 // this section has to appear before loading dashboard.js
19 // uncomment on of the two themes:
21 // var netdataTheme = 'default'; // this is white
22 var netdataTheme = 'slate'; // this is dark
25 // Set the default netdata server.
26 // on charts without a 'data-host', this one will be used.
27 // the default is the server that dashboard.js is downloaded from.
29 // var netdataServer = 'http://my.server:19999/';
33 --- LOAD dashboard.js ---
35 to host this HTML file on your web server,
36 you have to load dashboard.js from the netdata server.
38 So, pick one the two below
39 If you pick the first, set the server name/IP.
41 The second assumes you host this file on /usr/share/netdata/web
42 and that you have chown it to be owned by netdata:netdata
44 <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
45 <script type="text/javascript" src="dashboard.js?v35"></script>
48 // --- OPTIONS FOR THE CHARTS --
50 // destroy charts not shown (lowers memory on the browsers)
51 // set this to 'yes' to destroy, 'false' to hide the charts
52 NETDATA.options.current.destroy_on_hide = false;
54 // set this to false, to always show all dimensions
55 NETDATA.options.current.eliminate_zero_dimensions = true;
57 // set this to false, to lower the pressure on the browser
58 NETDATA.options.current.concurrent_refreshes = true;
60 // if you need to support slow mobile phones, set this to false
61 NETDATA.options.current.parallel_refresher = true;
63 // set this to false, to always update the charts, even if focus is lost
64 NETDATA.options.current.stop_updates_when_focus_is_lost = true;
75 display: inline-block;
82 .mysparkline-overchart-label {
93 .mysparkline-overchart-value {
102 text-shadow: #333 0px 0px 2px;
107 display: inline-block;
115 display: inline-block;
148 @media only screen and (min-width : 992px) {
153 @media only screen and (max-width : 992px) {
161 <body style="text-align: center;">
163 <div class="container">
165 <div style="text-align: center; font-size: 13vw; height: 14vw;">
168 <div style="text-align: center; font-size: 2vw; height: 2.5vw;">
169 real-time performance monitoring
171 <div style="width:80%; text-align: right; font-size: 2.7vw;">
172 <strong>scaled out</strong>!
174 <div class="mytitle">
175 pick a <b>netdata</b> demo server
177 <div class="mycontent">
178 these demo servers show what you will get by installing <b>netdata</b>
181 <div style="width: 100%; text-align: center; padding-top: 2vw;">
182 <div style="width: 100%; text-align: center;">
184 <div class="mygauge-combo">
185 <div class="mygauge">
186 <div data-netdata="netdata.requests"
187 data-host="//london.my-netdata.io"
188 data-title="EU - London"
189 data-chart-library="gauge"
193 data-colors="#558855"
196 <div class="mygauge-button">
198 <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//london.my-netdata.io/default.html'" style="font-size: 1.5vw;">Enter London!</button>
199 <div style="font-size: 1vw;">
200 Donated by DigitalOcean.com
204 <div class="mygauge-combo">
205 <div class="mygauge">
206 <div data-netdata="netdata.requests"
207 data-host="//atlanta.my-netdata.io"
208 data-title="US - Atlanta"
209 data-chart-library="gauge"
213 data-colors="#AA5555"
216 <div class="mygauge-button">
218 <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//atlanta.my-netdata.io/default.html'" style="font-size: 1.5vw;">Enter Atlanta!</button>
219 <div style="font-size: 1vw;">
224 <div class="mygauge-combo">
225 <div class="mygauge">
226 <div data-netdata="netdata.requests"
227 data-host="//athens.my-netdata.io"
228 data-title="EU - Greece"
229 data-chart-library="gauge"
233 data-colors="#5555AA"
236 <div class="mygauge-button">
238 <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//athens.my-netdata.io/default.html'" style="font-size: 1.5vw;">Come to Greece!</button>
239 <div style="font-size: 0.8vw;">
247 <div class="mytitle">
248 this page is a custom <b>netdata</b> dashboard
250 <div class="mycontent">
251 charts are coming from 3 servers, in parallel
253 the servers are not aware of this multi-server dashboard,
255 each server is not aware of the other 2 servers,
257 but on this dashboard <b>they are one</b>!
259 <div style="padding-top: 1vw; width: 100%; text-align: center; font-size: 1.5vw;">
260 <i class="fa fa-comment" aria-hidden="true"></i>
261 hover on a chart below, or drag it to show the past - <b>the others will follow</b>!
263 double click on a chart to reset them all
266 <div class="mytitle">
267 our <code>ngnix</code> performance
269 <div class="mycontent">
270 (we proxy netdata through nginx, on the demo sites)
274 <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
275 <li role="presentation" class="active"><a href="#nginx_requests" aria-controls="nginx_requests" role="tab" data-toggle="tab">Requests</a></li>
276 <li role="presentation"><a href="#nginx_connections" aria-controls="nginx_connections" role="tab" data-toggle="tab">Connections</a></li>
280 <div class="tab-content">
281 <div role="tabpanel" class="tab-pane active" id="nginx_requests">
282 <div class="mysparkline">
283 <div class="mysparkline-overchart-label">
284 <b>EU - London</b> web requests/s
286 <div class="mysparkline-overchart-value" id="nginx.requests.netdata" >
288 <div data-netdata="nginx.requests"
289 data-dimensions="requests"
290 data-host="//london.my-netdata.io"
291 data-chart-library="dygraph"
292 data-dygraph-theme="sparkline"
293 data-dygraph-type="area"
297 data-colors="#558855"
298 data-show-value-of-requests-at="nginx.requests.netdata"
302 <div class="mysparkline">
303 <div class="mysparkline-overchart-label">
304 <b>US - Atlanta</b> web requests/s
306 <div class="mysparkline-overchart-value" id="nginx.requests.netdata2" >
308 <div data-netdata="nginx.requests"
309 data-dimensions="requests"
310 data-host="//atlanta.my-netdata.io"
311 data-chart-library="dygraph"
312 data-dygraph-theme="sparkline"
313 data-dygraph-type="area"
317 data-colors="#AA5555"
318 data-show-value-of-requests-at="nginx.requests.netdata2"
322 <div class="mysparkline">
323 <div class="mysparkline-overchart-label">
324 <b>EU - Greece</b> web requests/s
326 <div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
328 <div data-netdata="nginx.requests"
329 data-dimensions="requests"
330 data-host="//athens.my-netdata.io"
331 data-chart-library="dygraph"
332 data-dygraph-theme="sparkline"
333 data-dygraph-type="area"
337 data-colors="#5555AA"
338 data-show-value-of-requests-at="nginx.requests.netdata3"
343 <div role="tabpanel" class="tab-pane" id="nginx_connections">
344 <div class="mysparkline">
345 <div class="mysparkline-overchart-label">
346 <b>EU - London</b> active connections
348 <div class="mysparkline-overchart-value" id="nginx.connections.netdata1" >
350 <div data-netdata="nginx.connections"
351 data-dimensions="active"
352 data-host="//london.my-netdata.io"
353 data-chart-library="dygraph"
354 data-dygraph-theme="sparkline"
355 data-dygraph-type="area"
359 data-colors="#558855"
360 data-show-value-of-active-at="nginx.connections.netdata1"
364 <div class="mysparkline">
365 <div class="mysparkline-overchart-label">
366 <b>US - Atlanta</b> active connections
368 <div class="mysparkline-overchart-value" id="nginx.connections.netdata2" >
370 <div data-netdata="nginx.connections"
371 data-dimensions="active"
372 data-host="//atlanta.my-netdata.io"
373 data-chart-library="dygraph"
374 data-dygraph-theme="sparkline"
375 data-dygraph-type="area"
379 data-colors="#AA5555"
380 data-show-value-of-active-at="nginx.connections.netdata2"
384 <div class="mysparkline">
385 <div class="mysparkline-overchart-label">
386 <b>EU - Greece</b> active connections
388 <div class="mysparkline-overchart-value" id="nginx.connections.netdata3" >
390 <div data-netdata="nginx.connections"
391 data-dimensions="active"
392 data-host="//athens.my-netdata.io"
393 data-chart-library="dygraph"
394 data-dygraph-theme="sparkline"
395 data-dygraph-type="area"
399 data-colors="#5555AA"
400 data-show-value-of-active-at="nginx.connections.netdata3"
406 <div style="width: 100%; text-align: right; font-size: 1vw;">
407 <i class="fa fa-comment" aria-hidden="true"></i> these charts are draggable and touchable, double click them to reset them
411 <div class="mytitle">
412 bandwidth consumption on the demo sites
414 <div class="mycontent">
415 Linux QoS is configured by <a href="https://github.com/firehol/netdata/wiki/You-should-install-QoS-on-all-your-servers">FireQOS</a>
419 <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
420 <li role="presentation" class="active"><a href="#outbout" aria-controls="outbout" role="tab" data-toggle="tab">Outbound</a></li>
421 <li role="presentation"><a href="#inbound" aria-controls="inbound" role="tab" data-toggle="tab">Inbound</a></li>
425 <div class="tab-content">
426 <div role="tabpanel" class="tab-pane active" id="outbout">
427 <div class="myfullchart">
428 <div data-netdata="tc.world_out"
429 data-host="//london.my-netdata.io"
430 data-chart-library="dygraph"
431 data-title="EU - London, traffic we send per service"
438 <div class="myfullchart">
439 <div data-netdata="tc.world_out"
440 data-host="//atlanta.my-netdata.io"
441 data-chart-library="dygraph"
442 data-title="US - Atlanta, traffic we send per service"
450 <div class="myfullchart">
451 <div data-netdata="tc.world_out"
452 data-host="//athens.my-netdata.io"
453 data-chart-library="dygraph"
454 data-title="EU - Greece, traffic we send per service"
461 <div role="tabpanel" class="tab-pane" id="inbound">
462 <div class="myfullchart">
463 <div data-netdata="tc.world_in"
464 data-host="//london.my-netdata.io"
465 data-chart-library="dygraph"
466 data-title="EU - London, traffic we receive per service"
474 <div class="myfullchart">
475 <div data-netdata="tc.world_in"
476 data-host="//atlanta.my-netdata.io"
477 data-chart-library="dygraph"
478 data-title="US - Atlanta, traffic we receive per service"
486 <div class="myfullchart">
487 <div data-netdata="tc.world_in"
488 data-host="//athens.my-netdata.io"
489 data-chart-library="dygraph"
490 data-title="EU - Greece, traffic we receive per service"
498 <div style="width: 100%; text-align: right; font-size: 1vw;">
499 <i class="fa fa-comment" aria-hidden="true"></i> <i>these legends are interactive and the charts are resizable here ^^^</i>
502 <div class="mytitle">
503 DDoS protection performance on the demo sites
505 <div class="mycontent">
506 iptables SYNPROXY configured by <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>
509 <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
511 <div class="mysparkline">
512 <div class="mysparkline-overchart-label">
513 <b>EU - London</b>, TCP SYN packets/s received
515 <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata1" >
517 <div data-netdata="netfilter.synproxy_syn_received"
518 data-dimensions="received"
519 data-host="//london.my-netdata.io"
520 data-chart-library="dygraph"
521 data-dygraph-theme="sparkline"
522 data-dygraph-type="area"
526 data-colors="#558855"
527 data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata1"
531 <div class="mysparkline">
532 <div class="mysparkline-overchart-label">
533 <b>US - Atlanta</b>, TCP SYN packets/s received
535 <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata2" >
537 <div data-netdata="netfilter.synproxy_syn_received"
538 data-dimensions="received"
539 data-host="//atlanta.my-netdata.io"
540 data-chart-library="dygraph"
541 data-dygraph-theme="sparkline"
542 data-dygraph-type="area"
546 data-colors="#885555"
547 data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata2"
551 <div class="mysparkline">
552 <div class="mysparkline-overchart-label">
553 <b>EU - Greece</b>, TCP SYN packets/s received
555 <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
557 <div data-netdata="netfilter.synproxy_syn_received"
558 data-dimensions="received"
559 data-host="//athens.my-netdata.io"
560 data-chart-library="dygraph"
561 data-dygraph-theme="sparkline"
562 data-dygraph-type="area"
566 data-colors="#555588"
567 data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
571 <div style="width: 100%; text-align: right; font-size: 1vw;">
572 <i class="fa fa-comment" aria-hidden="true"></i> <i>did you notice the decimal numbers?
573 <br/>netdata interpolates collected values at second boundaries, with nanosecond detail!</i>
577 <div class="mytitle">
578 CPU Utilization of the demo sites
581 <div style="padding-top: 1vw;">
582 <div class="myfullchart">
583 <div data-netdata="system.cpu"
584 data-host="//london.my-netdata.io"
585 data-chart-library="dygraph"
586 data-title="EU - London, CPU Usage"
593 <div class="myfullchart">
594 <div data-netdata="system.cpu"
595 data-host="//atlanta.my-netdata.io"
596 data-chart-library="dygraph"
597 data-title="US - Atlanta, CPU Usage"
604 <div class="myfullchart">
605 <div data-netdata="system.cpu"
606 data-host="//athens.my-netdata.io"
607 data-chart-library="dygraph"
608 data-title="EU - Greece, CPU Usage"
615 <div style="width: 100%; text-align: right; font-size: 1vw;">
616 <i class="fa fa-comment" aria-hidden="true"></i> <i>what is using so much CPU?
617 <br/>The site <a href="//iplists.firehol.org/">iplists.firehol.org</a> is maintained by FireHOL - the CPU is used for comparing security IP Lists.</i>
620 <div class="mytitle">
621 CPU Usage of the netdata user
623 <div class="mycontent">
624 netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
626 and <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.)
629 <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
631 <div class="mysparkline">
632 <div class="mysparkline-overchart-label">
633 <b>EU - London</b>, CPU % of a single core
635 <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
637 <div data-netdata="users.cpu"
638 data-dimensions="netdata"
639 data-host="//london.my-netdata.io"
640 data-chart-library="dygraph"
641 data-dygraph-theme="sparkline"
642 data-dygraph-type="area"
646 data-colors="#558855"
647 data-show-value-of-netdata-at="users.cpu.netdata1"
651 <div class="mysparkline">
652 <div class="mysparkline-overchart-label">
653 <b>US - Atlanta</b>, CPU % of a single core
655 <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
657 <div data-netdata="users.cpu"
658 data-dimensions="netdata"
659 data-host="//atlanta.my-netdata.io"
660 data-chart-library="dygraph"
661 data-dygraph-theme="sparkline"
662 data-dygraph-type="area"
666 data-colors="#885555"
667 data-show-value-of-netdata-at="users.cpu.netdata2"
671 <div class="mysparkline">
672 <div class="mysparkline-overchart-label">
673 <b>EU - Greece</b>, CPU % of a single core
675 <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
677 <div data-netdata="users.cpu"
678 data-dimensions="netdata"
679 data-host="//athens.my-netdata.io"
680 data-chart-library="dygraph"
681 data-dygraph-theme="sparkline"
682 data-dygraph-type="area"
686 data-colors="#555588"
687 data-show-value-of-netdata-at="users.cpu.netdata3"
691 <div style="width: 100%; text-align: right; font-size: 1vw;">
692 <i class="fa fa-comment" aria-hidden="true"></i> <i>this utilization is about the whole netdata process tree and the percentage is of <b>a single core</b>!
693 <br/>including <b>BASH</b> plugins (it monitors <code>mysql</code> on the demo sites), <b>node.js</b> plugins (it monitors <code>bind9</code> on the demo sites), etc.
694 <br/>and including the chart refreshes for the dashboards of all viewers.</i>
697 <div style="padding-top: 6vw; width: 100%; text-align: center; font-size: 2vw;">
700 jump to <a href="https://github.com/firehol/netdata/">the netdata page at github</a>
702 it needs just 3 mins to be installed on your servers!
709 // google analytics when this is used for the home page of the demo sites
710 // you don't need this if you customize this dashboard for your needs
711 setTimeout(function() {
712 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
713 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
714 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
715 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
717 ga('create', 'UA-64295674-3', 'auto');
718 ga('send', 'pageview');