189 lines
6.2 KiB
HTML
189 lines
6.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>
|
||
|
|
||
|
|
||
|
<style type="text/css">
|
||
|
.tg {border-collapse:collapse;border-spacing:0;}
|
||
|
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:1px 1px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
|
||
|
.tg th{font-family:Arial, sans-serif;font-size:14px;padding:1px 1px;font-weight:normal;padding:border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
|
||
|
.tg .tg-yw4l{vertical-align:top}
|
||
|
</style>
|
||
|
|
||
|
|
||
|
<div class="container-fluid">
|
||
|
<br />
|
||
|
<div class="row">
|
||
|
|
||
|
{% block sidebar %}
|
||
|
{% include "uinvoice/_sidebar.html" %}
|
||
|
{% endblock %}
|
||
|
|
||
|
<div class="col-md-4">
|
||
|
<div class="panel panel-default" id="contracts">
|
||
|
<div class="panel-heading">Services</div>
|
||
|
<div class="panel-body"><p>
|
||
|
{% for contract in inv_contracts %}
|
||
|
{{ contract.description }}<br />
|
||
|
{{ contract.units }}<br />
|
||
|
{% if not contract.discount == 0 %}
|
||
|
Discount %{{ contract.discount }}<br />
|
||
|
Credit: {{ contract.credit }}<br /><br />
|
||
|
{% endif %}
|
||
|
{% endfor %}
|
||
|
<p>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="col-md-4">
|
||
|
<div class="panel panel-default" id="contracts">
|
||
|
<div class="panel-heading">Domains</div>
|
||
|
<div class="panel-body"><p>
|
||
|
{% for domain in inv_domains %}
|
||
|
{{ fqdn }}<br />
|
||
|
{% endfor %}
|
||
|
<p>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
<div class="col-md-8">
|
||
|
<div class="panel-group">
|
||
|
<div class="panel panel-default" id="deploys">
|
||
|
<div class="panel-heading">Deployments</div>
|
||
|
<div class="panel-body"><p>
|
||
|
{% for deploy in inv_deployments %}
|
||
|
<ul class="nav nav-pills">
|
||
|
<li class="active"><a data-toggle="pill" href="#home{{ deploy.machine_id }}">{{ deploy.machine_alias }}</a></li>
|
||
|
<li><a data-toggle="pill" href="#control{{ deploy.machine_id }}">Control</a></li>
|
||
|
<li><a data-toggle="pill" href="#stats{{ deploy.machine_id }}">Stats</a></li>
|
||
|
<li><a data-toggle="pill" href="#keys{{ deploy.machine_id }}">Keys</a></li>
|
||
|
</ul>
|
||
|
<div class="tab-content">
|
||
|
<div id="home{{ deploy.machine_id}}" class="tab-pane fade in active">
|
||
|
<br />
|
||
|
</div>
|
||
|
|
||
|
<div id="control{{ deploy.machine_id}}" class="tab-pane fade">
|
||
|
<br />
|
||
|
{% if status[deploy.machine_id] == 'running' %}
|
||
|
<button class="btn btn-default btn-info" onclick="window.open('/vmvnc/{{ deploy.machine_id }}', '_blank');"><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Console</button>
|
||
|
<button class="command command-vmshutdown btn btn-default btn-warning" value="vmshutdown" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Shutdown</button>
|
||
|
<button class="command command-vmstop btn btn-default btn-danger" value="vmstop" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> Force Stop</button>
|
||
|
{% else %}
|
||
|
<button class="command command-vmstart btn btn-default btn-success" value="vmstart" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Start</button>
|
||
|
{% endif %}
|
||
|
<br /><br />
|
||
|
Grid ID# {{ deploy.machine_id }}<br >
|
||
|
CPU: {{ deploy.machine_cpu }} cores</br >
|
||
|
Memory: {{ deploy.machine_mem }} MB</br >
|
||
|
Disk Space: {{ deploy.machine_hdd }} GB</br >
|
||
|
<br />
|
||
|
Expiry date: {{ deploy.date_expire }}</br >
|
||
|
Credit: {{ deploy.credit }}
|
||
|
</div>
|
||
|
|
||
|
<div id="stats{{ deploy.machine_id}}" class="tab-pane fade">
|
||
|
<table class="tg">
|
||
|
<tr>
|
||
|
<th class="tg-yw4l">Network Bandwidth</th>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td class="tg-yw4l"><img src="data:image/png;base64,{{ rrd[deploy.machine_id]['net'] }}" class="img-responsive"><br></td>
|
||
|
</tr>
|
||
|
</table>
|
||
|
|
||
|
|
||
|
<table class="tg">
|
||
|
<tr>
|
||
|
<th class="tg-yw4l">CPU Load</th>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td class="tg-yw4l"><img src="data:image/png;base64,{{ rrd[deploy.machine_id]['cpu'] }}" class="img-responsive"><br></td>
|
||
|
</tr>
|
||
|
</table>
|
||
|
|
||
|
<table class="tg">
|
||
|
<tr>
|
||
|
<th class="tg-yw4l">Memory Usage</th>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td class="tg-yw4l"><img src="data:image/png;base64,{{ rrd[deploy.machine_id]['mem'] }}" class="img-responsive"><br></td>
|
||
|
</tr>
|
||
|
</table>
|
||
|
|
||
|
<table class="tg">
|
||
|
<tr>
|
||
|
<th class="tg-yw4l">Disk Input/Output</th>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td class="tg-yw4l"><img src="data:image/png;base64,{{ rrd[deploy.machine_id]['hdd'] }}" class="img-responsive"><br></td>
|
||
|
</tr>
|
||
|
</table>
|
||
|
</div>
|
||
|
|
||
|
<div id="keys{{ deploy.machine_id}}" class="tab-pane fade">
|
||
|
Not yet implemented.
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
<br />
|
||
|
{% endfor %}
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
|
||
|
<div class="row">
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
{% endblock %}
|
||
|
|
||
|
|