updated demo sites
Costa Tsaousis committed
Jul 3, 2016 at 21:09 UTC
a9bc653b8d01a564b1aa7f9d95a1c00acefbeeb1
1 file changed
+270
-32
web/demosites.html
+270
-32
@@ -51,20 +51,20 @@
51
and that you have chown it to be owned by netdata:netdata
52
-->
53
<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
54
- <script type="text/javascript" src="dashboard.js?v40"></script>
54
+ <script type="text/javascript" src="dashboard.js?v41"></script>
55
56
<script>
57
// --- OPTIONS FOR THE CHARTS --
58
59
// destroy charts not shown (lowers memory on the browsers)
60
- // set this to 'yes' to destroy, 'false' to hide the charts
61
- NETDATA.options.current.destroy_on_hide = false;
60
+ // set this to 'true' to destroy, 'false' to hide the charts
61
+ NETDATA.options.current.destroy_on_hide = true;
62
63
// set this to false, to always show all dimensions
64
NETDATA.options.current.eliminate_zero_dimensions = true;
65
66
// set this to false, to lower the pressure on the browser
67
- NETDATA.options.current.concurrent_refreshes = true;
67
+ NETDATA.options.current.concurrent_refreshes = false;
68
69
// if you need to support slow mobile phones, set this to false
70
NETDATA.options.current.parallel_refresher = true;
@@ -127,8 +127,8 @@ body {
127
.mygauge {
128
position: relative;
129
display: block;
130
- width: 20vw;
131
- height: 12vw;
130
+ width: 18vw;
131
+ height: 11vw;
132
}
133
134
.mygauge-button {
@@ -204,8 +204,8 @@ body {
204
</div>
205
<div class="mygauge-button">
206
<br/> <br/>
207
- <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>
208
- <div style="font-size: 1vw;">
207
+ <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.0vw;">Enter London!</button>
208
+ <div style="font-size: 0.8vw;">
209
Donated by DigitalOcean.com
210
</div>
211
</div>
@@ -224,8 +224,8 @@ body {
224
</div>
225
<div class="mygauge-button">
226
<br/> <br/>
227
- <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>
228
- <div style="font-size: 1vw;">
227
+ <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.0vw;">Enter Atlanta!</button>
228
+ <div style="font-size: 0.8vw;">
229
Donated by CDN77.com
230
</div>
231
</div>
@@ -233,8 +233,8 @@ body {
233
<div class="mygauge-combo">
234
<div class="mygauge">
235
<div data-netdata="netdata.requests"
236
- data-host="//athens.my-netdata.io"
237
- data-title="EU - Greece"
236
+ data-host="//sanfrancisco.netdata.rocks"
237
+ data-title="US - California"
238
data-chart-library="gauge"
239
data-width="100%"
240
data-after="-300"
@@ -244,9 +244,110 @@ body {
244
</div>
245
<div class="mygauge-button">
246
<br/> <br/>
247
- <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>
247
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//sanfrancisco.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter California!</button>
248
<div style="font-size: 0.8vw;">
249
-
249
+ Donated by DigitalOcean.com
250
+ </div>
251
+ </div>
252
+ </div>
253
+ <div class="mygauge-combo">
254
+ <div class="mygauge">
255
+ <div data-netdata="netdata.requests"
256
+ data-host="//toronto.netdata.rocks"
257
+ data-title="Canada"
258
+ data-chart-library="gauge"
259
+ data-width="100%"
260
+ data-after="-300"
261
+ data-points="300"
262
+ data-colors="#885588"
263
+ ></div>
264
+ </div>
265
+ <div class="mygauge-button">
266
+ <br/> <br/>
267
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//toronto.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter Canada!</button>
268
+ <div style="font-size: 0.8vw;">
269
+ Donated by DigitalOcean.com
270
+ </div>
271
+ </div>
272
+ </div>
273
+ <br/> <br/>
274
+ <div class="mygauge-combo">
275
+ <div class="mygauge">
276
+ <div data-netdata="netdata.requests"
277
+ data-host="//frankfurt.netdata.rocks"
278
+ data-title="EU - Germany"
279
+ data-chart-library="easypiechart"
280
+ data-width="75%"
281
+ data-after="-300"
282
+ data-points="300"
283
+ data-colors="#AAAA55"
284
+ ></div>
285
+ </div>
286
+ <div class="mygauge-button">
287
+ <br/> <br/>
288
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//frankfurt.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter Germany!</button>
289
+ <div style="font-size: 0.8vw;">
290
+ Donated by DigitalOcean.com
291
+ </div>
292
+ </div>
293
+ </div>
294
+ <div class="mygauge-combo">
295
+ <div class="mygauge">
296
+ <div data-netdata="netdata.requests"
297
+ data-host="//newyork.netdata.rocks"
298
+ data-title="US - New York"
299
+ data-chart-library="easypiechart"
300
+ data-width="75%"
301
+ data-after="-300"
302
+ data-points="300"
303
+ data-colors="#BB5533"
304
+ ></div>
305
+ </div>
306
+ <div class="mygauge-button">
307
+ <br/> <br/>
308
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//newyork.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter New York!</button>
309
+ <div style="font-size: 0.8vw;">
310
+ Donated by DigitalOcean.com
311
+ </div>
312
+ </div>
313
+ </div>
314
+ <div class="mygauge-combo">
315
+ <div class="mygauge">
316
+ <div data-netdata="netdata.requests"
317
+ data-host="//singapore.netdata.rocks"
318
+ data-title="Signapore"
319
+ data-chart-library="easypiechart"
320
+ data-width="75%"
321
+ data-after="-300"
322
+ data-points="300"
323
+ data-colors="#5588BB"
324
+ ></div>
325
+ </div>
326
+ <div class="mygauge-button">
327
+ <br/> <br/>
328
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//singapore.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter Singapore!</button>
329
+ <div style="font-size: 0.8vw;">
330
+ Donated by DigitalOcean.com
331
+ </div>
332
+ </div>
333
+ </div>
334
+ <div class="mygauge-combo">
335
+ <div class="mygauge">
336
+ <div data-netdata="netdata.requests"
337
+ data-host="//bangalore.netdata.rocks"
338
+ data-title="India"
339
+ data-chart-library="easypiechart"
340
+ data-width="75%"
341
+ data-after="-300"
342
+ data-points="300"
343
+ data-colors="#BB55BB"
344
+ ></div>
345
+ </div>
346
+ <div class="mygauge-button">
347
+ <br/> <br/>
348
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//bangalore.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter India!</button>
349
+ <div style="font-size: 0.8vw;">
350
+ Donated by DigitalOcean.com
351
</div>
352
</div>
353
</div>
@@ -257,11 +358,11 @@ body {
358
this page is a custom <b>netdata</b> dashboard
359
</div>
360
<div class="mycontent">
260
- charts are coming from 3 servers, in parallel
361
+ charts are coming from 8 servers, in parallel
362
<br/>
363
the servers are not aware of this multi-server dashboard,
364
<br/>
264
- each server is not aware of the other 2 servers,
365
+ each server is not aware of the other servers,
366
<br/>
367
but on this dashboard <b>they are one</b>!
368
</div>
@@ -330,13 +431,13 @@ body {
431
432
<div class="mysparkline">
433
<div class="mysparkline-overchart-label">
333
- <b>EU - Greece</b> web requests/s
434
+ <b>US - California</b> web requests/s
435
</div>
436
<div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
437
</div>
438
<div data-netdata="nginx.requests"
439
data-dimensions="requests"
339
- data-host="//athens.my-netdata.io"
440
+ data-host="//sanfrancisco.netdata.rocks"
441
data-chart-library="dygraph"
442
data-dygraph-theme="sparkline"
443
data-dygraph-type="area"
@@ -347,6 +448,26 @@ body {
448
data-show-value-of-requests-at="nginx.requests.netdata3"
449
></div>
450
</div>
451
+
452
+ <div class="mysparkline">
453
+ <div class="mysparkline-overchart-label">
454
+ <b>Canada</b> web requests/s
455
+ </div>
456
+ <div class="mysparkline-overchart-value" id="nginx.requests.netdata4" >
457
+ </div>
458
+ <div data-netdata="nginx.requests"
459
+ data-dimensions="requests"
460
+ data-host="//toronto.netdata.rocks"
461
+ data-chart-library="dygraph"
462
+ data-dygraph-theme="sparkline"
463
+ data-dygraph-type="area"
464
+ data-width="100%"
465
+ data-height="100%"
466
+ data-after="-300"
467
+ data-colors="#885588"
468
+ data-show-value-of-requests-at="nginx.requests.netdata4"
469
+ ></div>
470
+ </div>
471
</div>
472
473
<div role="tabpanel" class="tab-pane" id="nginx_connections">
@@ -392,13 +513,13 @@ body {
513
514
<div class="mysparkline">
515
<div class="mysparkline-overchart-label">
395
- <b>EU - Greece</b> active connections
516
+ <b>US - California</b> active connections
517
</div>
518
<div class="mysparkline-overchart-value" id="nginx.connections.netdata3" >
519
</div>
520
<div data-netdata="nginx.connections"
521
data-dimensions="active"
401
- data-host="//athens.my-netdata.io"
522
+ data-host="//sanfrancisco.netdata.rocks"
523
data-chart-library="dygraph"
524
data-dygraph-theme="sparkline"
525
data-dygraph-type="area"
@@ -409,6 +530,26 @@ body {
530
data-show-value-of-active-at="nginx.connections.netdata3"
531
></div>
532
</div>
533
+
534
+ <div class="mysparkline">
535
+ <div class="mysparkline-overchart-label">
536
+ <b>Canada</b> active connections
537
+ </div>
538
+ <div class="mysparkline-overchart-value" id="nginx.connections.netdata4" >
539
+ </div>
540
+ <div data-netdata="nginx.connections"
541
+ data-dimensions="active"
542
+ data-host="//toronto.netdata.rocks"
543
+ data-chart-library="dygraph"
544
+ data-dygraph-theme="sparkline"
545
+ data-dygraph-type="area"
546
+ data-width="100%"
547
+ data-height="100%"
548
+ data-after="-300"
549
+ data-colors="#885588"
550
+ data-show-value-of-active-at="nginx.connections.netdata4"
551
+ ></div>
552
+ </div>
553
</div>
554
</div>
555
@@ -458,15 +599,27 @@ body {
599
600
<div class="myfullchart">
601
<div data-netdata="tc.world_out"
461
- data-host="//athens.my-netdata.io"
602
+ data-host="//sanfrancisco.netdata.rocks"
603
+ data-chart-library="dygraph"
604
+ data-title="US - California, traffic we send per service"
605
+ data-width="100%"
606
+ data-height="100%"
607
+ data-after="-300"
608
+ ></div>
609
+ </div>
610
+
611
+ <div class="myfullchart">
612
+ <div data-netdata="tc.world_out"
613
+ data-host="//toronto.netdata.rocks"
614
data-chart-library="dygraph"
463
- data-title="EU - Greece, traffic we send per service"
615
+ data-title="Canada, traffic we send per service"
616
data-width="100%"
617
data-height="100%"
618
data-after="-300"
619
></div>
620
</div>
621
</div>
622
+
623
<div role="tabpanel" class="tab-pane" id="inbound">
624
<div class="myfullchart">
625
<div data-netdata="tc.world_in"
@@ -494,9 +647,20 @@ body {
647
648
<div class="myfullchart">
649
<div data-netdata="tc.world_in"
497
- data-host="//athens.my-netdata.io"
650
+ data-host="//sanfrancisco.netdata.rocks"
651
+ data-chart-library="dygraph"
652
+ data-title="US - California, traffic we receive per service"
653
+ data-width="100%"
654
+ data-height="100%"
655
+ data-after="-300"
656
+ ></div>
657
+ </div>
658
+
659
+ <div class="myfullchart">
660
+ <div data-netdata="tc.world_in"
661
+ data-host="//toronto.netdata.rocks"
662
data-chart-library="dygraph"
499
- data-title="EU - Greece, traffic we receive per service"
663
+ data-title="Canada, traffic we receive per service"
664
data-width="100%"
665
data-height="100%"
666
data-after="-300"
@@ -559,13 +723,13 @@ body {
723
724
<div class="mysparkline">
725
<div class="mysparkline-overchart-label">
562
- <b>EU - Greece</b>, TCP SYN packets/s received
726
+ <b>US - California</b>, TCP SYN packets/s received
727
</div>
728
<div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
729
</div>
730
<div data-netdata="netfilter.synproxy_syn_received"
731
data-dimensions="received"
568
- data-host="//athens.my-netdata.io"
732
+ data-host="//sanfrancisco.netdata.rocks"
733
data-chart-library="dygraph"
734
data-dygraph-theme="sparkline"
735
data-dygraph-type="area"
@@ -576,6 +740,26 @@ body {
740
data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
741
></div>
742
</div>
743
+
744
+ <div class="mysparkline">
745
+ <div class="mysparkline-overchart-label">
746
+ <b>Canada</b>, TCP SYN packets/s received
747
+ </div>
748
+ <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata4" >
749
+ </div>
750
+ <div data-netdata="netfilter.synproxy_syn_received"
751
+ data-dimensions="received"
752
+ data-host="//toronto.netdata.rocks"
753
+ data-chart-library="dygraph"
754
+ data-dygraph-theme="sparkline"
755
+ data-dygraph-type="area"
756
+ data-width="100%"
757
+ data-height="100%"
758
+ data-after="-300"
759
+ data-colors="#885588"
760
+ data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata4"
761
+ ></div>
762
+ </div>
763
</div>
764
<div style="width: 100%; text-align: right; font-size: 1vw;">
765
<i class="fa fa-comment" aria-hidden="true"></i> <i>did you notice the decimal numbers?
@@ -596,6 +780,7 @@ body {
780
data-width="100%"
781
data-height="100%"
782
data-after="-300"
783
+ data-dygraph-valuerange="[0, 100]"
784
></div>
785
</div>
786
@@ -607,17 +792,31 @@ body {
792
data-width="100%"
793
data-height="100%"
794
data-after="-300"
795
+ data-dygraph-valuerange="[0, 100]"
796
+ ></div>
797
+ </div>
798
+
799
+ <div class="myfullchart">
800
+ <div data-netdata="system.cpu"
801
+ data-host="//sanfrancisco.netdata.rocks"
802
+ data-chart-library="dygraph"
803
+ data-title="US - California, CPU Usage"
804
+ data-width="100%"
805
+ data-height="100%"
806
+ data-after="-300"
807
+ data-dygraph-valuerange="[0, 100]"
808
></div>
809
</div>
810
811
<div class="myfullchart">
812
<div data-netdata="system.cpu"
615
- data-host="//athens.my-netdata.io"
813
+ data-host="//toronto.netdata.rocks"
814
data-chart-library="dygraph"
617
- data-title="EU - Greece, CPU Usage"
815
+ data-title="Canada, CPU Usage"
816
data-width="100%"
817
data-height="100%"
818
data-after="-300"
819
+ data-dygraph-valuerange="[0, 100]"
820
></div>
821
</div>
822
</div>
@@ -686,13 +885,13 @@ body {
885
886
<div class="mysparkline">
887
<div class="mysparkline-overchart-label">
689
- <b>EU - Greece</b>, CPU % of a single core
888
+ <b>US - California</b>, CPU % of a single core
889
</div>
890
<div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
891
</div>
892
<div data-netdata="users.cpu"
893
data-dimensions="netdata"
695
- data-host="//athens.my-netdata.io"
894
+ data-host="//sanfrancisco.netdata.rocks"
895
data-chart-library="dygraph"
896
data-dygraph-theme="sparkline"
897
data-dygraph-type="area"
@@ -704,6 +903,26 @@ body {
903
></div>
904
</div>
905
906
+ <div class="mysparkline">
907
+ <div class="mysparkline-overchart-label">
908
+ <b>Toronto</b>, CPU % of a single core
909
+ </div>
910
+ <div class="mysparkline-overchart-value" id="users.cpu.netdata4" >
911
+ </div>
912
+ <div data-netdata="users.cpu"
913
+ data-dimensions="netdata"
914
+ data-host="//toronto.netdata.rocks"
915
+ data-chart-library="dygraph"
916
+ data-dygraph-theme="sparkline"
917
+ data-dygraph-type="area"
918
+ data-width="100%"
919
+ data-height="100%"
920
+ data-after="-300"
921
+ data-colors="#885588"
922
+ data-show-value-of-netdata-at="users.cpu.netdata4"
923
+ ></div>
924
+ </div>
925
+
926
<div style="width: 100%; text-align: right; font-size: 1vw;">
927
<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>!
928
<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.
@@ -752,12 +971,12 @@ body {
971
972
<div class="mysparkline">
973
<div class="mysparkline-overchart-label">
755
- <b>EU - Greece</b>, API average response time in milliseconds
974
+ <b>US - California</b>, API average response time in milliseconds
975
</div>
976
<div class="mysparkline-overchart-value" id="netdata.response_time3" >
977
</div>
978
<div data-netdata="netdata.response_time"
760
- data-host="//athens.my-netdata.io"
979
+ data-host="//sanfrancisco.netdata.rocks"
980
data-chart-library="dygraph"
981
data-dygraph-theme="sparkline"
982
data-dygraph-type="area"
@@ -769,6 +988,25 @@ body {
988
></div>
989
</div>
990
991
+ <div class="mysparkline">
992
+ <div class="mysparkline-overchart-label">
993
+ <b>Canada</b>, API average response time in milliseconds
994
+ </div>
995
+ <div class="mysparkline-overchart-value" id="netdata.response_time4" >
996
+ </div>
997
+ <div data-netdata="netdata.response_time"
998
+ data-host="//toronto.netdata.rocks"
999
+ data-chart-library="dygraph"
1000
+ data-dygraph-theme="sparkline"
1001
+ data-dygraph-type="area"
1002
+ data-width="100%"
1003
+ data-height="100%"
1004
+ data-after="-300"
1005
+ data-colors="#885588"
1006
+ data-show-value-of-response_time-at="netdata.response_time4"
1007
+ ></div>
1008
+ </div>
1009
+
1010
<div style="width: 100%; text-align: right; font-size: 1vw;">
1011
<i class="fa fa-comment" aria-hidden="true"></i> <i>netdata is really <b>fast</b> (the values are milliseconds!)
1012
<br/>