Dynamically progress bar update

templates/index.html

@@ -32,7 +32,7 @@
                   Nodes
                 </a>
                 <ul class="dropdown-menu">
-<li><a class="dropdown-item" href="/">127.0.0.1</a></li>
+<li><a class="dropdown-item" href="/">localhost</a></li>
 <li><hr class="dropdown-divider"></li>
 {% for nav_item in client %}
 <li><a class="dropdown-item" href="/n/{{ nav_item }}">{{ nav_item }}</a></li>
@@ -58,18 +58,19 @@ Environnement
 <br> vCPU : {{ full['vcpu'] }}
 <br> Memory : {{ full['mem_max']}}
 <br> Node : {{ node }}
+<br> Up since : {{ boottime }}
 </div></div>
 </div>
 
 <div class="col-8">
-<div class="card">
+	<div class="card">
-<div class="card-header">
+		<div class="card-header">
-Monitor
+			Monitor
-</div>
+		</div>
-<div class="card-body">
+		<div class="card-body">
-<canvas id="canvas"></canvas>
+			<canvas id="canvas"></canvas>
-<br>
+		</div>
-</div>
+	</div>
 </div>
 </div>
 <br>
@@ -80,7 +81,7 @@ Monitor
 <div class="card-body">
 CPU
 <div class="progress">
-<div class="progress-bar progress-bar-striped" role="progressbar" style="width: {{ full['cpu']['percent'] }}%;" aria-valuenow={{ full['cpu']['percent'] }} aria-valuemin="0" aria-valuemax="100">{{ full['cpu']['percent'] }}%</div>
+<div id="cpubar" class="progress-bar progress-bar-striped" role="progressbar" style="width: {{ full['cpu']['percent'] }}%;" aria-valuenow={{ full['cpu']['percent'] }} aria-valuemin="0" aria-valuemax="100">{{ full['cpu']['percent'] }}%</div>
 </div>
 <small class="form-text text-muted">
 user : {{ full['cpu']['time_user'] }} / nice : {{ full['cpu']['time_nice'] }} / system : {{ full['cpu']['time_system'] }} / idle : {{ full['cpu']['time_idle'] }} / iowait : {{ full['cpu']['time_iowait'] }} / irq : {{ full['cpu']['time_irq'] }} / softirq : {{ full['cpu']['time_softirq'] }} / steal : {{ full['cpu']['time_steal'] }} / guest : {{ full['cpu']['time_guest'] }} / guest nice : {{ full['cpu']['time_guest_nice'] }}
@@ -88,7 +89,7 @@ user : {{ full['cpu']['time_user'] }} / nice : {{ full['cpu']['time_nice'] }} /
 <br>
 MEM
 <div class="progress">
-  <div class="progress-bar bg-warning progress-bar-striped" role="progressbar" style="width: {{ full['mem']['percent'] }}%;" aria-valuenow={{ full['mem']['percent'] }} aria-valuemin="0" aria-valuemax="100">{{ full['mem']['percent'] }}%</div>
+  <div id="membar" class="progress-bar bg-warning progress-bar-striped" role="progressbar" style="width: {{ full['mem']['percent'] }}%;" aria-valuenow={{ full['mem']['percent'] }} aria-valuemin="0" aria-valuemax="100">{{ full['mem']['percent'] }}%</div>
 </div>
 <small class="form-text text-muted">
 total : {{ full['mem']['total'] }} / available : {{ full['mem']['available'] }} / used : {{ full['mem']['used'] }} / free : {{ full['mem']['free'] }} / active : {{ full['mem']['active'] }} / inactive : {{ full['mem']['inactive'] }} / buffers : {{ full['mem']['buffers'] }} / cached : {{ full['mem']['cached'] }} / shared : {{ full['mem']['shared'] }} / slab : {{ full['mem']['slab'] }}
@@ -96,14 +97,13 @@ total : {{ full['mem']['total'] }} / available : {{ full['mem']['available'] }}
 <br>
 SWAP
 <div class="progress">
-  <div class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: {{ full['swap']['percent'] }}%;" aria-valuenow={{ full['swap']['percent'] }} aria-valuemin="0" aria-valuemax="100">{{ full['swap']['percent'] }}%</div>
+  <div id="swapbar" class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: {{ full['swap']['percent'] }}%;" aria-valuenow={{ full['swap']['percent'] }} aria-valuemin="0" aria-valuemax="100">{{ full['swap']['percent'] }}%</div>
 </div>
 <small class="form-text text-muted">
 total : {{ full['swap']['total'] }} / used : {{ full['swap']['used'] }} / free : {{ full['swap']['free'] }} / sin : {{ full['swap']['sin'] }} / sout : {{ full['swap']['sout'] }}
 </small>
 </div>
 </div>
-</div>
 <br>
 
 <div class="card">
@@ -226,8 +226,20 @@ total : {{ full[key]['size_total'] }} / used : {{ full[key]['size_used'] }} / fr
             config.data.datasets[1].data.push(data.mem);
             config.data.datasets[2].data.push(data.swap);
             lineChart.update();
+            $("#cpubar").html(data.cpu+"%");
+            $("#membar").html(data.mem+"%");
+            $("#swapbar").html(data.swap+"%");
+            var element_cpubar = document.getElementById("cpubar");
+            var element_membar = document.getElementById("membar");
+            var element_swapbar = document.getElementById("swapbar");
+
+            element_cpubar.style.width = data.cpu+"%"
+            element_membar.style.width = data.mem+"%"
+            element_swapbar.style.width = data.swap+"%"
         }
     });
+
+
 </script>
 
 </body>