wmantly/vpn-p2p
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

proxmox looks nice

Browse Source
This commit is contained in:
William Mantly 2020-08-27 16:01:49 -04:00
parent 8b28b7a2d6
commit aaa4ba7ccd
Signed by: wmantly
GPG Key ID: 186A8370EFF937CA
3 changed files with 139 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
nodejs/app.js
View File

@ -18,7 +18,11 @@ module.exports = app;
// Build the conf object from the conf files.
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.p2p.subscribe(/./g, function(data, topic){
@ -31,6 +35,7 @@ app.onListen.push(function(){
// console.log('connection io', socket)
socket.on('P2PSub', (msg) => {
msg.data.__noSocket = true;
console.log('connection ondata', msg)
app.p2p.publish(msg.topic, msg.data);
socket.broadcast.emit('P2PSub', msg)

2
nodejs/public/js/app.js
View File

@ -52,7 +52,7 @@ app.io = (function(app){
});
app.subscribe(/./g, function(data, topic){
console.log('local_pubs', data, topic)
// console.log('local_pubs', data, topic)
if(data.__noSocket) return;
// console.log('local_pubs 2', data, topic)

132
nodejs/views/proxmox.ejs
View File

@ -5,6 +5,7 @@
var parseNodeData = function(data){
data.siteId = data.vpnSite.id;
cluster = data.data
cluster.onlineCount = 0;
cluster.cpu = 0
@ -23,7 +24,9 @@
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)
@ -33,7 +36,16 @@
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;
@ -42,26 +54,134 @@
$.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="row">
<div class="shadow-lg card mb-3" jq-repeat="proxmox">
<div class="prox-cards card-columns">
<div class="shadow-lg card" jq-repeat="proxmox" data-siteid='{{vpnSite.id}}'>
<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 class="card-header actionMessage" style="display:none">
</div>
<div class="card-body">
Nodes online {{data.onlineCount}} of {{data.node.length}} <br />
CPU: {{data.cpu}}% of {{data.maxcpu}} cores <br />
Ram: {{data.mem}} of {{data.maxmem}}
<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>