|
|
{% load i18n %}{% load staticfiles %}<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="icon" href="{% static "img/favicon.ico" %}"> <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 %}
<script> /* Get pydash relative url that will be used to find the endpoints of the server. This is necessary because a user can change the url prefix of pydash in urls.py. */ window.pydashUrls = {{ pydashUrls | safe }}; </script></head><body><!-- Had a hard time pressing the logout button :(
<a href="https://github.com/k3oni/pydash"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:99999999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>--><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="fa fa-dashboard"></i><span>General</span> </a> </li> <li><a href="#refresh-df"><i class="fa fa-hdd-o"></i><span>Disk</span> </a> </li> <li><a href="#refresh-cpu"><i class="fa fa-check"></i><span>CPU</span> </a> </li> <li><a href="#refresh-ram"><i class="fa fa-list-alt"></i><span>RAM</span> </a> </li> <li><a href="#refresh-load"><i class="fa fa-bolt"></i><span>Load</span> </a> </li> <li><a href="#refresh-online"><i class="fa fa-user"></i><span>Users</span> </a> </li> <li><a href="#refresh-netstat"><i class="fa fa-angle-down"></i><span>Netstat</span> </a> </li> <li><a href="#refresh-ispeed"><i class="fa fa-exchange"></i><span>Network</span> </a> </li> <li><a href="#refresh-ps"><i class="fa fa-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="fa fa-dashboard"></i> <h3>General Info</h3><i class="fa fa-minus"></i> <div id="refresh-os"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <br> <div style="text-align:center;"> <b>OS:</b> <span class="" id="get-osname"></span><br> <b>Uptime:</b> <span class="" id="get-uptime"></span> Hours<br> <b>Hostname:</b> <span class="" id="get-hostname"></span><br> <b>Kernel:</b> <span class="" id="get-kernel"></span><br> <b>CPU(s):</b> <span class="" id="get-cpucount"></span> x <span class="" id="get-cputype"></span> <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="fa fa-check"></i> <h3>CPU Usage %</h3><i class="fa fa-minus"></i> <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="fa fa-list-alt"></i> <h3>Memory Usage</h3><i class="fa fa-minus"></i> <div id="refresh-ram"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <p></p> <canvas id="memoryChart" width="560" height="200"></canvas> <div> <span class="memf">{% trans "Free" %}</span> <span class="memu">{% trans "Used" %}</span> <span class="memb">{% trans "Buffers" %}</span> <span class="memc">{% trans "Cached" %}</span> </div> </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="fa fa-hdd-o"></i> <h3>Disk Usage</h3><i class="fa fa-minus"></i> <div id="refresh-df"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <table id="get_disk" class="table table-hover table-condensed table-bordered" > </table> </div> <!-- /widget-content --> </div> <!-- /widget --> </div> <div class="span6"> <div class="widget widget-table action-table"> <div class="widget-header"> <i class="fa fa-bolt"></i> <h3>Load Average</h3><i class="fa fa-minus"></i> <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="fa fa-level-up"></i> <h3>IP Adresses</h3><i class="fa fa-minus"></i> <div id="refresh-ip"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <table id="get_ips" class="table table-hover table-condensed table-bordered"> </table> </div> <!-- /widget-content --> </div> <!-- /widget --> </div> <!-- /span -->
<div class="span3"> <div class="widget"> <div class="widget-header"> <i class="fa fa-exchange"></i> <h3>Internet Traffic</h3><i class="fa fa-minus"></i> <div id="refresh-ispeed"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <p></p> <canvas id="trfChart" width="270" height="200"></canvas> <div> <span class="netin">{% trans "In" %}</span> <span class="netout">{% trans "Out" %}</span> </div> </div>
<!-- /widget-content --> </div> <!-- /widget --> </div><!-- /span -->
<div class="span3"> <div class="widget"> <div class="widget-header"> <i class="fa fa-angle-up"></i> <h3>Disk Reads/Writes</h3><i class="fa fa-minus"></i> <div id="refresh-diskio"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <p></p> <canvas id="dskChart" width="270" height="200"></canvas> <div> <span class="diskr">{% trans "Reads" %}</span> <span class="diskw">{% trans "Writes" %}</span> </div> </div> <!-- /widget-content --> </div> <!-- /widget --> </div> <!-- /span --> </div> <!-- /row -->
<div class="row"> <div class="span6"> <div class="widget widget-table action-table"> <div class="widget-header"> <i class="fa fa-group"></i> <h3>Online</h3><i class="fa fa-minus"></i> <div id="refresh-online"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <table id="get_users" class="table table-hover table-condensed table-bordered"> </table> </div> <!-- /widget-content --> </div> <!-- /widget --> </div> <!-- /span --> <div class="span6"> <div class="widget widget-table action-table"> <div class="widget-header"> <i class="fa fa-angle-down"></i> <h3>Netstat</h3><i class="fa fa-minus"></i> <div id="refresh-netstat"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <table id="get_netstat" class="table table-hover table-condensed table-bordered"> </table> </div> <!-- /widget-content --> </div> <!-- /widget --> </div> <!-- /span --> </div> <!-- /row -->
<div class="row"> <div class="span12"> <div class="widget"> <div class="widget-header"> <i class="fa fa-list-alt"></i> <h3> Processes </h3><i class="fa fa-minus"></i> <div id="refresh-ps"> </div> </div> <!-- /widget-header --> <div class="widget-content"> <table id="get_proc" class="table table-hover table-condensed table-bordered"> </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> </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><script src="{% static "js/jquery.dataTables.min.js" %}"></script><script src="{% static "js/dashboard.js" %}"></script><!--[if lte IE 8]>
<script src="{% static "js/excanvas.js" %}"></script><![endif]--><script type="text/javascript">
var mem_ctx = $("#memoryChart").get(0).getContext("2d"); var memChart = new Chart(mem_ctx); function memory_usage(){ $.getJSON(pydashUrls['memusage'], function(data) { var options = { animation : false, pointDotRadius : 4, 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(pydashUrls['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(pydashUrls['gettraffic'], function(data) { var options = { animation : false, pointDotRadius : 2, scaleLabel : "<%=value%>" } trfChart.Line(data, options); }); }
var dsk_ctx = $("#dskChart").get(0).getContext("2d"); var dskChart = new Chart(dsk_ctx); function disk_io(){ $.getJSON(pydashUrls['getdiskio'], function(data) { var options = { animation : false, pointDotRadius : 2, scaleLabel : "<%=value%>" } dskChart.Line(data, options); }); }
var load_ctx = $("#loadChart").get(0).getContext("2d"); var loadChart = new Chart(load_ctx); function load_average(){ $.getJSON(pydashUrls['getdiskio'], function(data) { var options = { animation : false, pointDotRadius : 2, scaleLabel : "<%=value%>" } loadChart.Line(data, options); }); }
$(function() { window.setInterval('dashboard.getProc()', {{ time_refresh_long }}); 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('disk_io()', {{ 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.getNetstat()', {{ time_refresh_long }}); });
$(function pageLoad() { dashboard.getProc(); memory_usage(); load_average(); cpuu_usage(); traffic_usage(); disk_io(); dashboard.getOSname(); dashboard.getUptime(); dashboard.getHostname(); dashboard.getKernel(); dashboard.getCPUcount(); dashboard.getCPUtype(); dashboard.getDisk(); dashboard.getUsers(); dashboard.getNetstat(); dashboard.getIps(); });</script>
{% endblock %}
</body></html>
|
