@cryptotaxi247 / netdata-1 / commits / 51cdf6662

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>