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.

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