proxmox looks nice
This commit is contained in:
parent
8b28b7a2d6
commit
aaa4ba7ccd
GPG Key ID:
186A8370EFF937CA
@ -18,7 +18,11 @@ module.exports = app;
|
|||||||
// Build the conf object from the conf files.
|
// Build the conf object from the conf files.
|
||||||
app.conf = require('./conf/conf');
|
app.conf = require('./conf/conf');
|
||||||
|
|
||||||
app.p2p = new P2PSub(app.conf.p2p);
|
app.p2p = new P2PSub({...app.conf.p2p, preBroadcast: function(data){
|
||||||
|
let thisData = {...data}
|
||||||
|
delete thisData.__noSocket;
|
||||||
|
return thisData;
|
||||||
|
}});
|
||||||
|
|
||||||
app.onListen.push(function(){
|
app.onListen.push(function(){
|
||||||
app.p2p.subscribe(/./g, function(data, topic){
|
app.p2p.subscribe(/./g, function(data, topic){
|
||||||
@ -31,6 +35,7 @@ app.onListen.push(function(){
|
|||||||
// console.log('connection io', socket)
|
// console.log('connection io', socket)
|
||||||
socket.on('P2PSub', (msg) => {
|
socket.on('P2PSub', (msg) => {
|
||||||
msg.data.__noSocket = true;
|
msg.data.__noSocket = true;
|
||||||
|
console.log('connection ondata', msg)
|
||||||
app.p2p.publish(msg.topic, msg.data);
|
app.p2p.publish(msg.topic, msg.data);
|
||||||
socket.broadcast.emit('P2PSub', msg)
|
socket.broadcast.emit('P2PSub', msg)
|
||||||
|
|
||||||
|
|||||||
@ -52,7 +52,7 @@ app.io = (function(app){
|
|||||||
});
|
});
|
||||||
|
|
||||||
app.subscribe(/./g, function(data, topic){
|
app.subscribe(/./g, function(data, topic){
|
||||||
console.log('local_pubs', data, topic)
|
// console.log('local_pubs', data, topic)
|
||||||
if(data.__noSocket) return;
|
if(data.__noSocket) return;
|
||||||
// console.log('local_pubs 2', data, topic)
|
// console.log('local_pubs 2', data, topic)
|
||||||
|
|
||||||
|
|||||||
@ -5,6 +5,7 @@
|
|||||||
|
|
||||||
|
|
||||||
var parseNodeData = function(data){
|
var parseNodeData = function(data){
|
||||||
|
data.siteId = data.vpnSite.id;
|
||||||
cluster = data.data
|
cluster = data.data
|
||||||
cluster.onlineCount = 0;
|
cluster.onlineCount = 0;
|
||||||
cluster.cpu = 0
|
cluster.cpu = 0
|
||||||
@ -23,7 +24,9 @@
|
|||||||
cluster.mem += node.mem
|
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.cpu = parseFloat(((cluster.cpu/cluster.onlineCount)*100).toFixed(2));
|
||||||
|
cluster.memPercent = Math.ceil((cluster.mem*100)/cluster.maxmem)
|
||||||
cluster.maxmem = formatBytes(cluster.maxmem)
|
cluster.maxmem = formatBytes(cluster.maxmem)
|
||||||
cluster.mem = formatBytes(cluster.mem)
|
cluster.mem = formatBytes(cluster.mem)
|
||||||
|
|
||||||
@ -33,7 +36,16 @@
|
|||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
$(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){
|
app.subscribe('proxmox-cluster', function(data){
|
||||||
if($.scope.proxmox.indexOf('siteId', data.vpnSite.id,) == -1){
|
if($.scope.proxmox.indexOf('siteId', data.vpnSite.id,) == -1){
|
||||||
data.siteId = data.vpnSite.id;
|
data.siteId = data.vpnSite.id;
|
||||||
@ -42,25 +54,133 @@
|
|||||||
$.scope.proxmox.update('siteId', data.vpnSite.id, parseNodeData(data));
|
$.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>
|
</script>
|
||||||
|
<style type="text/css">
|
||||||
|
.card-columns {
|
||||||
|
column-count: 2;
|
||||||
|
@include media-breakpoint-only(lg) {
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class="row">
|
<div class="prox-cards card-columns">
|
||||||
<div class="shadow-lg card mb-3" jq-repeat="proxmox">
|
<div class="shadow-lg card" jq-repeat="proxmox" data-siteid='{{vpnSite.id}}'>
|
||||||
<div class="card-header">
|
<div class="card-header" >
|
||||||
<b>{{ vpnSite.name }}</b> -- <i>{{vpnSite.admin}}</i>
|
<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>
|
||||||
<div class="card-header actionMessage" style="display:none">
|
<div class="card-header actionMessage" style="display:none">
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
Nodes online {{data.onlineCount}} of {{data.node.length}} <br />
|
<table>
|
||||||
CPU: {{data.cpu}}% of {{data.maxcpu}} cores <br />
|
<tr>
|
||||||
Ram: {{data.mem}} of {{data.maxmem}}
|
<td>
|
||||||
<ul>
|
Nodes
|
||||||
{{#data.lxc}}
|
</td>
|
||||||
<li>{{name}} -- {{status}}</li>
|
<td>
|
||||||
{{/data.lxc}}
|
<div class="progress">
|
||||||
</ul>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user