proxmox looks nice

nodejs/app.js

@@ -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)
 

nodejs/public/js/app.js

@@ -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)
 

nodejs/views/proxmox.ejs

@@ -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="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 class="card-header actionMessage" style="display:none">
 		</div>
 		<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>
+						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>