update demosites.html
Costa Tsaousis committed
May 3, 2016 at 00:27 UTC
2195620611ac1425a3198baf04f171a9fcbd1577
1 file changed
+194
-83
web/demosites.html
+194
-83
@@ -106,7 +106,7 @@ body {
106
position: relative;
107
display: inline-block;
108
width: 100%;
109
- height: 16vw;
109
+ height: 15vw;
110
min-height: 150px;
111
text-align: left;
112
}
@@ -126,6 +126,25 @@ body {
126
display: block;
127
}
128
129
+.mytitle {
130
+ padding-top: 6vw;
131
+ padding-bottom: 1vw;
132
+ text-align: center;
133
+ font-size: 2.4vw;
134
+}
135
+
136
+.mysubtitle {
137
+ padding-top: 2vw;
138
+ padding-bottom: 1vw;
139
+ text-align: center;
140
+ font-size: 1.8vw;
141
+}
142
+
143
+.mycontent {
144
+ text-align: center;
145
+ font-size: 1.5vw;
146
+}
147
+
148
</style>
149
150
</head>
@@ -140,10 +159,16 @@ body {
159
real-time performance monitoring
160
</div>
161
<div style="width:80%; text-align: right; font-size: 2.7vw;">
143
- done... <strong>real-time</strong>!
162
+ <strong>scaled out</strong>!
163
</div>
145
- <div style="padding-top: 3vw; padding-bottom: 1vw; text-align: center; font-size: 2vw;">
146
- this dashboard gets its charts, from <b>3 netdata</b> servers
164
+ <div class="mytitle">
165
+ welcome to <b>netdata</b>
166
+ </div>
167
+ <div class="mysubtitle">
168
+ pick a demo server, to view its dashboard
169
+ </div>
170
+ <div class="mycontent">
171
+ these dashboards is what you will get by installing <b>netdata</b>
172
</div>
173
174
<div style="width: 100%; text-align: center; padding-top: 2vw;">
@@ -164,7 +189,7 @@ body {
189
<div class="mygauge-button">
190
<br/> <br/>
191
<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;">
192
+ <div style="font-size: 1vw;">
193
Donated by DigitalOcean.com
194
</div>
195
</div>
@@ -184,7 +209,7 @@ body {
209
<div class="mygauge-button">
210
<br/> <br/>
211
<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;">
212
+ <div style="font-size: 1vw;">
213
Donated by CDN77.com
214
</div>
215
</div>
@@ -212,83 +237,162 @@ body {
237
</div>
238
</div>
239
215
- <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 2vw;">
216
- the servers are not aware of this unified dashboard,
240
+ <div class="mytitle">
241
+ this page is a custom <b>netdata</b> dashboard
242
+ </div>
243
+ <div class="mycontent">
244
+ charts are coming from 3 servers, in parallel
245
+ <br/>
246
+ the servers are not aware of this multi-server dashboard,
247
<br/>
248
each server is not aware of the other 2 servers,
249
<br/>
220
- but on this dashboard they <b>behave like one</b>!
250
+ but on this dashboard <b>they are one</b>!
251
</div>
252
<div style="padding-top: 1vw; width: 100%; text-align: center; font-size: 1.5vw;">
253
<i class="fa fa-comment" aria-hidden="true"></i>
254
hover on a chart below, or drag it to show the past - <b>the others will follow</b>!
255
<br/>
226
- (double click on a chart to reset them all)
256
+ double click on a chart to reset them all
257
</div>
258
229
- <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
230
- <div style="padding-top: 1vw; padding-bottom: 1vw;">
231
- Our <code>nginx</code> web servers recent requests/s:
232
- </div>
259
+ <div class="mytitle">
260
+ our <code>ngnix</code> performance
261
+ </div>
262
+ <div class="mycontent">
263
+ (we proxy netdata through nginx, on the demo sites)
264
+ </div>
265
234
- <div class="mysparkline">
235
- <div class="mysparkline-overchart-label">
236
- <b>EU - London</b> web requests/s
237
- </div>
238
- <div class="mysparkline-overchart-value" id="nginx.requests.netdata" >
266
+ <!-- Nav tabs -->
267
+ <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
268
+ <li role="presentation" class="active"><a href="#nginx_requests" aria-controls="nginx_requests" role="tab" data-toggle="tab">Requests</a></li>
269
+ <li role="presentation"><a href="#nginx_connections" aria-controls="nginx_connections" role="tab" data-toggle="tab">Connections</a></li>
270
+ </ul>
271
+
272
+ <!-- Tab panes -->
273
+ <div class="tab-content">
274
+ <div role="tabpanel" class="tab-pane active" id="nginx_requests">
275
+ <div class="mysparkline">
276
+ <div class="mysparkline-overchart-label">
277
+ <b>EU - London</b> web requests/s
278
+ </div>
279
+ <div class="mysparkline-overchart-value" id="nginx.requests.netdata" >
280
+ </div>
281
+ <div data-netdata="nginx.requests"
282
+ data-dimensions="requests"
283
+ data-host="//netdata1.firehol.org"
284
+ data-chart-library="dygraph"
285
+ data-dygraph-theme="sparkline"
286
+ data-dygraph-type="area"
287
+ data-width="100%"
288
+ data-height="100%"
289
+ data-after="-300"
290
+ data-colors="#558855"
291
+ data-show-value-of-requests-at="nginx.requests.netdata"
292
+ ></div>
293
</div>
240
- <div data-netdata="nginx.requests"
241
- data-dimensions="requests"
242
- data-host="//netdata1.firehol.org"
243
- data-chart-library="dygraph"
244
- data-dygraph-theme="sparkline"
245
- data-dygraph-type="area"
246
- data-width="100%"
247
- data-height="100%"
248
- data-after="-300"
249
- data-colors="#558855"
250
- data-show-value-of-requests-at="nginx.requests.netdata"
251
- ></div>
252
- </div>
294
254
- <div class="mysparkline">
255
- <div class="mysparkline-overchart-label">
256
- <b>US - Atlanta</b> web requests/s
295
+ <div class="mysparkline">
296
+ <div class="mysparkline-overchart-label">
297
+ <b>US - Atlanta</b> web requests/s
298
+ </div>
299
+ <div class="mysparkline-overchart-value" id="nginx.requests.netdata2" >
300
+ </div>
301
+ <div data-netdata="nginx.requests"
302
+ data-dimensions="requests"
303
+ data-host="//netdata2.firehol.org"
304
+ data-chart-library="dygraph"
305
+ data-dygraph-theme="sparkline"
306
+ data-dygraph-type="area"
307
+ data-width="100%"
308
+ data-height="100%"
309
+ data-after="-300"
310
+ data-colors="#AA5555"
311
+ data-show-value-of-requests-at="nginx.requests.netdata2"
312
+ ></div>
313
</div>
258
- <div class="mysparkline-overchart-value" id="nginx.requests.netdata2" >
314
+
315
+ <div class="mysparkline">
316
+ <div class="mysparkline-overchart-label">
317
+ <b>EU - Greece</b> web requests/s
318
+ </div>
319
+ <div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
320
+ </div>
321
+ <div data-netdata="nginx.requests"
322
+ data-dimensions="requests"
323
+ data-host="//netdata3.firehol.org"
324
+ data-chart-library="dygraph"
325
+ data-dygraph-theme="sparkline"
326
+ data-dygraph-type="area"
327
+ data-width="100%"
328
+ data-height="100%"
329
+ data-after="-300"
330
+ data-colors="#5555AA"
331
+ data-show-value-of-requests-at="nginx.requests.netdata3"
332
+ ></div>
333
</div>
260
- <div data-netdata="nginx.requests"
261
- data-dimensions="requests"
262
- data-host="//netdata2.firehol.org"
263
- data-chart-library="dygraph"
264
- data-dygraph-theme="sparkline"
265
- data-dygraph-type="area"
266
- data-width="100%"
267
- data-height="100%"
268
- data-after="-300"
269
- data-colors="#AA5555"
270
- data-show-value-of-requests-at="nginx.requests.netdata2"
271
- ></div>
334
</div>
335
274
- <div class="mysparkline">
275
- <div class="mysparkline-overchart-label">
276
- <b>EU - Greece</b> web requests/s
336
+ <div role="tabpanel" class="tab-pane" id="nginx_connections">
337
+ <div class="mysparkline">
338
+ <div class="mysparkline-overchart-label">
339
+ <b>EU - London</b> web requests/s
340
+ </div>
341
+ <div class="mysparkline-overchart-value" id="nginx.connections.netdata1" >
342
+ </div>
343
+ <div data-netdata="nginx.connections"
344
+ data-dimensions="active"
345
+ data-host="//netdata1.firehol.org"
346
+ data-chart-library="dygraph"
347
+ data-dygraph-theme="sparkline"
348
+ data-dygraph-type="area"
349
+ data-width="100%"
350
+ data-height="100%"
351
+ data-after="-300"
352
+ data-colors="#558855"
353
+ data-show-value-of-active-at="nginx.connections.netdata1"
354
+ ></div>
355
</div>
278
- <div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
356
+
357
+ <div class="mysparkline">
358
+ <div class="mysparkline-overchart-label">
359
+ <b>US - Atlanta</b> web requests/s
360
+ </div>
361
+ <div class="mysparkline-overchart-value" id="nginx.connections.netdata2" >
362
+ </div>
363
+ <div data-netdata="nginx.connections"
364
+ data-dimensions="active"
365
+ data-host="//netdata2.firehol.org"
366
+ data-chart-library="dygraph"
367
+ data-dygraph-theme="sparkline"
368
+ data-dygraph-type="area"
369
+ data-width="100%"
370
+ data-height="100%"
371
+ data-after="-300"
372
+ data-colors="#AA5555"
373
+ data-show-value-of-active-at="nginx.connections.netdata2"
374
+ ></div>
375
+ </div>
376
+
377
+ <div class="mysparkline">
378
+ <div class="mysparkline-overchart-label">
379
+ <b>EU - Greece</b> web requests/s
380
+ </div>
381
+ <div class="mysparkline-overchart-value" id="nginx.connections.netdata3" >
382
+ </div>
383
+ <div data-netdata="nginx.connections"
384
+ data-dimensions="active"
385
+ data-host="//netdata3.firehol.org"
386
+ data-chart-library="dygraph"
387
+ data-dygraph-theme="sparkline"
388
+ data-dygraph-type="area"
389
+ data-width="100%"
390
+ data-height="100%"
391
+ data-after="-300"
392
+ data-colors="#5555AA"
393
+ data-show-value-of-active-at="nginx.connections.netdata3"
394
+ ></div>
395
</div>
280
- <div data-netdata="nginx.requests"
281
- data-dimensions="requests"
282
- data-host="//netdata3.firehol.org"
283
- data-chart-library="dygraph"
284
- data-dygraph-theme="sparkline"
285
- data-dygraph-type="area"
286
- data-width="100%"
287
- data-height="100%"
288
- data-after="-300"
289
- data-colors="#5555AA"
290
- data-show-value-of-requests-at="nginx.requests.netdata3"
291
- ></div>
396
</div>
397
</div>
398
@@ -297,10 +401,11 @@ body {
401
</div>
402
403
300
- <div style="padding-top: 4vw; font-size: 1.5vw;">
301
- Our bandwidth consumption per service
302
- <br/>
303
- (Linux QoS configured by our <a href="https://github.com/firehol/netdata/wiki/You-should-install-QoS-on-all-your-servers">FireQOS</a>):
404
+ <div class="mytitle">
405
+ bandwidth consumption on the demo sites
406
+ </div>
407
+ <div class="mycontent">
408
+ Linux QoS is configured by <a href="https://github.com/firehol/netdata/wiki/You-should-install-QoS-on-all-your-servers">FireQOS</a>
409
</div>
410
411
<!-- Nav tabs -->
@@ -387,12 +492,14 @@ body {
492
<i class="fa fa-comment" aria-hidden="true"></i> <i>these legends are interactive and the charts are resizable here ^^^</i>
493
</div>
494
495
+ <div class="mytitle">
496
+ DDoS protection performance on the demo sites
497
+ </div>
498
+ <div class="mycontent">
499
+ iptables SYNPROXY configured by our <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>
500
+ </div>
501
+
502
<div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
391
- <div style="padding-top: 1vw; padding-bottom: 1vw;">
392
- Our DDoS protection
393
- <br/>
394
- (iptables SYNPROXY configured by our <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>):
395
- </div>
503
504
<div class="mysparkline">
505
<div class="mysparkline-overchart-label">
@@ -460,8 +567,8 @@ body {
567
</div>
568
569
463
- <div style="padding-top: 4vw; font-size: 1.5vw;">
464
- CPU Utilization on our servers
570
+ <div class="mytitle">
571
+ CPU Utilization of the demo sites
572
</div>
573
574
<div style="padding-top: 1vw;">
@@ -503,14 +610,16 @@ body {
610
<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>
611
</div>
612
613
+ <div class="mytitle">
614
+ CPU Usage of the netdata user
615
+ </div>
616
+ <div class="mycontent">
617
+ netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
618
+ <br/>
619
+ and <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.)
620
+ </div>
621
+
622
<div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
507
- <div style="padding-top: 1vw; padding-bottom: 1vw;">
508
- CPU Usage of the netdata user
509
- <br/>
510
- netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
511
- <br/>
512
- and <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.)
513
- </div>
623
624
<div class="mysparkline">
625
<div class="mysparkline-overchart-label">
@@ -583,7 +692,9 @@ body {
692
<br/>
693
jump to <a href="https://github.com/firehol/netdata/">the netdata page at github</a>!
694
<br/>
586
- remember to motivate us with a <b>Github Star</b>.
695
+ <b>netdata</b> monitors 1.000 - 5.000 metrics out of the box
696
+ <br/>
697
+ and it needs just 3 mins to be installed!
698
<br/>
699
700
</div>