|
|
{% load i18n %}{% load staticfiles %}<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>{% block title %}PyDash v{{ version }}{% endblock %}</title> <link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet"> <link href="{% static "css/bootstrap-responsive.min.css" %}" rel="stylesheet"> <link href="{% static "css/fonts.css" %}" rel="stylesheet"> <link href="{% static "css/font-awesome.css" %}" rel="stylesheet"> <link href="{% static "css/style.css" %}" rel="stylesheet"> <link href="{% static "css/dashboard.css" %}" rel="stylesheet">
{% block style %}{% endblock %}</head><body><div class="navbar navbar-fixed-top" style=""> <div class="navbar-inner"> <div class="container"> <a class="brand" href="/">pyDash v{{ version }}</a> <ul class="btn btn-mini"> {% if request.user.is_authenticated or user.is_authenticated %} <a href="{% url 'logout' %}">{% trans "Sign out" %}</a> {% else %} <a href="{% url 'login' %}">{% trans "Sign in" %}</a> {% endif %} </ul> <div class="nav-collapse"> </div> </div> </div> </div><div class="subnavbar visible-desktop visible-tablet"> <div class="subnavbar-inner"> <div class="container"> <ul class="mainnav"> <li><a href="#refresh-os"><i class="icon-dashboard"></i><span>General</span> </a> </li> <li><a href="#refresh-df"><i class="icon-hdd"></i><span>Disk</span> </a> </li> <li><a href="#refresh-cpu"><i class="icon-check"></i><span>CPU</span> </a> </li> <li><a href="#refresh-ram"><i class="icon-list-alt"></i><span>RAM</span> </a> </li> <li><a href="#refresh-load"><i class="icon-bolt"></i><span>Load</span> </a> </li> <li><a href="#refresh-online"><i class="icon-user"></i><span>Users</span> </a> </li> <li><a href="#refresh-ispeed"><i class="icon-exchange"></i><span>Network</span> </a> </li> <li><a href="#refresh-ps"><i class="icon-list-alt"></i><span>Processes</span> </a> </li> <li></li> </ul> </div> <!-- /container --> </div> <!-- /subnavbar-inner --> </div><div class="main"> <div class="main-inner"> <div class="container"> {% block content %} <div class="row"> <div class="span3"> <div class="widget widget-table action-table"> <div class="widget-header"> <i class="icon-info-sign"></i> <h3>General Info</h3> <div id="refresh-os"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <br> <div style="text-align:center;"> <b>OS:</b> <span class=""></span>{{ getplatform }}<br> <b>Uptime:</b> <span class="" id="get-uptime"></span> Hours<br> <b>Hostname:</b> <span class=""></span>{{ gethostname }}<br> <b>CPU(s):</b> <span class=""></span>{{ getcpus.cpus }} x {{ getcpus.type }} <br><br> </div> </div> <!-- /widget-content --> </div> <!-- /widget --> </div> <div class="span3"> <div class="widget widget-table action-table"> <div class="widget-header"> <i class="icon-info-sign"></i> <h3>CPU Usage %</h3> <div id="refresh-cpu"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <p></p> <canvas id="cpuuChart" width="270" height="180"></canvas> <div> <span class="cpuf">{% trans "Free" %}</span> <span class="cpuu">{% trans "Used" %}</span> </div> </div> <!-- /widget-content --> </div> <!-- /widget --> </div> <div class="span6"> <div class="widget widget-nopad"> <div class="widget-header"> <i class="icon-list-alt"></i> <h3>Memory Usage</h3> <div id="refresh-ram"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <p></p> <canvas id="memoryChart" width="560" height="200"></canvas> </div> <!-- /widget-content --> </div> </div> </div> <div class="row"> <div class="span6"> <div class="widget widget-table action-table"> <div class="widget-header"> <i class="icon-hdd"></i> <h3>Disk Usage</h3> <div id="refresh-df"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <table class="table table-hover table-condensed table-bordered" > <thead> <tr> <th>Filesystem</th> <th>Size</th> <th>Used</th> <th>Avail</th> <th>Use %</th> <th>Mounted</th> </tr> </thead> <tbody id="get-disk"> </tbody> </table> </div> <!-- /widget-content --> </div> <!-- /widget --> </div> <div class="span6"> <div class="widget widget-table action-table"> <div class="widget-header"> <i class="icon-bolt"></i> <h3>Load Average</h3> <div id="refresh-load"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <p></p> <canvas id="loadChart" width="560" height="200"></canvas> </div> <!-- /widget-content --> </div> <!-- /widget --> </div> <!-- /span6 --> </div> <!-- /row --> <div class="row"> <div class="span6"> <div class="widget widget-table action-table"> <div class="widget-header"> <i class="icon-group"></i> <h3>Online</h3> <div id="refresh-online"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <table class="table table-hover table-condensed table-bordered"> <thead> <tr> <th>User</th> <th>TTY</th> <th>Logged in from</th> </tr> </thead> <tbody id="get-users"> </tbody> </table> </div> <!-- /widget-content --> </div> <!-- /widget --> </div> <div class="span3"> <div class="widget widget-table action-table"> <div class="widget-header"> <i class="icon-monitor"></i> <h3>IP Adresses</h3> <div id="refresh-ip"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <table class="table table-hover table-condensed table-bordered"> <thead> <tr> <th>Interface</th> <th>IP</th> </tr> </thead> <tbody id="get-ips"> </tbody> </table> </div> <!-- /widget-content --> </div> <!-- /widget --> </div><!-- /span --> <div class="span3"> <div class="widget"> <div class="widget-header"> <i class="icon-monitor"></i> <h3>Internet Traffic</h3> <div id="refresh-ispeed"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <p></p> <canvas id="trfChart" width="250" height="200"></canvas> <div> <span class="netin">{% trans "In" %}</span> <span class="netout">{% trans "Out" %}</span> </div> </div> <!-- /widget-content --> </div> <!-- /widget --> </div><!-- /span --> <!-- online users widget (breaks DOM pattern) --> </div> <!-- /row -->
<div class="row"> <div class="span12"> <div class="widget"> <div class="widget-header"> <i class="icon-dashboard"></i> <h3> Processes </h3> <div id="refresh-ps"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <table class="table table-hover table-condensed table-bordered"> <thead> <tr> <th>User</th> <th>Pid</th> <th>%Cpu</th> <th>%Mem</th> <th>Vsz</th> <th>Rss</th> <th>Tty</th> <th>Stat</th> <th>Start</th> <th>Time</th> <th>Command</th> </tr> </thead> <tbody id="get-proc"> </tbody> </table> </div> <!-- /widget-content --> </div> <!-- /widget --> </div> <!-- /span --> </div> <!-- /row --> </div> <!-- /container --> </div> <!-- /main-inner --> </div> <!-- /main -->
<div class="footer"> <div class="footer-inner"> <div class="container"> <div class="row"> <div class="span6">© 2014 by <a href="http://github.com/k3oni">Florian Neagu</a>, template by <a href="http://www.egrappler.com/templatevamp-free-twitter-bootstrap-admin-template/" target="_blank">EGrappler</a> </div> <!-- /span12 --> </div> <!-- /row --> </div> <!-- /container --> </div> <!-- /footer-inner --> </div><!-- /footer -->
{% endblock %}
{% block script %}<script src="{% static "js/jquery.js" %}"></script><script src="{% static "js/bootstrap.js" %}"></script><script src="{% static "js/base.js" %}"></script><script src="{% static "js/Chart.min.js" %}"></script><!--[if lte IE 8]>
<script src="{% static "js/excanvas.js" %}"></script><![endif]--><script type="text/javascript">
function get_os_data(url, element) { $.get(url, function(data) { $(element).text(data); }, "json");}
var dashboard = {};
dashboard.getUptime = function() { get_os_data('/info/uptime/', "#get-uptime"); }dashboard.getDisk = function() { $.getJSON('/info/getdisk/{{ getdisk }}', function(data) { var tr=''; $.each( data, function( index, item){ tr+='<tr><td>'+item[0]+'</td><td>'+item[1]+'</td><td>'+item[2]+'</td><td>'+item[3]+'</td><td>'+item[4]+'</td><td>'+item[5]+'</td></tr>'; }) tr+=''; $("#get-disk").html( tr ); }); }dashboard.getUsers = function() { $.getJSON('/info/getusers/{{ getusers }}', function(data) { var tr=''; $.each( data, function( index, item){ tr+='<tr><td>'+item[0]+'</td><td>'+item[1]+'</td><td>'+item[2]+'</td></tr>'; }) tr+=''; $("#get-users").html( tr ); }); }dashboard.getProc = function() { $.getJSON('/info/proc/', function(data) { var tr=''; $.each( data, function( index, item){ tr+='<tr><td>'+item[0]+'</td><td>'+item[1]+'</td><td>'+item[2]+'</td><td>'+item[3]+'</td><td>'+item[4]+'</td><td>'+item[5]+'</td><td>'+item[6]+'</td><td>'+item[7]+'</td><td>'+item[8]+'</td><td>'+item[9]+'</td><td>'+item[10]+'</td></tr>'; }) tr+=''; $("#get-proc").html( tr ); }); }dashboard.getIps = function() { $.getJSON('/info/getips/{{ getips }}', function(data) { var tr=''; $.each( data, function( index, item){ tr+='<tr><td>'+item[0]+'</td><td>'+item[1]+'</td></tr>'; }) tr+=''; $("#get-ips").html( tr ); }); } var mem_ctx = $("#memoryChart").get(0).getContext("2d"); var memChart = new Chart(mem_ctx); function memory_usage(){ $.getJSON('/info/memory/{{ memusage }}', function(data) { var options = { animation : false, pointDotRadius : 2, scaleLabel : "<%=value%> Mb" } memChart.Line(data, options); }); } var cpu_ctx = $("#cpuuChart").get(0).getContext("2d"); var cpuChart = new Chart(cpu_ctx); function cpuu_usage(){ $.getJSON('/info/cpuusage/{{ cpuusage }}', function(data) { var options = { percentageInnerCutout : 50, segmentStrokeWidth : 0 } cpuChart.Doughnut(data, options); }); }
var trf_ctx = $("#trfChart").get(0).getContext("2d"); var trfChart = new Chart(trf_ctx); function traffic_usage(){ $.getJSON('/info/gettraffic/', function(data) { var options = { animation : false, pointDotRadius : 2, scaleLabel : "<%=value%>" } trfChart.Line(data, options); }); }
var load_ctx = $("#loadChart").get(0).getContext("2d"); var loadChart = new Chart(load_ctx); function load_average(){ $.getJSON('/info/loadaverage/{{ loadaverage }}', function(data) { var options = { animation : false, pointDotRadius : 2, scaleLabel : "<%=value%>" } loadChart.Line(data, options); }); }
$(function() { window.setInterval('memory_usage()', {{ time_refresh }}); window.setInterval('load_average()', {{ time_refresh }}); window.setInterval('cpuu_usage()', {{ time_refresh }}); window.setInterval('traffic_usage()', {{ time_refresh_net }}); window.setInterval('dashboard.getUptime()', {{ time_refresh_long }}); window.setInterval('dashboard.getDisk()', {{ time_refresh_long }}); window.setInterval('dashboard.getUsers()', {{ time_refresh_long }}); window.setInterval('dashboard.getProc()', {{ time_refresh_long }}); });
$(function pageLoad() { memory_usage(); load_average(); cpuu_usage(); traffic_usage(); dashboard.getUptime(); dashboard.getDisk(); dashboard.getUsers(); dashboard.getIps(); dashboard.getProc(); });
</script>{% endblock %}
</body></html>
|
