Dynamically update values

README.md

@@ -193,11 +193,12 @@ v2:
 - [x] Create Live view of SWAP,CPU,Memory usage
 - [x] Adding Chart to interface
 
-v2.1 On going :
+v2.1:
 
 - [x] Add Network usage
 - [x] Add boot time
 - [x] Update dynamically Progress Bar
+- [x] Update dynamically Ressources details
 
 Next:
 

agent.py

@@ -31,6 +31,7 @@ class ENV:
         self.cpu_number = psutil.cpu_count(logical=False)
         self.vcpu = psutil.cpu_count()
         self.mem_max = human_size(psutil.virtual_memory().total)
+        self.boot_time = psutil.boot_time()
 
 class CPU:
     def __init__(self):

app.py

@@ -51,9 +51,34 @@ def get_ressources(nodename):
        json_data = json.dumps(
            {
               "time": datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
-              "cpu": full['cpu']['percent'],
+              "cpu_percent": full['cpu']['percent'],
-              "mem": full['mem']['percent'],
+              "mem_percent": full['mem']['percent'],
-              "swap": full['swap']['percent'],
+              "swap_percent": full['swap']['percent'],
+              "cpu_time_user": full['cpu']['time_user'],
+              "cpu_time_nice": full['cpu']['time_nice'],
+              "cpu_time_system": full['cpu']['time_system'],
+              "cpu_time_idle": full['cpu']['time_idle'],
+              "cpu_time_iowait": full['cpu']['time_iowait'],
+              "cpu_time_irq": full['cpu']['time_irq'],
+              "cpu_time_softirq": full['cpu']['time_softirq'],
+              "cpu_time_steal": full['cpu']['time_steal'],
+              "cpu_time_guest": full['cpu']['time_guest'],
+              "cpu_time_guest_nice": full['cpu']['time_nice'],
+              "mem_total": full['mem']['total'],
+              "mem_available": full['mem']['available'],
+              "mem_used": full['mem']['used'],
+              "mem_free": full['mem']['free'],
+              "mem_active": full['mem']['active'],
+              "mem_inactive": full['mem']['inactive'],
+              "mem_buffers": full['mem']['buffers'],
+              "mem_cached": full['mem']['cached'],
+              "mem_shared": full['mem']['shared'],
+              "mem_slab": full['mem']['slab'],
+              "swap_total": full['swap']['total'],
+              "swap_used": full['swap']['used'],
+              "swap_free": full['swap']['free'],
+              "swap_sin": full['swap']['sin'],
+              "swap_sout": full['swap']['sout'],
            }
        )
        yield f"data:{json_data}\n\n"

templates/index.html

@@ -83,7 +83,7 @@ CPU
 <div class="progress">
 <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">
+<small class="form-text text-muted" id="cpudetail">
 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'] }}
 </small>
 <br>
@@ -91,7 +91,7 @@ MEM
 <div class="progress">
   <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">
+<small class="form-text text-muted" id="memdetail">
 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'] }}
 </small>
 <br>
@@ -99,7 +99,7 @@ SWAP
 <div class="progress">
   <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">
+<small class="form-text text-muted" id="swapdetail">
 total : {{ full['swap']['total'] }} / used : {{ full['swap']['used'] }} / free : {{ full['swap']['free'] }} / sin : {{ full['swap']['sin'] }} / sout : {{ full['swap']['sout'] }}
 </small>
 </div>
@@ -222,20 +222,25 @@ total : {{ full[key]['size_total'] }} / used : {{ full[key]['size_used'] }} / fr
                 config.data.datasets[2].data.shift();
             }
             config.data.labels.push(data.time);
-            config.data.datasets[0].data.push(data.cpu);
+            config.data.datasets[0].data.push(data.cpu_percent);
-            config.data.datasets[1].data.push(data.mem);
+            config.data.datasets[1].data.push(data.mem_percent);
-            config.data.datasets[2].data.push(data.swap);
+            config.data.datasets[2].data.push(data.swap_percent);
             lineChart.update();
-            $("#cpubar").html(data.cpu+"%");
+            $("#cpubar").html(data.cpu_percent+"%");
-            $("#membar").html(data.mem+"%");
+            $("#membar").html(data.mem_percent+"%");
-            $("#swapbar").html(data.swap+"%");
+            $("#swapbar").html(data.swap_percent+"%");
+            $("#cpudetail").html("user : "+data.cpu_time_user+" / nice : "+data.cpu_time_nice+" / system : "+data.cpu_time_system+" / idle : "+data.cpu_time_idle+" / iowait : "+data.cpu_time_iowait+" / irq : "+data.cpu_time_irq+" / softirq : "+data.cpu_time_softirq+" / steal : "+data.cpu_time_steal+" / guest : "+data.cpu_time_guest+" / guest nice : "+data.cpu_time_guest_nice);
+            $("#swapdetail").html("total : "+data.swap_total+" / used : "+data.swap_used+" / free : "+data.swap_free+" / sin : "+data.swap_sin+" / sout : "+data.swap_sout);
+            $("#memdetail").html("total : "+data.mem_total+" / available : "+data.mem_available+" / used : "+data.mem_used+" / free : "+data.mem_free+" / active : "+data.mem_active+" / inactive : "+data.mem_inactive+" / buffers : "+data.mem_buffers+" / cached : "+data.mem_cached+" / shared : "+data.mem_shared+" / slab : "+data.mem_slab);
             var element_cpubar = document.getElementById("cpubar");
             var element_membar = document.getElementById("membar");
             var element_swapbar = document.getElementById("swapbar");
 
-            element_cpubar.style.width = data.cpu+"%"
+            var element_cpudetail = document.getElementById("cpudetail");
-            element_membar.style.width = data.mem+"%"
+
-            element_swapbar.style.width = data.swap+"%"
+            element_cpubar.style.width = data.cpu_percent+"%"
+            element_membar.style.width = data.mem_percent+"%"
+            element_swapbar.style.width = data.swap_percent+"%"
         }
     });