updated demosites.html to show bigger charts
Costa Tsaousis committed
Apr 30, 2016 at 17:28 UTC
091a878175eb89ef7923a6c516cb138e2832954e
1 file changed
+135
-80
web/demosites.html
+135
-80
@@ -1,7 +1,7 @@
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
- <title>NetData Demo Sites Dashboard</title>
4
+ <title>NetData Multi-Server Dashboard</title>
5
6
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7
<meta charset="utf-8">
@@ -66,10 +66,17 @@
66
67
<style>
68
69
+body {
70
+ font-size: 1vw;
71
+}
72
+
73
.mysparkline {
74
position: relative;
75
display: inline-block;
76
min-height: 50px;
77
+ width: 100%;
78
+ height: 8vw;
79
+ text-align: left;
80
}
81
82
.mysparkline-overchart-label {
@@ -90,11 +97,35 @@
97
left: 10px;
98
bottom: 0;
99
right: 0;
93
- font-size: 3vw;
100
+ font-size: 5vw;
101
z-index: 2;
102
text-shadow: #333 0px 0px 2px;
103
}
104
105
+.myfullchart {
106
+ position: relative;
107
+ display: inline-block;
108
+ width: 100%;
109
+ height: 16vw;
110
+ min-height: 150px;
111
+ text-align: left;
112
+}
113
+
114
+.mygauge-combo {
115
+ display: inline-block;
116
+}
117
+
118
+.mygauge {
119
+ position: relative;
120
+ display: block;
121
+ width: 20vw;
122
+ height: 12vw;
123
+}
124
+
125
+.mygauge-button {
126
+ display: block;
127
+}
128
+
129
</style>
130
131
</head>
@@ -118,52 +149,64 @@
149
<div style="width: 100%; text-align: center; padding-top: 2vw;">
150
<div style="width: 100%; text-align: center;">
151
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"
126
- data-width="100%"
127
- data-after="-300"
128
- data-points="300"
129
- data-colors="#558855"
130
- ></div>
131
- <br/> <br/>
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
152
+ <div class="mygauge-combo">
153
+ <div class="mygauge">
154
+ <div data-netdata="netdata.requests"
155
+ data-host="//netdata1.firehol.org"
156
+ data-title="EU - London"
157
+ data-chart-library="gauge"
158
+ data-width="100%"
159
+ data-after="-300"
160
+ data-points="300"
161
+ data-colors="#558855"
162
+ ></div>
163
+ </div>
164
+ <div class="mygauge-button">
165
+ <br/> <br/>
166
+ <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>
167
+ <div style="font-size: 0.8vw;">
168
+ Donated by DigitalOcean.com
169
+ </div>
170
</div>
171
</div>
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"
142
- data-width="100%"
143
- data-after="-300"
144
- data-points="300"
145
- data-colors="#AA5555"
146
- ></div>
147
- <br/> <br/>
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;">
150
- Donated by CDN77.com
172
+ <div class="mygauge-combo">
173
+ <div class="mygauge">
174
+ <div data-netdata="netdata.requests"
175
+ data-host="//netdata2.firehol.org"
176
+ data-title="US - Atlanta"
177
+ data-chart-library="gauge"
178
+ data-width="100%"
179
+ data-after="-300"
180
+ data-points="300"
181
+ data-colors="#AA5555"
182
+ ></div>
183
+ </div>
184
+ <div class="mygauge-button">
185
+ <br/> <br/>
186
+ <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>
187
+ <div style="font-size: 0.8vw;">
188
+ Donated by CDN77.com
189
+ </div>
190
</div>
191
</div>
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"
158
- data-width="100%"
159
- data-after="-300"
160
- data-points="300"
161
- data-colors="#5555AA"
162
- ></div>
163
- <br/> <br/>
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;">
166
-
192
+ <div class="mygauge-combo">
193
+ <div class="mygauge">
194
+ <div data-netdata="netdata.requests"
195
+ data-host="//netdata3.firehol.org"
196
+ data-title="EU - Greece"
197
+ data-chart-library="gauge"
198
+ data-width="100%"
199
+ data-after="-300"
200
+ data-points="300"
201
+ data-colors="#5555AA"
202
+ ></div>
203
+ </div>
204
+ <div class="mygauge-button">
205
+ <br/> <br/>
206
+ <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>
207
+ <div style="font-size: 0.8vw;">
208
+
209
+ </div>
210
</div>
211
</div>
212
</div>
@@ -188,7 +231,7 @@
231
Our <code>nginx</code> web servers recent requests/s:
232
</div>
233
191
- <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
234
+ <div class="mysparkline">
235
<div class="mysparkline-overchart-label">
236
<b>EU - London</b> web requests/s
237
</div>
@@ -208,7 +251,7 @@
251
></div>
252
</div>
253
211
- <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
254
+ <div class="mysparkline">
255
<div class="mysparkline-overchart-label">
256
<b>US - Atlanta</b> web requests/s
257
</div>
@@ -228,7 +271,7 @@
271
></div>
272
</div>
273
231
- <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
274
+ <div class="mysparkline">
275
<div class="mysparkline-overchart-label">
276
<b>EU - Greece</b> web requests/s
277
</div>
@@ -269,66 +312,75 @@
312
<!-- Tab panes -->
313
<div class="tab-content">
314
<div role="tabpanel" class="tab-pane active" id="outbout">
272
- <div data-netdata="tc.world_out"
315
+ <div class="myfullchart">
316
+ <div data-netdata="tc.world_out"
317
data-host="//netdata1.firehol.org"
318
data-chart-library="dygraph"
319
data-title="EU - London, traffic we send per service"
320
data-width="100%"
277
- data-height="10vw"
278
- data-min-height="150px"
321
+ data-height="100%"
322
data-after="-300"
323
></div>
324
+ </div>
325
282
- <div data-netdata="tc.world_out"
326
+ <div class="myfullchart">
327
+ <div data-netdata="tc.world_out"
328
data-host="//netdata2.firehol.org"
329
data-chart-library="dygraph"
330
data-title="US - Atlanta, traffic we send per service"
331
data-width="100%"
287
- data-height="10vw"
288
- data-min-height="150px"
332
+ data-height="100%"
333
data-after="-300"
334
></div>
335
292
- <div data-netdata="tc.world_out"
336
+ </div>
337
+
338
+ <div class="myfullchart">
339
+ <div data-netdata="tc.world_out"
340
data-host="//netdata3.firehol.org"
341
data-chart-library="dygraph"
342
data-title="EU - Greece, traffic we send per service"
343
data-width="100%"
297
- data-height="10vw"
298
- data-min-height="150px"
344
+ data-height="100%"
345
data-after="-300"
346
></div>
347
+ </div>
348
</div>
349
<div role="tabpanel" class="tab-pane" id="inbound">
303
- <div data-netdata="tc.world_in"
350
+ <div class="myfullchart">
351
+ <div data-netdata="tc.world_in"
352
data-host="//netdata1.firehol.org"
353
data-chart-library="dygraph"
354
data-title="EU - London, traffic we receive per service"
355
data-width="100%"
308
- data-height="10vw"
309
- data-min-height="150px"
356
+ data-height="100%"
357
data-after="-300"
358
></div>
359
313
- <div data-netdata="tc.world_in"
360
+ </div>
361
+
362
+ <div class="myfullchart">
363
+ <div data-netdata="tc.world_in"
364
data-host="//netdata2.firehol.org"
365
data-chart-library="dygraph"
366
data-title="US - Atlanta, traffic we receive per service"
367
data-width="100%"
318
- data-height="10vw"
319
- data-min-height="150px"
368
+ data-height="100%"
369
data-after="-300"
370
></div>
371
323
- <div data-netdata="tc.world_in"
372
+ </div>
373
+
374
+ <div class="myfullchart">
375
+ <div data-netdata="tc.world_in"
376
data-host="//netdata3.firehol.org"
377
data-chart-library="dygraph"
378
data-title="EU - Greece, traffic we receive per service"
379
data-width="100%"
328
- data-height="10vw"
329
- data-min-height="150px"
380
+ data-height="100%"
381
data-after="-300"
382
></div>
383
+ </div>
384
</div>
385
</div>
386
<div style="width: 100%; text-align: right; font-size: 1vw;">
@@ -342,7 +394,7 @@
394
(iptables SYNPROXY configured by our <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>):
395
</div>
396
345
- <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
397
+ <div class="mysparkline">
398
<div class="mysparkline-overchart-label">
399
<b>EU - London</b>, TCP SYN packets/s received
400
</div>
@@ -362,7 +414,7 @@
414
></div>
415
</div>
416
365
- <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
417
+ <div class="mysparkline">
418
<div class="mysparkline-overchart-label">
419
<b>US - Atlanta</b>, TCP SYN packets/s received
420
</div>
@@ -382,7 +434,7 @@
434
></div>
435
</div>
436
385
- <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
437
+ <div class="mysparkline">
438
<div class="mysparkline-overchart-label">
439
<b>EU - Greece</b>, TCP SYN packets/s received
440
</div>
@@ -413,35 +465,38 @@
465
</div>
466
467
<div style="padding-top: 1vw;">
416
- <div data-netdata="system.cpu"
468
+ <div class="myfullchart">
469
+ <div data-netdata="system.cpu"
470
data-host="//netdata1.firehol.org"
471
data-chart-library="dygraph"
472
data-title="EU - London, CPU Usage"
473
data-width="100%"
421
- data-height="10vw"
422
- data-min-height="150px"
474
+ data-height="100%"
475
data-after="-300"
476
></div>
477
+ </div>
478
426
- <div data-netdata="system.cpu"
479
+ <div class="myfullchart">
480
+ <div data-netdata="system.cpu"
481
data-host="//netdata2.firehol.org"
482
data-chart-library="dygraph"
483
data-title="US - Atlanta, CPU Usage"
484
data-width="100%"
431
- data-height="10vw"
432
- data-min-height="150px"
485
+ data-height="100%"
486
data-after="-300"
487
></div>
488
+ </div>
489
436
- <div data-netdata="system.cpu"
490
+ <div class="myfullchart">
491
+ <div data-netdata="system.cpu"
492
data-host="//netdata3.firehol.org"
493
data-chart-library="dygraph"
494
data-title="EU - Greece, CPU Usage"
495
data-width="100%"
441
- data-height="10vw"
442
- data-min-height="150px"
496
+ data-height="100%"
497
data-after="-300"
498
></div>
499
+ </div>
500
</div>
501
<div style="width: 100%; text-align: right; font-size: 1vw;">
502
<i class="fa fa-comment" aria-hidden="true"></i> <i>what does it take so much CPU?
@@ -457,7 +512,7 @@
512
and <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.)
513
</div>
514
460
- <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
515
+ <div class="mysparkline">
516
<div class="mysparkline-overchart-label">
517
<b>EU - London</b>, CPU % of a single core
518
</div>
@@ -477,7 +532,7 @@
532
></div>
533
</div>
534
480
- <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
535
+ <div class="mysparkline">
536
<div class="mysparkline-overchart-label">
537
<b>US - Atlanta</b>, CPU % of a single core
538
</div>
@@ -497,7 +552,7 @@
552
></div>
553
</div>
554
500
- <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
555
+ <div class="mysparkline">
556
<div class="mysparkline-overchart-label">
557
<b>EU - Greece</b>, CPU % of a single core
558
</div>