new demo dashboard to monitor the demo sites; updated tv.html to support slow browsers
Costa Tsaousis (ktsaou) committed
Apr 23, 2016 at 03:20 UTC
51cdf6662ee2f88ffe3c28e82134b7fc95024d17
3 files changed
+545
-242
web/Makefile.am
+4
-3
@@ -4,18 +4,19 @@
4
MAINTAINERCLEANFILES= $(srcdir)/Makefile.in
5
6
dist_web_DATA = \
7
- robots.txt \
8
- index.html \
7
demo.html \
8
demo2.html \
11
- tv.html \
9
+ demosites.html \
10
dashboard.html \
11
dashboard.js \
12
dashboard.css \
13
dashboard.slate.css \
14
favicon.ico \
15
+ index.html \
16
netdata-swagger.yaml \
17
netdata-swagger.json \
18
+ robots.txt \
19
+ tv.html \
20
version.txt \
21
$(NULL)
22
web/demosites.html
new
+294
@@ -0,0 +1,294 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+<head>
4
+ <title>NetData Demo Sites Dashboard</title>
5
+
6
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7
+ <meta 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">
12
+
13
+ <script>
14
+ // this section has to appear before loading dashboard.js
15
+
16
+ // Select a theme.
17
+ // uncomment on of the two themes:
18
+
19
+ // var netdataTheme = 'default'; // this is white
20
+ var netdataTheme = 'slate'; // this is dark
21
+
22
+
23
+ // Set the default netdata server.
24
+ // on charts without a 'data-host', this one will be used.
25
+ // the default is the server that dashboard.js is downloaded from.
26
+
27
+ // var netdataServer = 'http://my.server:19999/';
28
+ </script>
29
+
30
+ <!--
31
+ Load dashboard.js
32
+
33
+ to host this HTML file on your web server,
34
+ you have to load dashboard.js from the netdata server.
35
+
36
+ So, pick one the two below
37
+ If you pick the first, set the server name/IP.
38
+
39
+ The second assumes you host this file on /usr/share/netdata/web
40
+ and that you have chown it to be owned by netdata:netdata
41
+ -->
42
+ <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
43
+ <script type="text/javascript" src="dashboard.js"></script>
44
+
45
+ <script>
46
+ // Set options for TV operation
47
+ // This has to be done, after dashboard.js is loaded
48
+
49
+ // destroy charts not shown (lowers memory on the browser)
50
+ NETDATA.options.current.destroy_on_hide = true;
51
+
52
+ // set this to false, to always show all dimensions
53
+ NETDATA.options.current.eliminate_zero_dimensions = true;
54
+
55
+ // lower the pressure on this browser
56
+ NETDATA.options.current.concurrent_refreshes = false;
57
+
58
+ // if the tv browser is too slow (a pi?)
59
+ // set this to false
60
+ NETDATA.options.current.parallel_refresher = true;
61
+
62
+ // always update the charts, even if focus is lost
63
+ // NETDATA.options.current.stop_updates_when_focus_is_lost = false;
64
+
65
+ // Since you may render charts from many servers and any of them may
66
+ // become offline for some time, the charts will break.
67
+ // This will reload the page every RELOAD_EVERY minutes
68
+
69
+ var RELOAD_EVERY = 5;
70
+ setTimeout(function(){
71
+ location.reload();
72
+ }, RELOAD_EVERY * 60 * 1000);
73
+
74
+ </script>
75
+
76
+</head>
77
+<body>
78
+
79
+<div style="width: 100%; text-align: center; display: inline-block;">
80
+
81
+ <div style="width: 100%; height: 16vh; text-align: center; display: inline-block;">
82
+ <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
83
+ <b>CPU On both servers</b>
84
+ </div>
85
+ <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
86
+ <br/>
87
+ <div data-netdata="system.cpu"
88
+ data-host="//netdata.firehol.org"
89
+ data-title="CPU usage of EU Server"
90
+ data-chart-library="dygraph"
91
+ data-width="49%"
92
+ data-height="100%"
93
+ data-after="-300"
94
+ ></div>
95
+ <div data-netdata="system.cpu"
96
+ data-host="//netdata2.firehol.org"
97
+ data-title="CPU usage of US Server"
98
+ data-chart-library="dygraph"
99
+ data-width="49%"
100
+ data-height="100%"
101
+ data-after="-300"
102
+ ></div>
103
+ </div>
104
+ </div>
105
+
106
+
107
+ <div style="width: 100%; height: 16vh; text-align: center; display: inline-block;">
108
+ <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
109
+ <b>Disk I/O on both servers</b>
110
+ </div>
111
+ <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
112
+ <div data-netdata="tc.world_in"
113
+ data-host="//netdata.firehol.org"
114
+ data-title="I/O on EU Server"
115
+ data-chart-library="dygraph"
116
+ data-width="49%"
117
+ data-height="100%"
118
+ data-after="-300"
119
+ ></div>
120
+ <div data-netdata="tc.world_in"
121
+ data-host="//netdata2.firehol.org"
122
+ data-title="I/O on US Server"
123
+ data-chart-library="dygraph"
124
+ data-width="49%"
125
+ data-height="100%"
126
+ data-after="-300"
127
+ ></div>
128
+ </div>
129
+ </div>
130
+
131
+ <div style="width: 100%; height: 16vh; text-align: center; display: inline-block;">
132
+ <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
133
+ <div data-netdata="tc.world_out"
134
+ data-host="//netdata.firehol.org"
135
+ data-title="I/O on EU Server"
136
+ data-chart-library="dygraph"
137
+ data-width="49%"
138
+ data-height="100%"
139
+ data-after="-300"
140
+ ></div>
141
+ <div data-netdata="tc.world_out"
142
+ data-host="//netdata2.firehol.org"
143
+ data-title="I/O on US Server"
144
+ data-chart-library="dygraph"
145
+ data-width="49%"
146
+ data-height="100%"
147
+ data-after="-300"
148
+ ></div>
149
+ </div>
150
+ </div>
151
+
152
+ <div style="width: 100%; height: 12vh; text-align: center; display: inline-block;">
153
+ <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
154
+ <b>NGINX performance on both servers</b>
155
+ </div>
156
+ <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
157
+ <div data-netdata="nginx.connections"
158
+ data-host="//netdata.firehol.org"
159
+ data-title="NGINX Connections on EU Server"
160
+ data-chart-library="dygraph"
161
+ data-width="49%"
162
+ data-height="100%"
163
+ data-after="-300"
164
+ ></div>
165
+ <div data-netdata="nginx.connections"
166
+ data-host="//netdata2.firehol.org"
167
+ data-title="NGINX Connections on US Server"
168
+ data-chart-library="dygraph"
169
+ data-width="49%"
170
+ data-height="100%"
171
+ data-after="-300"
172
+ ></div>
173
+ </div>
174
+ </div>
175
+
176
+ <div style="width: 100%; height: 12vh; text-align: center; display: inline-block;">
177
+ <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
178
+ <div data-netdata="nginx.requests"
179
+ data-host="//netdata.firehol.org"
180
+ data-title="NGINX Requests on EU Server"
181
+ data-chart-library="dygraph"
182
+ data-width="49%"
183
+ data-height="100%"
184
+ data-after="-300"
185
+ data-colors="#5555FF"
186
+ ></div>
187
+ <div data-netdata="nginx.requests"
188
+ data-host="//netdata2.firehol.org"
189
+ data-title="NGINX Requests on US Server"
190
+ data-chart-library="dygraph"
191
+ data-width="49%"
192
+ data-height="100%"
193
+ data-after="-300"
194
+ data-colors="#5555FF"
195
+ ></div>
196
+ </div>
197
+ </div>
198
+
199
+ <div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
200
+ <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
201
+ <b>Netdata statistics on both servers</b>
202
+ </div>
203
+ <div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">
204
+ <div style="width: 49%; height:100%; align: center; display: inline-block;">
205
+ EU Server
206
+ <br/>
207
+ <div data-netdata="netdata.net"
208
+ data-dimensions="out"
209
+ data-host="//netdata.firehol.org"
210
+ data-title="Chart Data Traffic"
211
+ data-chart-library="easypiechart"
212
+ data-width="16%"
213
+ data-height="100%"
214
+ data-after="-300"
215
+ data-points="300"
216
+ ></div>
217
+ <div data-netdata="netdata.net"
218
+ data-dimensions="in"
219
+ data-host="//netdata.firehol.org"
220
+ data-title="Requests Traffic"
221
+ data-chart-library="easypiechart"
222
+ data-width="16%"
223
+ data-height="100%"
224
+ data-after="-300"
225
+ data-points="300"
226
+ ></div>
227
+ <div data-netdata="netdata.clients"
228
+ data-host="//netdata.firehol.org"
229
+ data-title="Sockets"
230
+ data-chart-library="gauge"
231
+ data-width="22%"
232
+ data-height="100%"
233
+ data-after="-300"
234
+ data-points="300"
235
+ data-colors="#AA5500"
236
+ ></div>
237
+ <div data-netdata="netdata.requests"
238
+ data-host="//netdata.firehol.org"
239
+ data-title="Chart Refreshes/s"
240
+ data-chart-library="gauge"
241
+ data-width="22%"
242
+ data-height="100%"
243
+ data-after="-300"
244
+ data-points="300"
245
+ ></div>
246
+ </div>
247
+ <div style="width: 49%; height:100%; align: center; display: inline-block;">
248
+ US Server
249
+ <br/>
250
+ <div data-netdata="netdata.requests"
251
+ data-host="//netdata2.firehol.org"
252
+ data-title="Chart Refreshes/s"
253
+ data-chart-library="gauge"
254
+ data-width="22%"
255
+ data-height="100%"
256
+ data-after="-300"
257
+ data-points="300"
258
+ ></div>
259
+ <div data-netdata="netdata.clients"
260
+ data-host="//netdata2.firehol.org"
261
+ data-title="Sockets"
262
+ data-chart-library="gauge"
263
+ data-width="22%"
264
+ data-height="100%"
265
+ data-after="-300"
266
+ data-points="300"
267
+ data-colors="#AA5500"
268
+ ></div>
269
+ <div data-netdata="netdata.net"
270
+ data-dimensions="in"
271
+ data-host="//netdata2.firehol.org"
272
+ data-title="Requests Traffic"
273
+ data-chart-library="easypiechart"
274
+ data-width="16%"
275
+ data-height="100%"
276
+ data-after="-300"
277
+ data-points="300"
278
+ ></div>
279
+ <div data-netdata="netdata.net"
280
+ data-dimensions="out"
281
+ data-host="//netdata2.firehol.org"
282
+ data-title="Chart Data Traffic"
283
+ data-chart-library="easypiechart"
284
+ data-width="16%"
285
+ data-height="100%"
286
+ data-after="-300"
287
+ data-points="300"
288
+ ></div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+</div>
293
+</body>
294
+</html>
web/tv.html
+247
-239
@@ -1,239 +1,247 @@
1
-<!DOCTYPE html>
2
-<html lang="en">
3
-<head>
4
- <title>NetData TV Dashboard</title>
5
-
6
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7
- <meta 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">
12
-
13
- <script>
14
- // this section has to appear before loading dashboard.js
15
-
16
- // Select a theme.
17
- // uncomment on of the two themes:
18
-
19
- // var netdataTheme = 'default'; // this is white
20
- var netdataTheme = 'slate'; // this is dark
21
-
22
-
23
- // Set the default netdata server.
24
- // on charts without a 'data-host', this one will be used.
25
- // the default is the server that dashboard.js is downloaded from.
26
-
27
- // var netdataServer = 'http://my.server:19999/';
28
- </script>
29
-
30
- <!--
31
- Load dashboard.js
32
-
33
- to host this HTML file on your web server,
34
- you have to load dashboard.js from the netdata server.
35
-
36
- So, pick one the two below
37
- If you pick the first, set the server name/IP.
38
-
39
- The second assumes you host this file on /usr/share/netdata/web
40
- and that you have chown it to be owned by netdata:netdata
41
- -->
42
- <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
43
- <script type="text/javascript" src="dashboard.js"></script>
44
-
45
- <script>
46
- // Set options for TV operation
47
- // This has to be done, after dashboard.js is loaded
48
-
49
- // destroy charts not shown (lowers memory on the browser)
50
- NETDATA.options.current.destroy_on_hide = true;
51
-
52
- // set this to false, to always show all dimensions
53
- NETDATA.options.current.eliminate_zero_dimensions = true;
54
-
55
- // always update the charts, even if focus is lost
56
- NETDATA.options.current.stop_updates_when_focus_is_lost = false;
57
-
58
- // Since you may render charts from many servers and any of them may
59
- // become offline for some time, the charts will break.
60
- // This will reload the page every RELOAD_EVERY minutes
61
- var RELOAD_EVERY = 5;
62
- setTimeout(function(){
63
- location.reload();
64
- }, RELOAD_EVERY * 60 * 1000);
65
-
66
- </script>
67
-
68
-</head>
69
-<body>
70
-
71
-<div style="width: 100%; text-align: center; display: inline-block;">
72
-
73
- <b>PLEASE RESPECT OUR DEMO SITE RESOURCES - DON'T PUT THIS AS-IS ON TV - CLOSE IT WHEN YOU DON'T NEED IT !</b>
74
-
75
-
76
- <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
77
- <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
78
- <b>CPU On both servers</b>
79
- </div>
80
- <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
81
- <br/>
82
- <div data-netdata="system.cpu"
83
- data-host="http://netdata.firehol.org"
84
- data-title="CPU usage of netdata.firehol.org"
85
- data-chart-library="dygraph"
86
- data-width="49%"
87
- data-height="100%"
88
- data-after="-300"
89
- ></div>
90
- <div data-netdata="system.cpu"
91
- data-title="CPU usage of your netdata server"
92
- data-chart-library="dygraph"
93
- data-width="49%"
94
- data-height="100%"
95
- data-after="-300"
96
- ></div>
97
- </div>
98
- </div>
99
-
100
-
101
- <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
102
- <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
103
- <b>Disk I/O on both servers</b>
104
- </div>
105
- <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
106
- <div data-netdata="system.io"
107
- data-host="http://netdata.firehol.org"
108
- data-title="I/O on netdata.firehol.org"
109
- data-chart-library="dygraph"
110
- data-width="49%"
111
- data-height="100%"
112
- data-after="-300"
113
- ></div>
114
- <div data-netdata="system.io"
115
- data-title="I/O on your netdata server"
116
- data-chart-library="dygraph"
117
- data-width="49%"
118
- data-height="100%"
119
- data-after="-300"
120
- ></div>
121
- </div>
122
- </div>
123
-
124
-
125
- <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
126
- <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
127
- <b>IPv4 traffic on both servers</b>
128
- </div>
129
- <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
130
- <div data-netdata="system.ipv4"
131
- data-host="http://netdata.firehol.org"
132
- data-title="IPv4 traffic on netdata.firehol.org"
133
- data-chart-library="dygraph"
134
- data-width="49%"
135
- data-height="100%"
136
- data-after="-300"
137
- ></div>
138
- <div data-netdata="system.ipv4"
139
- data-title="IPv4 traffic on your netdata server"
140
- data-chart-library="dygraph"
141
- data-width="49%"
142
- data-height="100%"
143
- data-after="-300"
144
- ></div>
145
- </div>
146
- </div>
147
-
148
- <div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
149
- <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
150
- <b>Netdata statistics on both servers</b>
151
- </div>
152
- <div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">
153
- <div style="width: 49%; height:100%; align: center; display: inline-block;">
154
- netdata.firehol.org
155
- <br/>
156
- <div data-netdata="netdata.requests"
157
- data-host="http://netdata.firehol.org"
158
- data-title="Chart Refreshes/s"
159
- data-chart-library="gauge"
160
- data-width="20%"
161
- data-height="100%"
162
- data-after="-300"
163
- data-points="300"
164
- ></div>
165
- <div data-netdata="netdata.clients"
166
- data-host="http://netdata.firehol.org"
167
- data-title="Sockets"
168
- data-chart-library="gauge"
169
- data-width="20%"
170
- data-height="100%"
171
- data-after="-300"
172
- data-points="300"
173
- data-colors="#AA5500"
174
- ></div>
175
- <div data-netdata="netdata.net"
176
- data-dimensions="in"
177
- data-host="http://netdata.firehol.org"
178
- data-title="Requests Traffic"
179
- data-chart-library="easypiechart"
180
- data-width="15%"
181
- data-height="100%"
182
- data-after="-300"
183
- data-points="300"
184
- ></div>
185
- <div data-netdata="netdata.net"
186
- data-dimensions="out"
187
- data-host="http://netdata.firehol.org"
188
- data-title="Chart Data Traffic"
189
- data-chart-library="easypiechart"
190
- data-width="15%"
191
- data-height="100%"
192
- data-after="-300"
193
- data-points="300"
194
- ></div>
195
- </div>
196
- <div style="width: 49%; height:100%; align: center; display: inline-block;">
197
- your netdata server
198
- <br/>
199
- <div data-netdata="netdata.requests"
200
- data-title="Chart Refreshes/s"
201
- data-chart-library="gauge"
202
- data-width="20%"
203
- data-height="100%"
204
- data-after="-300"
205
- data-points="300"
206
- ></div>
207
- <div data-netdata="netdata.clients"
208
- data-title="Sockets"
209
- data-chart-library="gauge"
210
- data-width="20%"
211
- data-height="100%"
212
- data-after="-300"
213
- data-points="300"
214
- data-colors="#AA5500"
215
- ></div>
216
- <div data-netdata="netdata.net"
217
- data-dimensions="in"
218
- data-title="Requests Traffic"
219
- data-chart-library="easypiechart"
220
- data-width="15%"
221
- data-height="100%"
222
- data-after="-300"
223
- data-points="300"
224
- ></div>
225
- <div data-netdata="netdata.net"
226
- data-dimensions="out"
227
- data-title="Chart Data Traffic"
228
- data-chart-library="easypiechart"
229
- data-width="15%"
230
- data-height="100%"
231
- data-after="-300"
232
- data-points="300"
233
- ></div>
234
- </div>
235
- </div>
236
- </div>
237
-</div>
238
-</body>
239
-</html>
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+<head>
4
+ <title>NetData TV Dashboard</title>
5
+
6
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7
+ <meta 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">
12
+
13
+ <script>
14
+ // this section has to appear before loading dashboard.js
15
+
16
+ // Select a theme.
17
+ // uncomment on of the two themes:
18
+
19
+ // var netdataTheme = 'default'; // this is white
20
+ var netdataTheme = 'slate'; // this is dark
21
+
22
+
23
+ // Set the default netdata server.
24
+ // on charts without a 'data-host', this one will be used.
25
+ // the default is the server that dashboard.js is downloaded from.
26
+
27
+ // var netdataServer = 'http://my.server:19999/';
28
+ </script>
29
+
30
+ <!--
31
+ Load dashboard.js
32
+
33
+ to host this HTML file on your web server,
34
+ you have to load dashboard.js from the netdata server.
35
+
36
+ So, pick one the two below
37
+ If you pick the first, set the server name/IP.
38
+
39
+ The second assumes you host this file on /usr/share/netdata/web
40
+ and that you have chown it to be owned by netdata:netdata
41
+ -->
42
+ <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
43
+ <script type="text/javascript" src="dashboard.js"></script>
44
+
45
+ <script>
46
+ // Set options for TV operation
47
+ // This has to be done, after dashboard.js is loaded
48
+
49
+ // destroy charts not shown (lowers memory on the browser)
50
+ NETDATA.options.current.destroy_on_hide = true;
51
+
52
+ // set this to false, to always show all dimensions
53
+ NETDATA.options.current.eliminate_zero_dimensions = true;
54
+
55
+ // lower the pressure on this browser
56
+ NETDATA.options.current.concurrent_refreshes = false;
57
+
58
+ // if the tv browser is too slow (a pi?)
59
+ // set this to false
60
+ NETDATA.options.current.parallel_refresher = true;
61
+
62
+ // always update the charts, even if focus is lost
63
+ // NETDATA.options.current.stop_updates_when_focus_is_lost = false;
64
+
65
+ // Since you may render charts from many servers and any of them may
66
+ // become offline for some time, the charts will break.
67
+ // This will reload the page every RELOAD_EVERY minutes
68
+
69
+ var RELOAD_EVERY = 5;
70
+ setTimeout(function(){
71
+ location.reload();
72
+ }, RELOAD_EVERY * 60 * 1000);
73
+
74
+ </script>
75
+
76
+</head>
77
+<body>
78
+
79
+<div style="width: 100%; text-align: center; display: inline-block;">
80
+
81
+ <b>PLEASE RESPECT OUR DEMO SITE RESOURCES - DON'T PUT THIS AS-IS ON TV - CLOSE IT WHEN YOU DON'T NEED IT !</b>
82
+
83
+
84
+ <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
85
+ <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
86
+ <b>CPU On both servers</b>
87
+ </div>
88
+ <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
89
+ <br/>
90
+ <div data-netdata="system.cpu"
91
+ data-host="http://netdata.firehol.org"
92
+ data-title="CPU usage of netdata.firehol.org"
93
+ data-chart-library="dygraph"
94
+ data-width="49%"
95
+ data-height="100%"
96
+ data-after="-300"
97
+ ></div>
98
+ <div data-netdata="system.cpu"
99
+ data-title="CPU usage of your netdata server"
100
+ data-chart-library="dygraph"
101
+ data-width="49%"
102
+ data-height="100%"
103
+ data-after="-300"
104
+ ></div>
105
+ </div>
106
+ </div>
107
+
108
+
109
+ <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
110
+ <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
111
+ <b>Disk I/O on both servers</b>
112
+ </div>
113
+ <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
114
+ <div data-netdata="system.io"
115
+ data-host="http://netdata.firehol.org"
116
+ data-title="I/O on netdata.firehol.org"
117
+ data-chart-library="dygraph"
118
+ data-width="49%"
119
+ data-height="100%"
120
+ data-after="-300"
121
+ ></div>
122
+ <div data-netdata="system.io"
123
+ data-title="I/O on your netdata server"
124
+ data-chart-library="dygraph"
125
+ data-width="49%"
126
+ data-height="100%"
127
+ data-after="-300"
128
+ ></div>
129
+ </div>
130
+ </div>
131
+
132
+
133
+ <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
134
+ <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
135
+ <b>IPv4 traffic on both servers</b>
136
+ </div>
137
+ <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
138
+ <div data-netdata="system.ipv4"
139
+ data-host="http://netdata.firehol.org"
140
+ data-title="IPv4 traffic on netdata.firehol.org"
141
+ data-chart-library="dygraph"
142
+ data-width="49%"
143
+ data-height="100%"
144
+ data-after="-300"
145
+ ></div>
146
+ <div data-netdata="system.ipv4"
147
+ data-title="IPv4 traffic on your netdata server"
148
+ data-chart-library="dygraph"
149
+ data-width="49%"
150
+ data-height="100%"
151
+ data-after="-300"
152
+ ></div>
153
+ </div>
154
+ </div>
155
+
156
+ <div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
157
+ <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
158
+ <b>Netdata statistics on both servers</b>
159
+ </div>
160
+ <div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">
161
+ <div style="width: 49%; height:100%; align: center; display: inline-block;">
162
+ netdata.firehol.org
163
+ <br/>
164
+ <div data-netdata="netdata.requests"
165
+ data-host="http://netdata.firehol.org"
166
+ data-title="Chart Refreshes/s"
167
+ data-chart-library="gauge"
168
+ data-width="20%"
169
+ data-height="100%"
170
+ data-after="-300"
171
+ data-points="300"
172
+ ></div>
173
+ <div data-netdata="netdata.clients"
174
+ data-host="http://netdata.firehol.org"
175
+ data-title="Sockets"
176
+ data-chart-library="gauge"
177
+ data-width="20%"
178
+ data-height="100%"
179
+ data-after="-300"
180
+ data-points="300"
181
+ data-colors="#AA5500"
182
+ ></div>
183
+ <div data-netdata="netdata.net"
184
+ data-dimensions="in"
185
+ data-host="http://netdata.firehol.org"
186
+ data-title="Requests Traffic"
187
+ data-chart-library="easypiechart"
188
+ data-width="15%"
189
+ data-height="100%"
190
+ data-after="-300"
191
+ data-points="300"
192
+ ></div>
193
+ <div data-netdata="netdata.net"
194
+ data-dimensions="out"
195
+ data-host="http://netdata.firehol.org"
196
+ data-title="Chart Data Traffic"
197
+ data-chart-library="easypiechart"
198
+ data-width="15%"
199
+ data-height="100%"
200
+ data-after="-300"
201
+ data-points="300"
202
+ ></div>
203
+ </div>
204
+ <div style="width: 49%; height:100%; align: center; display: inline-block;">
205
+ your netdata server
206
+ <br/>
207
+ <div data-netdata="netdata.requests"
208
+ data-title="Chart Refreshes/s"
209
+ data-chart-library="gauge"
210
+ data-width="20%"
211
+ data-height="100%"
212
+ data-after="-300"
213
+ data-points="300"
214
+ ></div>
215
+ <div data-netdata="netdata.clients"
216
+ data-title="Sockets"
217
+ data-chart-library="gauge"
218
+ data-width="20%"
219
+ data-height="100%"
220
+ data-after="-300"
221
+ data-points="300"
222
+ data-colors="#AA5500"
223
+ ></div>
224
+ <div data-netdata="netdata.net"
225
+ data-dimensions="in"
226
+ data-title="Requests Traffic"
227
+ data-chart-library="easypiechart"
228
+ data-width="15%"
229
+ data-height="100%"
230
+ data-after="-300"
231
+ data-points="300"
232
+ ></div>
233
+ <div data-netdata="netdata.net"
234
+ data-dimensions="out"
235
+ data-title="Chart Data Traffic"
236
+ data-chart-library="easypiechart"
237
+ data-width="15%"
238
+ data-height="100%"
239
+ data-after="-300"
240
+ data-points="300"
241
+ ></div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+</div>
246
+</body>
247
+</html>