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.
440 lines
15 KiB
440 lines
15 KiB
{% 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>
|