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.
269 lines
9.2 KiB
269 lines
9.2 KiB
{% 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 %}{% endblock %}</title>
|
|
<link href="{% static "css/fonts.css" %}" rel="stylesheet">
|
|
<link href="{% static "css/font-awesome.css" %}" rel="stylesheet">
|
|
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
|
|
<link href="{% static "css/bootstrap-responsive.min.css" %}" rel="stylesheet">
|
|
<link href="{% static "css/dashboard.css" %}" rel="stylesheet">
|
|
<link href="{% static "css/style.css" %}" rel="stylesheet">
|
|
<link href="{% static "css/progressbar.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</a>
|
|
<ul class="btn-group btn">
|
|
{% if request.user.is_authenticated or user.is_authenticated %}
|
|
<li class="">
|
|
<a href="{% url 'logout' %}">{% trans "Sign out" %}</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="">
|
|
<a href="{% url 'login' %}">{% trans "Sign in" %}</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</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-list-alt"></i><span>Disk</span> </a> </li>
|
|
<li><a href="#refresh-ps"><i class="icon-list-alt"></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-users"><i class="icon-group"></i><span>Users</span> </a> </li>
|
|
<li><a href="#refresh-ispeed"><i class="icon-exchange"></i><span>Network</span> </a> </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="span6">
|
|
<div class="widget widget-table action-table">
|
|
<div class="widget-header"> <i class="icon-info-sign"></i>
|
|
<h3>General Info</h3>
|
|
|
|
<div class="btn btn-mini" onClick="javascript:get_os_info();spin_icon(this);" id="refresh-os">
|
|
<i class="icon-refresh"></i> Refresh
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /widget-header -->
|
|
<div class="widget-content">
|
|
<br>
|
|
<div style="text-align:center;" id="general">
|
|
{% include 'general.html' %}
|
|
</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">
|
|
<div class="widget big-stats-container">
|
|
<div class="widget-content">
|
|
<p></p>
|
|
<canvas id="memoryChart" width="700" height="200"></canvas>
|
|
</div>
|
|
<!-- /widget-content -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="span6">
|
|
<div class="widget">
|
|
<div class="widget-header"> <i class="icon-list"></i>
|
|
<h3>Disk Usage</h3>
|
|
<div id="refresh-df" onClick="javascript:get_df();" class="btn btn-mini">
|
|
<i class="icon-refresh"></i> Refresh
|
|
</div>
|
|
</div>
|
|
<!-- /widget-header -->
|
|
<div class="widget-content" id="getdisk">
|
|
{% include 'disk.html' %}
|
|
</div>
|
|
<!-- /widget-content -->
|
|
</div>
|
|
<!-- /widget -->
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="span6">
|
|
<div class="widget">
|
|
<div class="widget-header"> <i class="icon-list"></i>
|
|
<h3>Software</h3>
|
|
<div id="refresh-whereis" onClick="javascript:get_whereis();" class="btn btn-mini">
|
|
<i class="icon-refresh"></i> Refresh
|
|
</div>
|
|
</div>
|
|
<!-- /widget-header -->
|
|
<div class="widget-content">
|
|
|
|
<table id="whereis_dashboard" 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="icon-monitor"></i>
|
|
<h3>IP</h3>
|
|
<div id="refresh-whereis" onClick="javascript:get_ip();" class="btn btn-mini">
|
|
<i class="icon-refresh"></i> Refresh
|
|
</div>
|
|
</div>
|
|
<!-- /widget-header -->
|
|
<div class="widget-content">
|
|
<table id="ip_dashboard" 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="icon-monitor"></i>
|
|
<h3>Internet Speed</h3>
|
|
<div id="refresh-ispeed" onClick="javascript:get_ispeed();" class="btn btn-mini">
|
|
<i class="icon-refresh"></i> Refresh
|
|
</div>
|
|
</div>
|
|
<!-- /widget-header -->
|
|
<div class="widget-content">
|
|
<div align="center" style="padding:10px;">
|
|
<span class="lead value odometer" style="margin-top:11px;" id="ispeed-rate">0</span>
|
|
<span class="lead">Mbps</span>
|
|
</div>
|
|
</div>
|
|
<!-- /widget-content -->
|
|
</div>
|
|
<!-- /widget -->
|
|
</div><!-- /span -->
|
|
|
|
</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" onClick="javascript:get_ps();" class="btn btn-mini">
|
|
<i class="icon-refresh"></i> Refresh
|
|
</div>
|
|
<div class="pull-right">
|
|
<input type="text" id="filter-ps" class="widget-search" placeholder="search..." />
|
|
</div>
|
|
</div>
|
|
<!-- /widget-header -->
|
|
<div class="widget-content">
|
|
|
|
<table id="ps_dashboard" class="table table-hover table-condensed table-bordered" >
|
|
</table>
|
|
</div>
|
|
<!-- /widget-content -->
|
|
</div>
|
|
<!-- /widget -->
|
|
</div>
|
|
<!-- /span -->
|
|
</div>
|
|
</div>
|
|
<!-- /row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
<script src="{% static "js/jquery.js" %}"></script>
|
|
<script src="{% static "js/base.js" %}"></script>
|
|
<script src="{% static "js/bootstrap.js" %}"></script>
|
|
<script src="{% static "js/jquery.dataTables.min.js" %}"></script>
|
|
<script src="{% static "js/Chart.min.js" %}"></script>
|
|
<script type="text/javascript">
|
|
function refresh() {
|
|
$.ajax({
|
|
url: '{% url "main" %}',
|
|
success: function(data) {
|
|
var dtr = $("#general", data);
|
|
$('#general').html(dtr);
|
|
}
|
|
});
|
|
}
|
|
|
|
$(function(){
|
|
refresh();
|
|
window.setInterval('refresh()', {{ time_refresh }});
|
|
});
|
|
|
|
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 = $("#cpuChart").get(0).getContext("2d");
|
|
var cpuChart = new Chart(cpu_ctx);
|
|
function cpu_usage(){
|
|
var options = {
|
|
animation : false,
|
|
pointDotRadius : 2,
|
|
scaleLabel : "<%=value%> %"
|
|
}
|
|
$.getJSON('/info/cpu/{{ host_id }}', function(data) {
|
|
cpuChart.Line(data, options);
|
|
});
|
|
}
|
|
|
|
$(function() {
|
|
window.setInterval('memory_usage()', {{ time_refresh }});
|
|
});
|
|
|
|
</script>
|
|
{% endblock %}
|
|
|
|
</body>
|
|
</html>
|