tv.html 11 KB

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