4 <title>NetData TV Dashboard</title>
\r
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\r
7 <meta charset="utf-8">
\r
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
\r
9 <meta name="viewport" content="width=device-width, initial-scale=1">
\r
10 <meta name="apple-mobile-web-app-capable" content="yes">
\r
11 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
\r
14 // this section has to appear before loading dashboard.js
\r
17 // uncomment on of the two themes:
\r
19 // var netdataTheme = 'default'; // this is white
\r
20 var netdataTheme = 'slate'; // this is dark
\r
23 // Set the default netdata server.
\r
24 // on charts without a 'data-host', this one will be used.
\r
25 // the default is the server that dashboard.js is downloaded from.
\r
27 // var netdataServer = 'http://my.server:19999/';
\r
33 to host this HTML file on your web server,
\r
34 you have to load dashboard.js from the netdata server.
\r
36 So, pick one the two below
\r
37 If you pick the first, set the server name/IP.
\r
39 The second assumes you host this file on /usr/share/netdata/web
\r
40 and that you have chown it to be owned by netdata:netdata
\r
42 <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
\r
43 <script type="text/javascript" src="dashboard.js"></script>
\r
46 // Set options for TV operation
\r
47 // This has to be done, after dashboard.js is loaded
\r
49 // destroy charts not shown (lowers memory on the browser)
\r
50 NETDATA.options.current.destroy_on_hide = true;
\r
52 // set this to false, to always show all dimensions
\r
53 NETDATA.options.current.eliminate_zero_dimensions = true;
\r
55 // always update the charts, even if focus is lost
\r
56 NETDATA.options.current.stop_updates_when_focus_is_lost = false;
\r
58 // Since you may render charts from many servers and any of them may
\r
59 // become offline for some time, the charts will break.
\r
60 // This will reload the page every RELOAD_EVERY minutes
\r
61 var RELOAD_EVERY = 5;
\r
62 setTimeout(function(){
\r
64 }, RELOAD_EVERY * 60 * 1000);
\r
71 <div style="width: 100%; text-align: center; display: inline-block;">
\r
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>
\r
76 <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
\r
77 <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
\r
78 <b>CPU On both servers</b>
\r
80 <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
\r
82 <div data-netdata="system.cpu"
\r
83 data-host="http://netdata.firehol.org"
\r
84 data-title="CPU usage of netdata.firehol.org"
\r
85 data-chart-library="dygraph"
\r
90 <div data-netdata="system.cpu"
\r
91 data-title="CPU usage of your netdata server"
\r
92 data-chart-library="dygraph"
\r
101 <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
\r
102 <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
\r
103 <b>Disk I/O on both servers</b>
\r
105 <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
\r
106 <div data-netdata="system.io"
\r
107 data-host="http://netdata.firehol.org"
\r
108 data-title="I/O on netdata.firehol.org"
\r
109 data-chart-library="dygraph"
\r
114 <div data-netdata="system.io"
\r
115 data-title="I/O on your netdata server"
\r
116 data-chart-library="dygraph"
\r
125 <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
\r
126 <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
\r
127 <b>IPv4 traffic on both servers</b>
\r
129 <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
\r
130 <div data-netdata="system.ipv4"
\r
131 data-host="http://netdata.firehol.org"
\r
132 data-title="IPv4 traffic on netdata.firehol.org"
\r
133 data-chart-library="dygraph"
\r
138 <div data-netdata="system.ipv4"
\r
139 data-title="IPv4 traffic on your netdata server"
\r
140 data-chart-library="dygraph"
\r
148 <div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
\r
149 <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
\r
150 <b>Netdata statistics on both servers</b>
\r
152 <div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">
\r
153 <div style="width: 49%; height:100%; align: center; display: inline-block;">
\r
154 netdata.firehol.org
\r
156 <div data-netdata="netdata.requests"
\r
157 data-host="http://netdata.firehol.org"
\r
158 data-title="Chart Refreshes/s"
\r
159 data-chart-library="gauge"
\r
165 <div data-netdata="netdata.clients"
\r
166 data-host="http://netdata.firehol.org"
\r
167 data-title="Sockets"
\r
168 data-chart-library="gauge"
\r
173 data-colors="#AA5500"
\r
175 <div data-netdata="netdata.net"
\r
176 data-dimensions="in"
\r
177 data-host="http://netdata.firehol.org"
\r
178 data-title="Requests Traffic"
\r
179 data-chart-library="easypiechart"
\r
185 <div data-netdata="netdata.net"
\r
186 data-dimensions="out"
\r
187 data-host="http://netdata.firehol.org"
\r
188 data-title="Chart Data Traffic"
\r
189 data-chart-library="easypiechart"
\r
196 <div style="width: 49%; height:100%; align: center; display: inline-block;">
\r
197 your netdata server
\r
199 <div data-netdata="netdata.requests"
\r
200 data-title="Chart Refreshes/s"
\r
201 data-chart-library="gauge"
\r
207 <div data-netdata="netdata.clients"
\r
208 data-title="Sockets"
\r
209 data-chart-library="gauge"
\r
214 data-colors="#AA5500"
\r
216 <div data-netdata="netdata.net"
\r
217 data-dimensions="in"
\r
218 data-title="Requests Traffic"
\r
219 data-chart-library="easypiechart"
\r
225 <div data-netdata="netdata.net"
\r
226 data-dimensions="out"
\r
227 data-title="Chart Data Traffic"
\r
228 data-chart-library="easypiechart"
\r