162 lines
7.2 KiB
HTML
162 lines
7.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block page_content %}
|
|
|
|
<script>
|
|
// Only run what comes next *after* the page has loaded
|
|
addEventListener("DOMContentLoaded", function() {
|
|
// Grab all of the elements with a class of command
|
|
// (which all of the buttons we just created have)
|
|
var commandButtons = document.querySelectorAll(".command");
|
|
for (var i=0, l=commandButtons.length; i<l; i++) {
|
|
var button = commandButtons[i];
|
|
// For each button, listen for the "click" event
|
|
button.addEventListener("click", function(e) {
|
|
// When a click happens, stop the button
|
|
// from submitting our form (if we have one)
|
|
e.preventDefault();
|
|
|
|
var clickedButton = e.target;
|
|
var command = clickedButton.value;
|
|
var vmid = clickedButton.getAttribute('vmid');
|
|
|
|
// Now we need to send the data to our server
|
|
// without reloading the page - this is the domain of
|
|
// AJAX (Asynchronous JavaScript And XML)
|
|
// We will create a new request object
|
|
// and set up a handler for the response
|
|
var request = new XMLHttpRequest();
|
|
request.onload = function() {
|
|
// We could do more interesting things with the response
|
|
// or, we could ignore it entirely
|
|
//alert(request.responseText);
|
|
};
|
|
// We point the request at the appropriate command
|
|
request.open("GET", "/" + command + "/" + vmid, true);
|
|
// and then we send it off
|
|
request.send();
|
|
});
|
|
}
|
|
}, true);
|
|
|
|
</script>
|
|
|
|
|
|
<div class="container-fluid">
|
|
<br />
|
|
<div class="row">
|
|
|
|
<div class="col-md">
|
|
<div class="panel-group">
|
|
{% for key, value in current_user.inventory.items() %}
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">{{ value['hostname'] }} ({{ key }})</div>
|
|
<div class="panel-body"><p>
|
|
<button class="btn btn-default btn-info" onclick="window.open('/vnc/{{ value['vmid'] }}','popUpWindow','height=768,width=1280,left=2,top=2,,scrollbars=no,menubar=no'); return false;"><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Console</button>
|
|
<button class="command command-vmstart btn btn-default btn-success" value="vmstart" vmid="{{ value['vmid'] }}"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Start</button>
|
|
<button class="command command-vmshutdown btn btn-default btn-warning" value="vmshutdown" vmid="{{ value['vmid'] }}"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Shutdown</button>
|
|
<button class="command command-vmstop btn btn-default btn-danger" value="vmstop" vmid="{{ value['vmid'] }}"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> Force Stop</button>
|
|
</p>
|
|
|
|
<table>
|
|
<p>
|
|
<tr>
|
|
<td><img width=540 src="data:image/png;base64,{{ rrd[value['vmid']]['net'] }}"></td>
|
|
<td><img width=540 src="data:image/png;base64,{{ rrd[value['vmid']]['cpu'] }}"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Network</th>
|
|
<th>CPU</th>
|
|
</tr>
|
|
</p>
|
|
</table>
|
|
|
|
<table>
|
|
<p>
|
|
<tr>
|
|
<td><img width=540 src="data:image/png;base64,{{ rrd[value['vmid']]['mem'] }}"></td>
|
|
<td><img width=540 src="data:image/png;base64,{{ rrd[value['vmid']]['hdd'] }}"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Memory</th>
|
|
<th>Hard Disk</th>
|
|
</tr>
|
|
</p>
|
|
</table>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<i class="fa fa-bell fa-fw"></i> Notifications Panel
|
|
</div>
|
|
<!-- /.panel-heading -->
|
|
<div class="panel-body">
|
|
<div class="list-group">
|
|
<a href="#" class="list-group-item">
|
|
<i class="fa fa-comment fa-fw"></i> New Comment
|
|
<span class="pull-right text-muted small"><em>4 minutes ago</em>
|
|
</span>
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
|
|
<span class="pull-right text-muted small"><em>12 minutes ago</em>
|
|
</span>
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<i class="fa fa-envelope fa-fw"></i> Message Sent
|
|
<span class="pull-right text-muted small"><em>27 minutes ago</em>
|
|
</span>
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<i class="fa fa-tasks fa-fw"></i> New Task
|
|
<span class="pull-right text-muted small"><em>43 minutes ago</em>
|
|
</span>
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<i class="fa fa-upload fa-fw"></i> Server Rebooted
|
|
<span class="pull-right text-muted small"><em>11:32 AM</em>
|
|
</span>
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<i class="fa fa-bolt fa-fw"></i> Server Crashed!
|
|
<span class="pull-right text-muted small"><em>11:13 AM</em>
|
|
</span>
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<i class="fa fa-warning fa-fw"></i> Server Not Responding
|
|
<span class="pull-right text-muted small"><em>10:57 AM</em>
|
|
</span>
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<i class="fa fa-shopping-cart fa-fw"></i> New Order Placed
|
|
<span class="pull-right text-muted small"><em>9:49 AM</em>
|
|
</span>
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<i class="fa fa-money fa-fw"></i> Payment Received
|
|
<span class="pull-right text-muted small"><em>Yesterday</em>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<!-- /.list-group -->
|
|
<a href="#" class="btn btn-default btn-block">View All Alerts</a>
|
|
</div>
|
|
<!-- /.panel-body -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|