227 lines
6.5 KiB
Plaintext
227 lines
6.5 KiB
Plaintext
<%- include('top') %>
|
|
<script type="text/javascript">
|
|
|
|
function formatBytes(a,b=2){if(0===a)return"0 Bytes";const c=0>b?0:b,d=Math.floor(Math.log(a)/Math.log(1024));return parseFloat((a/Math.pow(1024,d)).toFixed(c))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][d]}
|
|
|
|
|
|
var parseNodeData = function(data){
|
|
data.siteId = data.vpnSite.id;
|
|
cluster = data.data
|
|
cluster.onlineCount = 0;
|
|
cluster.cpu = 0
|
|
cluster.maxcpu = 0
|
|
cluster.maxmem = 0
|
|
cluster.mem = 0
|
|
|
|
|
|
for(let node of data.data.node){
|
|
// console.log('parse', node)
|
|
if(node.status === "offline") continue;
|
|
cluster.onlineCount++
|
|
cluster.cpu += node.cpu
|
|
cluster.maxcpu += node.maxcpu
|
|
cluster.maxmem += node.maxmem
|
|
cluster.mem += node.mem
|
|
}
|
|
|
|
cluster.nodePercent = Math.ceil((cluster.onlineCount*100)/data.data.node.length)
|
|
cluster.cpu = parseFloat(((cluster.cpu/cluster.onlineCount)*100).toFixed(2));
|
|
cluster.memPercent = Math.ceil((cluster.mem*100)/cluster.maxmem)
|
|
cluster.maxmem = formatBytes(cluster.maxmem)
|
|
cluster.mem = formatBytes(cluster.mem)
|
|
|
|
|
|
$.extend(data.data, cluster);
|
|
|
|
return data;
|
|
}
|
|
|
|
|
|
$(document).ready(function(){
|
|
$.scope.proxmox.__put = function(obj){
|
|
console.log(obj)
|
|
if(obj.openTab){
|
|
$(obj.openTab).tab('show');
|
|
}
|
|
this.show()
|
|
};
|
|
$
|
|
app.subscribe('proxmox-cluster', function(data){
|
|
if($.scope.proxmox.indexOf('siteId', data.vpnSite.id,) == -1){
|
|
data.siteId = data.vpnSite.id;
|
|
let index = $.scope.proxmox.push(parseNodeData(data));
|
|
}else{
|
|
$.scope.proxmox.update('siteId', data.vpnSite.id, parseNodeData(data));
|
|
}
|
|
});
|
|
|
|
$(document).ready(function(){
|
|
$('div.prox-cards').on('click', 'a[data-toggle="tab"]', function(e){
|
|
e.preventDefault();
|
|
var id = $(this).closest('div[data-siteid]').data('siteid');
|
|
var scopeId = $.scope.proxmox.indexOf('siteId', id+'');
|
|
var tab = '#'+$(this).attr('id');
|
|
$.scope.proxmox[scopeId].openTab = tab;
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<style type="text/css">
|
|
.card-columns {
|
|
column-count: 2;
|
|
@include media-breakpoint-only(lg) {
|
|
}
|
|
</style>
|
|
|
|
<div class="prox-cards card-columns">
|
|
<div class="shadow-lg card" jq-repeat="proxmox" data-siteid='{{vpnSite.id}}'>
|
|
<div class="card-header" >
|
|
<h3>
|
|
{{ vpnSite.name }}
|
|
<small class="text-muted">{{vpnSite.admin}}</small>
|
|
</h3>
|
|
|
|
<ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nodes-tab-{{vpnSite.id}}" data-toggle="tab" href="#nodes-{{vpnSite.id}}" role="tab" aria-controls="home" aria-selected="true">
|
|
Nodes
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="lxc-tab-{{vpnSite.id}}" data-toggle="tab" href="#lxc-{{vpnSite.id}}" role="tab" aria-controls="profile" aria-selected="false">
|
|
LXC
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="kvm-tab-{{vpnSite.id}}" data-toggle="tab" href="#kvm-{{vpnSite.id}}" role="tab" aria-controls="contact" aria-selected="false">
|
|
KVM
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="storage-tab-{{vpnSite.id}}" data-toggle="tab" href="#storage-{{vpnSite.id}}" role="tab" aria-controls="contact" aria-selected="false">
|
|
Storage
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-header actionMessage" style="display:none">
|
|
</div>
|
|
<div class="card-body">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
Nodes
|
|
</td>
|
|
<td>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: {{data.nodePercent}}%;" aria-valuenow="{{data.nodePercent}}" aria-valuemin="0" aria-valuemax="100">{{data.nodePercent}}%</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{{data.node.length}}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
CPU
|
|
</td>
|
|
<td width="70%">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: {{data.cpu}}%;" aria-valuenow="{{data.cpu}}" aria-valuemin="0" aria-valuemax="100">{{data.cpu}}%</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{{data.maxcpu}} Threads
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
RAM
|
|
</td>
|
|
<td>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: {{data.memPercent}}%;" aria-valuenow="{{data.memPercent}}" aria-valuemin="0" aria-valuemax="100">{{data.mem}} - {{data.memPercent}}%</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
of {{data.maxmem}}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<hr />
|
|
<div class="tab-content" id="myTabContent">
|
|
|
|
<div class="tab-pane fade show active" id="nodes-{{vpnSite.id}}" role="tabpanel" aria-labelledby="home-tab">
|
|
<ul>
|
|
{{#data.node}}
|
|
<li>{{node}} -- {{status}}</li>
|
|
{{/data.node}}
|
|
</ul>
|
|
</div>
|
|
<div class="tab-pane fade" id="lxc-{{vpnSite.id}}" role="tabpanel" aria-labelledby="profile-tab">
|
|
<ul>
|
|
{{#data.lxc}}
|
|
<li>{{name}} -- {{status}}</li>
|
|
{{/data.lxc}}
|
|
</ul>
|
|
</div>
|
|
<div class="tab-pane fade" id="kvm-{{vpnSite.id}}" role="tabpanel" aria-labelledby="contact-tab">
|
|
<ul>
|
|
{{#data.qemu}}
|
|
<li>{{name}} -- {{status}}</li>
|
|
{{/data.qemu}}
|
|
</ul>
|
|
</div>
|
|
<div class="tab-pane fade" id="storage-{{vpnSite.id}}" role="tabpanel" aria-labelledby="contact-tab">
|
|
<ul>
|
|
{{#data.storage}}
|
|
<li>{{id}} -- {{status}}</li>
|
|
{{/data.storage}}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- <div id="email_card" class="card-deck">
|
|
<div class="shadow-lg card mb-3">
|
|
<div class="card-header">
|
|
Validate Email
|
|
</div>
|
|
<div class="card-header actionMessage" style="display:none">
|
|
</div>
|
|
<div class="card-body">
|
|
<p>
|
|
Invited By: <b></b>,.
|
|
</p>
|
|
<p>
|
|
Please enter a valid email address. A link will be sent to
|
|
the supplied address to complete the registration process.
|
|
</p>
|
|
<p>
|
|
The supplied email will also be used as the linked email for
|
|
the new user.
|
|
</p>
|
|
<form action="auth/invite/" onsubmit="formAJAX(this)" evalAJAX="emailSent()">
|
|
<div class="form-group">
|
|
<label class="control-label">Email</label>
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text" ><i class="fad fa-at"></i></span>
|
|
</div>
|
|
<input type="email" name="mail" class="form-control" placeholder="jsmith@gmail.com" validate="email:3" />
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-outline-dark"><i class="fad fa-paper-plane"></i> Send It!</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<%- include('bottom') %>
|