forked from netdata/dashboard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtv.html
287 lines (259 loc) · 12 KB
/
tv.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!DOCTYPE html>
<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
<html lang="en">
<head>
<title>NetData TV Dashboard</title>
<meta name="application-name" content="netdata">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://cloud.githubusercontent.com/assets/2662304/22945737/e98cd0c6-f2fd-11e6-96f1-5501934b0955.png"/>
<meta property="og:url" content="http://my-netdata.io/"/>
<meta property="og:type" content="website"/>
<meta property="og:site_name" content="netdata"/>
<meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
<meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
<!-- todo generate urls like this from prod build -->
<!-- <link href="/dashboard/build/static/css/main.19393e92.chunk.css" rel="stylesheet">-->
</head>
<script>
// this section has to appear before loading dashboard.js
// Select a theme.
// uncomment on of the two themes:
// var netdataTheme = 'default'; // this is white
var netdataTheme = 'slate'; // this is dark
// Set the default netdata server.
// on charts without a 'data-host', this one will be used.
// the default is the server that dashboard.js is downloaded from.
// var netdataServer = 'http://my.server:19999/';
</script>
<!--
Load dashboard.js
to host this HTML file on your web server,
you have to load dashboard.js from the netdata server.
So, pick one the two below
If you pick the first, set the server name/IP.
The second assumes you host this file on /usr/share/netdata/web
and that you have chown it to be owned by netdata:netdata
-->
<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
<script type="text/javascript" src="dashboard-react.js"></script>
<script>
// Set options for TV operation
// This has to be done, after dashboard.js is loaded
// destroy charts not shown (lowers memory on the browser)
NETDATA.options.current.destroy_on_hide = true;
// set this to false, to always show all dimensions
NETDATA.options.current.eliminate_zero_dimensions = true;
// lower the pressure on this browser
NETDATA.options.current.concurrent_refreshes = false;
// if the tv browser is too slow (a pi?)
// set this to false
NETDATA.options.current.parallel_refresher = true;
// always update the charts, even if focus is lost
// NETDATA.options.current.stop_updates_when_focus_is_lost = false;
// Since you may render charts from many servers and any of them may
// become offline for some time, the charts will break.
// This will reload the page every RELOAD_EVERY minutes
var RELOAD_EVERY = 5;
setTimeout(function(){
location.reload();
}, RELOAD_EVERY * 60 * 1000);
</script>
<body>
<div style="width: 100%; text-align: center; display: inline-block;">
<div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
<b>CPU On both servers</b>
</div>
<div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
<br/>
<div data-netdata="system.cpu"
data-host="https://registry.my-netdata.io"
data-title="CPU usage of registry.my-netdata.io"
data-chart-library="dygraph"
data-width="49%"
data-height="100%"
data-after="-300"
data-dygraph-valuerange="[0, 100]"
></div>
<div data-netdata="system.cpu"
data-title="CPU usage of your netdata server"
data-chart-library="dygraph"
data-width="49%"
data-height="100%"
data-after="-300"
data-dygraph-valuerange="[0, 100]"
></div>
</div>
</div>
<div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
<b>Disk I/O on both servers</b>
</div>
<div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
<div data-netdata="system.io"
data-host="https://registry.my-netdata.io"
data-common-max="io"
data-common-min="io"
data-title="I/O on registry.my-netdata.io"
data-chart-library="dygraph"
data-width="49%"
data-height="100%"
data-after="-300"
></div>
<div data-netdata="system.io"
data-title="I/O on your netdata server"
data-common-max="io"
data-common-min="io"
data-chart-library="dygraph"
data-width="49%"
data-height="100%"
data-after="-300"
></div>
</div>
</div>
<div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
<b>IPv4 traffic on both servers</b>
</div>
<div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
<div data-netdata="system.net"
data-host="https://registry.my-netdata.io"
data-common-max="traffic"
data-common-min="traffic"
data-title="Network traffic on registry.my-netdata.io"
data-chart-library="dygraph"
data-width="49%"
data-height="100%"
data-after="-300"
></div>
<div data-netdata="system.net"
data-title="Network traffic on your netdata server"
data-common-max="traffic"
data-common-min="traffic"
data-chart-library="dygraph"
data-width="49%"
data-height="100%"
data-after="-300"
></div>
</div>
</div>
<div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
<b>Netdata statistics on both servers</b>
</div>
<div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">
<div style="width: 49%; height:100%; align: center; display: inline-block;">
registry.my-netdata.io
<br/>
<div data-netdata="netdata.requests"
data-host="https://registry.my-netdata.io"
data-common-max="netdata-requests"
data-decimal-digits="0"
data-title="Chart Refreshes/s"
data-chart-library="gauge"
data-width="20%"
data-height="100%"
data-after="-300"
data-points="300"
></div>
<div data-netdata="netdata.clients"
data-host="https://registry.my-netdata.io"
data-common-max="netdata-clients"
data-decimal-digits="0"
data-title="Sockets"
data-chart-library="gauge"
data-width="20%"
data-height="100%"
data-after="-300"
data-points="300"
data-colors="#AA5500"
></div>
<div data-netdata="netdata.net"
data-dimensions="in"
data-common-max="netdata-net-in"
data-decimal-digits="0"
data-host="https://registry.my-netdata.io"
data-title="Requests Traffic"
data-chart-library="easypiechart"
data-width="15%"
data-height="100%"
data-after="-300"
data-points="300"
></div>
<div data-netdata="netdata.net"
data-dimensions="out"
data-common-max="netdata-net-out"
data-decimal-digits="0"
data-host="https://registry.my-netdata.io"
data-title="Chart Data Traffic"
data-chart-library="easypiechart"
data-width="15%"
data-height="100%"
data-after="-300"
data-points="300"
></div>
</div>
<div style="width: 49%; height:100%; align: center; display: inline-block;">
your netdata server
<br/>
<div data-netdata="netdata.requests"
data-title="Chart Refreshes/s"
data-common-max="netdata-requests"
data-decimal-digits="0"
data-chart-library="gauge"
data-width="20%"
data-height="100%"
data-after="-300"
data-points="300"
></div>
<div data-netdata="netdata.clients"
data-common-max="netdata-clients"
data-decimal-digits="0"
data-title="Sockets"
data-chart-library="gauge"
data-width="20%"
data-height="100%"
data-after="-300"
data-points="300"
data-colors="#AA5500"
></div>
<div data-netdata="netdata.net"
data-dimensions="in"
data-common-max="netdata-net-in"
data-decimal-digits="0"
data-title="Requests Traffic"
data-chart-library="easypiechart"
data-width="15%"
data-height="100%"
data-after="-300"
data-points="300"
></div>
<div data-netdata="netdata.net"
data-dimensions="out"
data-common-max="netdata-net-out"
data-decimal-digits="0"
data-title="Chart Data Traffic"
data-chart-library="easypiechart"
data-width="15%"
data-height="100%"
data-after="-300"
data-points="300"
></div>
</div>
</div>
</div>
<!-- react root -->
<div id="root"></div>
</div>
<!-- todo generate links like this for production build -->
<!--<script src="/dashboard/craBuildScript.js"></script>-->
<!--<script src="/dashboard/build/static/js/2.b41502e9.chunk.js"></script>-->
<!--<script src="/dashboard/build/static/js/main.bc5ba69e.chunk.js"></script>-->
</body>
</html>