new demo page
Costa Tsaousis (ktsaou) committed
Dec 19, 2015 at 00:58 UTC
d4ee74a50604c7bafb321d118508ee700774dbff
1 file changed
+66
-20
web/dashboard_full.html
+66
-20
@@ -1,7 +1,7 @@
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
- <title>NetData Dashboard</title>
4
+ <title>netdata dashboard</title>
5
6
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7
<meta charset="utf-8">
@@ -52,6 +52,11 @@
52
visibility: hidden;
53
}
54
55
+ .p {
56
+ display: block;
57
+ margin-top: 15px;
58
+ }
59
+
60
.chart-message {
61
display: block;
62
margin-top: 10px;
@@ -235,7 +240,7 @@
240
<span class="icon-bar"></span>
241
<span class="icon-bar"></span>
242
</button>
238
- <a href="/" class="navbar-brand">Netdata</a>
243
+ <a href="/" class="navbar-brand" id="hostname">netdata</a>
244
</div>
245
<!-- <nav class="collapse navbar-collapse" role="navigation">
246
<ul class="nav navbar-nav">
@@ -248,7 +253,7 @@
253
--> </div>
254
</nav>
255
251
- <div id="masthead">
256
+ <div id="masthead" style="display: none;">
257
<div class="container">
258
<div class="row">
259
<div class="col-md-7">
@@ -266,7 +271,7 @@
271
<b>Hover</b> on them too!
272
</div>
273
<div class="col-md-6">
269
- <div data-netdata="system.intr" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dygraph-type="line" data-dygraph-strokewidth="3" data-dygraph-smooth="true" data-dygraph-highlightcirclesize="6" data-after="-40" data-height="60px" data-colors="#C66"></div>
274
+ <div data-netdata="system.intr" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dygraph-type="line" data-dygraph-strokewidth="3" data-dygraph-smooth="true" data-dygraph-highlightcirclesize="6" data-after="-90" data-height="60px" data-colors="#C66"></div>
275
</div>
276
</div>
277
</div>
@@ -278,21 +283,6 @@
283
<div class="container">
284
<div class="row">
285
<div class="col-md-10" role="main">
281
- <div class="alert alert-info" role="alert">
282
- <p>
283
- <h4><b>Welcome to netdata!</b></h4>
284
- </p><p>
285
- <b><a href="https://github.com/firehol/netdata/" target="_blank">Netdata</a></b> is the fastest way to visualize data. It is a resource efficient, highly optimized system for collecting and visualizing any type of timeseries data.
286
- </p><p>
287
- To make a chart in <b><a href="https://github.com/firehol/netdata/" target="_blank">Netdata</a></b>, you just need a <b>counter</b>. Just a number you can read again and again. Netdata will turn such a number to a real time chart. For collecting these numbers, it supports <a href="https://github.com/firehol/netdata/tree/master/plugins.d" target="_blank">external plugins</a>, even <a href="https://github.com/firehol/netdata/tree/master/charts.d" target="_blank">bash plugins</a>. Any computer program, in any language, that can print just a few lines of text on its standard output, can be a netdata collector.
288
- </p><p>
289
- <b><a href="https://github.com/firehol/netdata/" target="_blank">Netdata</a></b> can embed charts in any web page. You can have its charts on your site too. Just give it a <code>div</code> and a real time chart, zoomable and draggable will appear (don't be afraid of its performance - <a href="https://github.com/firehol/netdata/issues/36" target="_blank">a raspberry pi 2 can sustain 300 charts updates per second</a>!).
290
- </p><p>
291
- If you like this project, we need help writing documentation, coding plugins, testing new features, supporting end users...
292
- <br/>
293
- If you have some time to spare, we will be glad to have you on board...
294
- </p>
295
- </div>
286
<div id="charts_div"></div>
287
</div>
288
<div class="col-md-2" role="complementary">
@@ -301,14 +291,57 @@
291
</div>
292
</div>
293
294
+<div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="welcomeModalLabel">
295
+ <div class="modal-dialog modal-lg" role="document">
296
+ <div class="modal-content">
297
+ <div class="modal-header">
298
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
299
+ <h4 class="modal-title" id="welcomeModalLabel">Welcome to netdata!</h4>
300
+ </div>
301
+ <div class="modal-body">
302
+ <div class="p">
303
+ <b><a href="https://github.com/firehol/netdata/" target="_blank">netdata</a></b> is the fastest way to visualize data. It is a resource efficient, highly optimized system for collecting and visualizing any type of realtime timeseries data, from CPU usage, disk activity, SQL queries, to web site visitors, e-shop orders, revenue and profits.
304
+ </div>
305
+ <div class="p">
306
+ To make a chart in <b><a href="https://github.com/firehol/netdata/" target="_blank">netdata</a></b>, you just need a <b>number</b>. Just a number you can read somehow. <b><a href="https://github.com/firehol/netdata/" target="_blank">netdata</a></b> will turn this number to a real time web chart. For collecting these numbers, it supports <a href="https://github.com/firehol/netdata/tree/master/plugins.d" target="_blank">external plugins</a>, even <a href="https://github.com/firehol/netdata/tree/master/charts.d" target="_blank">bash shell plugins</a>. Any computer program, in any language, that can print a few lines of text on its standard output, can be a netdata data collector.
307
+ </div>
308
+ <div class="p">
309
+ <b><a href="https://github.com/firehol/netdata/" target="_blank">netdata</a></b> can embed charts everywhere, like this one <div data-netdata="system.cpu" data-dimensions="system" data-after="-120" data-width="25%" data-height="15px" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-show-value-of-system-at="system.cpu.system.modal.1"></div> (my CPU system usage which is <span id="system.cpu.system.modal.1" style="display: inline-block; width: 40px; text-align: right;"></span>%),
310
+ or this one <div data-netdata="ipv4.tcppackets" data-dimensions="received" data-after="-120" data-width="25%" data-height="15px" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-show-value-of-received-at="ipv4.tcppackets.received.modal.1"></div> (my IPv4 received TCP packets, which are <span id="ipv4.tcppackets.received.modal.1" style="display: inline-block; width: 60px; text-align: right;"></span>/second).
311
+ </div>
312
+ <div class="p">
313
+ You can have <b><a href="https://github.com/firehol/netdata/" target="_blank">netdata</a></b> charts on your site too. Just give it a <code>div</code> and a real time chart, zoomable and draggable will appear (try it even on these tiny ones - <b>drag</b> them to pan horizontally, <b>shift + drag</b> to zoom in, on <b>chrome shift + mouse wheel</b> to zoom in/out, <b>double click</b> on them to reset them - don't be afraid of <b><a href="https://github.com/firehol/netdata/" target="_blank">netdata</a></b> performance - <a href="https://github.com/firehol/netdata/issues/36" target="_blank">a raspberry pi 2 can sustain 300 charts updates per second</a>!).
314
+ </div>
315
+ <div class="p">
316
+ If you like this project, <b>we need help writing documentation, coding plugins, testing new features, supporting end users.</b>
317
+ </div>
318
+ <div class="p">
319
+ We will be glad to have you on board...
320
+ </div>
321
+ </div>
322
+ <div class="modal-footer">
323
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
324
+ </div>
325
+ </div>
326
+ </div>
327
+</div>
328
+
329
</body>
330
</html>
331
<script>
332
333
+
334
+var demo_hostname = 'netdata.firehol.org';
335
+// var demo_hostname = 'box';
336
+
337
+if(document.location.hostname === demo_hostname) {
338
+ document.getElementById('masthead').style.display = 'block';
339
+}
340
+
341
var options = {
342
sparklines_registry: {},
343
data: null,
311
- hostnane: 'netdata_server', // will be overwritten by the netdata server
344
+ hostname: 'netdata_server', // will be overwritten by the netdata server
345
categories: new Array(),
346
categories_idx: {},
347
families: new Array(),
@@ -432,6 +465,8 @@ function prepareScreen(data) {
465
466
options.data = data;
467
options.hostname = data.hostname;
468
+ document.getElementById('hostname').innerHTML = options.hostname;
469
+ document.title = options.hostname + ' dashboard';
470
var charts = data.charts;
471
472
$.each(charts, function(i, c) {
@@ -762,16 +797,27 @@ function prepareScreen(data) {
797
798
NETDATA.ready(function() {
799
800
+ $('#welcomeModal').on('hidden.bs.modal', function (e) {
801
+ NETDATA.updatedDom();
802
+ });
803
+ $('#welcomeModal').on('shown.bs.modal', function (e) {
804
+ NETDATA.updatedDom();
805
+ });
806
+
807
// download all the charts the server knows
808
NETDATA.chartRegistry.downloadAll(NETDATA.serverDefault, function(data) {
809
810
// pause the NETDATA thread that updates the charts
811
NETDATA.pause(function() {
812
813
+ if(document.location.hostname === demo_hostname)
814
+ $('#welcomeModal').modal();
815
+
816
// prepare our DOM
817
// this will be called when NETDATA is paused
818
prepareScreen(data);
819
});
820
});
821
});
822
+
823
</script>