258 lines
9.1 KiB
HTML
258 lines
9.1 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block styles %}
|
|
{{ super() }}
|
|
<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}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
/* Force table to not be like tables anymore */
|
|
#no-more-tables table,
|
|
#no-more-tables thead,
|
|
#no-more-tables tbody,
|
|
#no-more-tables th,
|
|
#no-more-tables td,
|
|
#no-more-tables tr {
|
|
display: block;
|
|
}
|
|
|
|
/* Hide table headers (but not display: none;, for accessibility) */
|
|
#no-more-tables thead tr {
|
|
position: absolute;
|
|
top: -9999px;
|
|
left: -9999px;
|
|
}
|
|
|
|
#no-more-tables tr { border: 1px solid #ccc; }
|
|
|
|
#no-more-tables td {
|
|
/* Behave like a "row" */
|
|
border: none;
|
|
border-bottom: 1px solid #eee;
|
|
position: relative;
|
|
padding-left: 50%;
|
|
white-space: normal;
|
|
text-align:left;
|
|
}
|
|
|
|
#no-more-tables td:before {
|
|
/* Now like a table header */
|
|
position: absolute;
|
|
/* Top/left values mimic padding */
|
|
top: 6px;
|
|
left: 6px;
|
|
width: 45%;
|
|
padding-right: 10px;
|
|
white-space: nowrap;
|
|
text-align:left;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/*
|
|
Label the data
|
|
*/
|
|
#no-more-tables td:before { content: attr(data-title); }
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<script type="text/javascript">
|
|
$('a[data-toggle="tooltip"]').tooltip({
|
|
animated: 'fade',
|
|
placement: 'bottom',
|
|
html: true
|
|
});
|
|
</script>
|
|
|
|
<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();
|
|
|
|
if (window.confirm("Are you sure?")) {
|
|
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", "/vmanager/" + command + "/" + vmid, true);
|
|
// and then we send it off
|
|
request.send();
|
|
alert("command " + command + " executed.");
|
|
window.location.reload();
|
|
}
|
|
});
|
|
}
|
|
}, true);
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block page_content %}
|
|
<div class="row">
|
|
|
|
<div class="col-md-12">
|
|
<div class="panel panel-info" id="deployments">
|
|
<div class="panel-heading">Deployments</div>
|
|
<div class="panel-body"><p>
|
|
<div id="no-more-tables">
|
|
<table class="table table-hover table-striped table-condensed cf">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>CPU</th>
|
|
<th>Mem</th>
|
|
<th>HDD</th>
|
|
<th>IPv4</th>
|
|
<th>Control</th>
|
|
<th></th>
|
|
</tr>
|
|
<tbody>
|
|
{% for deploy in inv_deployments %}
|
|
<tr>
|
|
<td data-title="Name"><a class="rrd" data-toggle="tooltip" title="ID# {{ deploy.machine_id }}<br />Deployment state: {{ status[deploy.machine_id] }}"><b>{% if status[deploy.machine_id] == 'running' %}<font color="green">{% else %}<font color="red">{% endif %}{{ deploy.machine_alias }}</font></b></a></td>
|
|
<td data-title="CPU"><a class="rrd" data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['cpu'] }}' />">{{ deploy.machine_cpu }} Cores</a></td>
|
|
<td data-title="Memory"><a class="rrd" data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['mem'] }}' />">{{ deploy.machine_mem }} MB</a></td>
|
|
<td data-title="Disk"><a class="rrd" data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['hdd'] }}' />">{{ deploy.machine_hdd }} GB</a></td>
|
|
<td data-title="Network">{% for addr in deploy.machine_addresses %}<a class="rrd" data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['net'] }}' />">{{ addr.ip }}</a><br />{% endfor %}</td>
|
|
<td data-title="Control">{% if status[deploy.machine_id] == 'running' %}
|
|
<button class="confirm 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="confirm 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 %}</td>
|
|
<td data-title="Remote">{% if status[deploy.machine_id] == 'running' %}
|
|
<button class="btn btn-default btn-info" onclick="window.open('/vmanager/vmvnc/{{ deploy.machine_id }}', '_blank');"><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Console</button>
|
|
{% endif %}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<button class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Create</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="panel panel-info" id="services">
|
|
<div class="panel-heading">Services</div>
|
|
<div class="panel-body"><p>
|
|
<div id="no-more-tables">
|
|
<table class="table table-hover table-striped table-condensed cf">
|
|
<thead>
|
|
<tr>
|
|
<th>Category</th>
|
|
<th>Description</th>
|
|
<th>Price</th>
|
|
<th>Months</th>
|
|
<th>Last Charged</th>
|
|
</tr>
|
|
<tbody>
|
|
{% for service in inv_services %}
|
|
<tr>
|
|
<td data-title="Category">{{ service.category }}</td>
|
|
<td data-title="Description" >{{ service.description }}</td>
|
|
<td data-title="Price">{{ service.price }}</td>
|
|
<td data-title="Months">{{ service.period }}</td>
|
|
<td data-title="Last Charged">{{ moment(service.date_last_charge).format('lll') }} ({{ moment(service.date_last_charge).fromNow() }})</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<button class="btn btn-default" onclick="window.open('{{ url_for('main.index') }}')"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Order</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="panel panel-info" id="domains">
|
|
<div class="panel-heading">Domains</div>
|
|
<div class="panel-body"><p>
|
|
<div id="no-more-tables">
|
|
<table class="table table-hover table-striped table-condensed cf">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Expiry Date</th>
|
|
<th>Control</th>
|
|
</tr>
|
|
<tbody>
|
|
{% for domain in inv_domains %}
|
|
<tr>
|
|
<td data-title="Domain"><b><a href="http://{{ domain.fqdn }}">{{ domain.fqdn }}</a></b></td>
|
|
<td data-title="Expiry Date">{{ domain.date_expire }}</td>
|
|
<td data-title="Control">soon...</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<button class="btn btn-default" onclick="window.open('{{ url_for('main.index') }}')"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Order</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="panel panel-info" id="addresses">
|
|
<div class="panel-heading">Addresses</div>
|
|
<div class="panel-body"><p>
|
|
<div id="no-more-tables">
|
|
<table class="table table-hover table-striped table-condensed cf">
|
|
<thead>
|
|
<tr>
|
|
<th>IP</th>
|
|
<th>MAC Addr.</th>
|
|
<th>Reverse DNS</th>
|
|
<th>Control</th>
|
|
</tr>
|
|
<tbody>
|
|
{% for address in inv_addresses %}
|
|
<tr>
|
|
<td data-title="IP">{{ address.ip }}</td>
|
|
<td data-title="MAC">{{ address.mac }}</td>
|
|
<td data-title="RDNS">{{ address.rdns }}</td>
|
|
<td data-title="Control">soon...</td>
|
|
{% endfor %}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--<button class="btn btn-default" onclick="window.open('{{ url_for('main.index') }}')"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Assign</button> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|