You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

317 lines
10 KiB

12 years ago
12 years ago
12 years ago
12 years ago
  1. {% load i18n %}{% load staticfiles %}<!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <title>{% block title %}PyDash{% endblock %}</title>
  8. <link href="{% static "css/fonts.css" %}" rel="stylesheet">
  9. <link href="{% static "css/font-awesome.css" %}" rel="stylesheet">
  10. <link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
  11. <link href="{% static "css/bootstrap-responsive.min.css" %}" rel="stylesheet">
  12. <link href="{% static "css/dashboard.css" %}" rel="stylesheet">
  13. <link href="{% static "css/style.css" %}" rel="stylesheet">
  14. <link href="{% static "css/odometer.css" %}" rel="stylesheet">
  15. {% block style %}{% endblock %}
  16. </head>
  17. <body>
  18. <div class="navbar navbar-fixed-top" style="">
  19. <div class="navbar-inner">
  20. <div class="container" id="refresh-home">
  21. <a class="brand" href="/">pyDash</a>
  22. <ul class="btn btn-mini">
  23. {% if request.user.is_authenticated or user.is_authenticated %}
  24. <a href="{% url 'logout' %}">{% trans "Sign out" %}</a>
  25. {% else %}
  26. <a href="{% url 'login' %}">{% trans "Sign in" %}</a>
  27. {% endif %}
  28. </ul>
  29. <div class="nav-collapse">
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. <div class="subnavbar visible-desktop visible-tablet">
  35. <div class="subnavbar-inner">
  36. <div class="container">
  37. <ul class="mainnav">
  38. <li><a href="#refresh-os"><i class="icon-dashboard"></i><span>General</span> </a> </li>
  39. <li><a href="#refresh-df"><i class="icon-hdd"></i><span>Disk</span> </a> </li>
  40. <li><a href="#refresh-ps"><i class="icon-list-alt"></i><span>CPU</span> </a> </li>
  41. <li><a href="#refresh-ram"><i class="icon-list-alt"></i><span>RAM</span> </a> </li>
  42. <li><a href="#refresh-load"><i class="icon-bolt"></i><span>Load</span> </a> </li>
  43. <li><a href="#refresh-ispeed"><i class="icon-exchange"></i><span>Network</span> </a> </li>
  44. <li><a href="#refresh-home"><i class="icon-home"></i><span>Home</span> </a> </li>
  45. </ul>
  46. </div>
  47. <!-- /container -->
  48. </div>
  49. <!-- /subnavbar-inner -->
  50. </div>
  51. <div class="main">
  52. <div class="main-inner">
  53. <div class="container">
  54. {% block content %}
  55. <div class="row">
  56. <div class="span6">
  57. <div class="widget widget-table action-table">
  58. <div class="widget-header"> <i class="icon-info-sign"></i>
  59. <h3>General Info</h3>
  60. <div id="refresh-os">
  61. </div>
  62. </div>
  63. <!-- /widget-header -->
  64. <div class="widget-content">
  65. <br>
  66. <div style="text-align:center;">
  67. <b>OS:</b> <span class=""></span>{{ getplatform }}<br>
  68. <b>Uptime:</b> <span class="" id="os-uptime"></span>{{ uptime }} Hours<br>
  69. <b>Hostname:</b> <span class=""></span>{{ gethostname }}<br>
  70. <br><br>
  71. </div>
  72. </div>
  73. <!-- /widget-content -->
  74. </div>
  75. <!-- /widget -->
  76. </div>
  77. <div class="span6">
  78. <div class="widget widget-nopad">
  79. <div class="widget-header">
  80. <i class="icon-list-alt"></i>
  81. <h3>Memory Usage</h3>
  82. <div id="refresh-ram">
  83. </div>
  84. </div>
  85. <!-- /widget-header -->
  86. <div class="widget-content">
  87. <div class="widget big-stats-container">
  88. <div class="widget-content">
  89. <p></p>
  90. <canvas id="memoryChart" width="700" height="200"></canvas>
  91. </div>
  92. <!-- /widget-content -->
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. <div class="row">
  99. <div class="span6">
  100. <div class="widget">
  101. <div class="widget-header"> <i class="icon-hdd"></i>
  102. <h3>Disk Usage</h3>
  103. <div id="refresh-df">
  104. </div>
  105. </div>
  106. <!-- /widget-header -->
  107. <div class="widget-content" id="getdisk">
  108. {% include 'disk.html' %}
  109. </div>
  110. <!-- /widget-content -->
  111. </div>
  112. <!-- /widget -->
  113. </div>
  114. <div class="span6">
  115. <div class="widget widget-table action-table">
  116. <div class="widget-header"> <i class="icon-bolt"></i>
  117. <h3>Load Average</h3>
  118. <div id="refresh-load">
  119. </div>
  120. </div>
  121. <!-- /widget-header -->
  122. <div class="widget-content">
  123. <p></p>
  124. <canvas id="loadChart" width="700" height="200"></canvas>
  125. </div>
  126. <!-- /widget-content -->
  127. </div>
  128. <!-- /widget -->
  129. </div>
  130. <!-- /span6 -->
  131. </div>
  132. <!-- /row -->
  133. <div class="row">
  134. <div class="span6">
  135. <div class="widget">
  136. <div class="widget-header"> <i class="icon-list"></i>
  137. <h3>Software</h3>
  138. <div id="refresh-whereis">
  139. </div>
  140. </div>
  141. <!-- /widget-header -->
  142. <div class="widget-content">
  143. <table id="whereis_dashboard" class="table table-hover table-condensed table-bordered" >
  144. </table>
  145. </div>
  146. <!-- /widget-content -->
  147. </div>
  148. <!-- /widget -->
  149. </div><!-- /span -->
  150. <div class="span3">
  151. <div class="widget">
  152. <div class="widget-header"> <i class="icon-monitor"></i>
  153. <h3>IP</h3>
  154. <div id="refresh-ip">
  155. </div>
  156. </div>
  157. <!-- /widget-header -->
  158. <div class="widget-content" id="getip">
  159. {% include 'ip.html' %}
  160. </div>
  161. <!-- /widget-content -->
  162. </div>
  163. <!-- /widget -->
  164. </div><!-- /span -->
  165. <div class="span3">
  166. <div class="widget">
  167. <div class="widget-header"> <i class="icon-monitor"></i>
  168. <h3>Internet Speed</h3>
  169. <div id="refresh-ispeed">
  170. </div>
  171. </div>
  172. <!-- /widget-header -->
  173. <div class="widget-content">
  174. <div align="center" style="padding:10px;">
  175. <span class="lead">{{gettraffic}}</span>
  176. </div>
  177. </div>
  178. <!-- /widget-content -->
  179. </div>
  180. <!-- /widget -->
  181. </div><!-- /span -->
  182. <!-- online users widget (breaks DOM pattern) -->
  183. <div class="span6 pull-right">
  184. <div class="widget widget-table action-table">
  185. <div class="widget-header"> <i class="icon-group"></i>
  186. <h3>Online</h3>
  187. <div id="refresh-online">
  188. </div>
  189. </div>
  190. <!-- /widget-header -->
  191. <div class="widget-content">
  192. <table id="online_dashboard" class="table table-hover table-bordered table-condensed" >
  193. </table>
  194. </div>
  195. <!-- /widget-content -->
  196. </div>
  197. <!-- /widget -->
  198. </div><!-- /span6 -->
  199. </div>
  200. <!-- /row -->
  201. <div class="row">
  202. <div class="span12">
  203. <div class="widget">
  204. <div class="widget-header"> <i class="icon-dashboard"></i>
  205. <h3> Processes </h3>
  206. <div id="refresh-ps">
  207. </div>
  208. <div class="pull-right">
  209. <input type="text" id="filter-ps" class="widget-search" placeholder="search..." />
  210. </div>
  211. </div>
  212. <!-- /widget-header -->
  213. <div class="widget-content">
  214. <table id="ps_dashboard" class="table table-hover table-condensed table-bordered" >
  215. </table>
  216. </div>
  217. <!-- /widget-content -->
  218. </div>
  219. <!-- /widget -->
  220. </div>
  221. <!-- /span -->
  222. </div>
  223. <!-- /row -->
  224. </div>
  225. </div>
  226. <!-- /container -->
  227. </div>
  228. <!-- /main-inner -->
  229. </div>
  230. <!-- /main -->
  231. {% endblock %}
  232. {% block script %}
  233. <script src="{% static "js/jquery.js" %}"></script>
  234. <script src="{% static "js/base.js" %}"></script>
  235. <script src="{% static "js/bootstrap.js" %}"></script>
  236. <script src="{% static "js/jquery.dataTables.min.js" %}"></script>
  237. <script src="{% static "js/Chart.min.js" %}"></script>
  238. <script src="{% static "js/odometer.js" %}"></script>
  239. <script type="text/javascript">
  240. function get_os_data(url, element) {
  241. $.get(url, function(data) {
  242. $(element).text(data);
  243. }, "json");
  244. }
  245. var dashboard = {};
  246. dashboard.getOs = function() {
  247. get_os_data('/info/uptime/', "#os-uptime");
  248. }
  249. var mem_ctx = $("#memoryChart").get(0).getContext("2d");
  250. var memChart = new Chart(mem_ctx);
  251. function memory_usage(){
  252. $.getJSON('/info/memory/{{ memusage }}', function(data) {
  253. var options = {
  254. animation : false,
  255. pointDotRadius : 2,
  256. scaleLabel : "<%=value%> Mb"
  257. }
  258. memChart.Line(data, options);
  259. });
  260. }
  261. var load_ctx = $("#loadChart").get(0).getContext("2d");
  262. var loadChart = new Chart(load_ctx);
  263. function load_average(){
  264. $.getJSON('/info/loadaverage/{{ loadaverage }}', function(data) {
  265. var options = {
  266. animation : false,
  267. pointDotRadius : 2,
  268. scaleLabel : "<%=value%>"
  269. }
  270. loadChart.Line(data, options);
  271. });
  272. }
  273. $(function() {
  274. window.setInterval('memory_usage()', {{ time_refresh }});
  275. window.setInterval('load_average()', {{ time_refresh }});
  276. window.setInterval('dashboard.getOs()', {{ time_refresh }});
  277. });
  278. </script>
  279. {% endblock %}
  280. </body>
  281. </html>