added tv.html example dashboard
Costa Tsaousis (ktsaou) committed
Apr 1, 2016 at 19:26 UTC
d878ee8bffc45134f79b3178e4f7df240df63660
4 files changed
+242
web/Makefile.am
+1
@@ -8,6 +8,7 @@ dist_web_DATA = \
8
index.html \
9
demo.html \
10
demo2.html \
11
+ tv.html \
12
dashboard.html \
13
dashboard.js \
14
dashboard.css \
web/dashboard.css
+1
@@ -102,6 +102,7 @@ body {
102
height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
103
font-size: 10px;
104
margin-top: 5px;
105
+ text-align: left;
106
/* width and height is calculated (depends on the appearance of the legend) */
107
}
108
web/dashboard.slate.css
+1
@@ -110,6 +110,7 @@ body {
110
height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
111
font-size: 10px;
112
margin-top: 5px;
113
+ text-align: left;
114
/* width and height is calculated (depends on the appearance of the legend) */
115
}
116
web/tv.html
new
+239
@@ -0,0 +1,239 @@
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>