4 <title>NetData Demo Sites Dashboard</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"></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;
71 display: inline-block;
75 .mysparkline-overchart-label {
86 .mysparkline-overchart-value {
95 text-shadow: #333 0px 0px 2px;
101 <body style="text-align: center;">
103 <div class="container">
105 <div style="text-align: center; font-size: 13vw; height: 14vw;">
108 <div style="text-align: center; font-size: 2vw; height: 2.5vw;">
109 real-time performance monitoring
111 <div style="width:80%; text-align: right; font-size: 2.7vw;">
112 done... <strong>real-time</strong>!
114 <div style="padding-top: 3vw; padding-bottom: 1vw; text-align: center; font-size: 2vw;">
115 this dashboard gets its charts, from <b>3 netdata</b> servers
118 <div style="width: 100%; text-align: center; padding-top: 2vw;">
119 <div style="width: 100%; text-align: center;">
121 <div style="width: 25%; display: inline-block;">
122 <div data-netdata="netdata.requests"
123 data-host="//netdata1.firehol.org"
124 data-title="EU - London"
125 data-chart-library="gauge"
129 data-colors="#558855"
132 <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata1.firehol.org'" style="font-size: 1.5vw;">Enter London!</button>
133 <div style="font-size: 0.8vw;">
134 Donated by DigitalOcean.com
137 <div style="width: 25%; display: inline-block;">
138 <div data-netdata="netdata.requests"
139 data-host="//netdata2.firehol.org"
140 data-title="US - Atlanta"
141 data-chart-library="gauge"
145 data-colors="#AA5555"
148 <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata2.firehol.org'" style="font-size: 1.5vw;">Enter Atlanta!</button>
149 <div style="font-size: 0.8vw;">
153 <div style="width: 25%; display: inline-block;">
154 <div data-netdata="netdata.requests"
155 data-host="//netdata3.firehol.org"
156 data-title="EU - Greece"
157 data-chart-library="gauge"
161 data-colors="#5555AA"
164 <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata3.firehol.org'" style="font-size: 1.5vw;">Come to Greece!</button>
165 <div style="font-size: 0.8vw;">
172 <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 2vw;">
173 the servers are not aware of this unified dashboard,
175 each server is not aware of the other 2 servers,
177 but on this dashboard they <b>behave like one</b>!
179 <div style="padding-top: 1vw; width: 100%; text-align: center; font-size: 1.5vw;">
180 <i class="fa fa-comment" aria-hidden="true"></i>
181 hover on a chart below, or drag it to show the past - <b>the others will follow</b>!
183 (double click on a chart to reset them all)
186 <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
187 <div style="padding-top: 1vw; padding-bottom: 1vw;">
188 Our <code>nginx</code> web servers recent requests/s:
191 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
192 <div class="mysparkline-overchart-label">
193 <b>EU - London</b> web requests/s
195 <div class="mysparkline-overchart-value" id="nginx.requests.netdata" >
197 <div data-netdata="nginx.requests"
198 data-dimensions="requests"
199 data-host="//netdata1.firehol.org"
200 data-chart-library="dygraph"
201 data-dygraph-theme="sparkline"
202 data-dygraph-type="area"
206 data-colors="#558855"
207 data-show-value-of-requests-at="nginx.requests.netdata"
211 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
212 <div class="mysparkline-overchart-label">
213 <b>US - Atlanta</b> web requests/s
215 <div class="mysparkline-overchart-value" id="nginx.requests.netdata2" >
217 <div data-netdata="nginx.requests"
218 data-dimensions="requests"
219 data-host="//netdata2.firehol.org"
220 data-chart-library="dygraph"
221 data-dygraph-theme="sparkline"
222 data-dygraph-type="area"
226 data-colors="#AA5555"
227 data-show-value-of-requests-at="nginx.requests.netdata2"
231 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
232 <div class="mysparkline-overchart-label">
233 <b>EU - Greece</b> web requests/s
235 <div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
237 <div data-netdata="nginx.requests"
238 data-dimensions="requests"
239 data-host="//netdata3.firehol.org"
240 data-chart-library="dygraph"
241 data-dygraph-theme="sparkline"
242 data-dygraph-type="area"
246 data-colors="#5555AA"
247 data-show-value-of-requests-at="nginx.requests.netdata3"
252 <div style="width: 100%; text-align: right; font-size: 1vw;">
253 <i class="fa fa-comment" aria-hidden="true"></i> these charts are draggable and touchable, double click them to reset them
257 <div style="padding-top: 4vw; font-size: 1.5vw;">
258 Our bandwidth consumption per service
260 (Linux QoS configured by our <a href="https://github.com/firehol/netdata/wiki/You-should-install-QoS-on-all-your-servers">FireQOS</a>):
264 <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
265 <li role="presentation" class="active"><a href="#outbout" aria-controls="outbout" role="tab" data-toggle="tab">Outbound</a></li>
266 <li role="presentation"><a href="#inbound" aria-controls="inbound" role="tab" data-toggle="tab">Inbound</a></li>
270 <div class="tab-content">
271 <div role="tabpanel" class="tab-pane active" id="outbout">
272 <div data-netdata="tc.world_out"
273 data-host="//netdata1.firehol.org"
274 data-chart-library="dygraph"
275 data-title="EU - London, traffic we send per service"
278 data-min-height="150px"
282 <div data-netdata="tc.world_out"
283 data-host="//netdata2.firehol.org"
284 data-chart-library="dygraph"
285 data-title="US - Atlanta, traffic we send per service"
288 data-min-height="150px"
292 <div data-netdata="tc.world_out"
293 data-host="//netdata3.firehol.org"
294 data-chart-library="dygraph"
295 data-title="EU - Greece, traffic we send per service"
298 data-min-height="150px"
302 <div role="tabpanel" class="tab-pane" id="inbound">
303 <div data-netdata="tc.world_in"
304 data-host="//netdata1.firehol.org"
305 data-chart-library="dygraph"
306 data-title="EU - London, traffic we receive per service"
309 data-min-height="150px"
313 <div data-netdata="tc.world_in"
314 data-host="//netdata2.firehol.org"
315 data-chart-library="dygraph"
316 data-title="US - Atlanta, traffic we receive per service"
319 data-min-height="150px"
323 <div data-netdata="tc.world_in"
324 data-host="//netdata3.firehol.org"
325 data-chart-library="dygraph"
326 data-title="EU - Greece, traffic we receive per service"
329 data-min-height="150px"
334 <div style="width: 100%; text-align: right; font-size: 1vw;">
335 <i class="fa fa-comment" aria-hidden="true"></i> <i>these legends are interactive and the charts are resizable here ^^^</i>
338 <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
339 <div style="padding-top: 1vw; padding-bottom: 1vw;">
342 (iptables SYNPROXY configured by our <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>):
345 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
346 <div class="mysparkline-overchart-label">
347 <b>EU - London</b>, TCP SYN packets/s received
349 <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata1" >
351 <div data-netdata="netfilter.synproxy_syn_received"
352 data-dimensions="received"
353 data-host="//netdata1.firehol.org"
354 data-chart-library="dygraph"
355 data-dygraph-theme="sparkline"
356 data-dygraph-type="area"
360 data-colors="#558855"
361 data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata1"
365 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
366 <div class="mysparkline-overchart-label">
367 <b>US - Atlanta</b>, TCP SYN packets/s received
369 <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata2" >
371 <div data-netdata="netfilter.synproxy_syn_received"
372 data-dimensions="received"
373 data-host="//netdata2.firehol.org"
374 data-chart-library="dygraph"
375 data-dygraph-theme="sparkline"
376 data-dygraph-type="area"
380 data-colors="#885555"
381 data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata2"
385 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
386 <div class="mysparkline-overchart-label">
387 <b>EU - Greece</b>, TCP SYN packets/s received
389 <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
391 <div data-netdata="netfilter.synproxy_syn_received"
392 data-dimensions="received"
393 data-host="//netdata3.firehol.org"
394 data-chart-library="dygraph"
395 data-dygraph-theme="sparkline"
396 data-dygraph-type="area"
400 data-colors="#555588"
401 data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
405 <div style="width: 100%; text-align: right; font-size: 1vw;">
406 <i class="fa fa-comment" aria-hidden="true"></i> <i>did you notice the decimal numbers?
407 <br/>netdata interpolates collected values at second boundaries, with nanosecond detail!</i>
411 <div style="padding-top: 4vw; font-size: 1.5vw;">
412 CPU Utilization on our servers
415 <div style="padding-top: 1vw;">
416 <div data-netdata="system.cpu"
417 data-host="//netdata1.firehol.org"
418 data-chart-library="dygraph"
419 data-title="EU - London, CPU Usage"
422 data-min-height="150px"
426 <div data-netdata="system.cpu"
427 data-host="//netdata2.firehol.org"
428 data-chart-library="dygraph"
429 data-title="US - Atlanta, CPU Usage"
432 data-min-height="150px"
436 <div data-netdata="system.cpu"
437 data-host="//netdata3.firehol.org"
438 data-chart-library="dygraph"
439 data-title="EU - Greece, CPU Usage"
442 data-min-height="150px"
446 <div style="width: 100%; text-align: right; font-size: 1vw;">
447 <i class="fa fa-comment" aria-hidden="true"></i> <i>what does it take so much CPU?
448 <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>
451 <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
452 <div style="padding-top: 1vw; padding-bottom: 1vw;">
453 CPU Usage of the netdata user
455 netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
457 and <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.)
460 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
461 <div class="mysparkline-overchart-label">
462 <b>EU - London</b>, CPU % of a single core
464 <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
466 <div data-netdata="users.cpu"
467 data-dimensions="netdata"
468 data-host="//netdata1.firehol.org"
469 data-chart-library="dygraph"
470 data-dygraph-theme="sparkline"
471 data-dygraph-type="area"
475 data-colors="#558855"
476 data-show-value-of-netdata-at="users.cpu.netdata1"
480 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
481 <div class="mysparkline-overchart-label">
482 <b>US - Atlanta</b>, CPU % of a single core
484 <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
486 <div data-netdata="users.cpu"
487 data-dimensions="netdata"
488 data-host="//netdata2.firehol.org"
489 data-chart-library="dygraph"
490 data-dygraph-theme="sparkline"
491 data-dygraph-type="area"
495 data-colors="#885555"
496 data-show-value-of-netdata-at="users.cpu.netdata2"
500 <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
501 <div class="mysparkline-overchart-label">
502 <b>EU - Greece</b>, CPU % of a single core
504 <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
506 <div data-netdata="users.cpu"
507 data-dimensions="netdata"
508 data-host="//netdata3.firehol.org"
509 data-chart-library="dygraph"
510 data-dygraph-theme="sparkline"
511 data-dygraph-type="area"
515 data-colors="#555588"
516 data-show-value-of-netdata-at="users.cpu.netdata3"
520 <div style="width: 100%; text-align: right; font-size: 1vw;">
521 <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>!
522 <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.
523 <br/>and including the chart refreshes for the dashboards of all viewers.</i>
526 <div style="padding-top: 6vw; width: 100%; text-align: center; font-size: 2vw;">
529 jump to <a href="https://github.com/firehol/netdata/">the netdata page at github</a>!
531 remember to motivate us with a <b>Github Star</b>.