Dynamically update values

main
pporcheret 2023-07-05 11:26:54 +02:00
parent b5f33685aa
commit 96e92f5805
4 changed files with 48 additions and 16 deletions

View File

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

View File

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

31
app.py
View File

@ -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'],
"mem": full['mem']['percent'],
"swap": full['swap']['percent'],
"cpu_percent": full['cpu']['percent'],
"mem_percent": full['mem']['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"

View File

@ -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[1].data.push(data.mem);
config.data.datasets[2].data.push(data.swap);
config.data.datasets[0].data.push(data.cpu_percent);
config.data.datasets[1].data.push(data.mem_percent);
config.data.datasets[2].data.push(data.swap_percent);
lineChart.update();
$("#cpubar").html(data.cpu+"%");
$("#membar").html(data.mem+"%");
$("#swapbar").html(data.swap+"%");
$("#cpubar").html(data.cpu_percent+"%");
$("#membar").html(data.mem_percent+"%");
$("#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+"%"
element_membar.style.width = data.mem+"%"
element_swapbar.style.width = data.swap+"%"
var element_cpudetail = document.getElementById("cpudetail");
element_cpubar.style.width = data.cpu_percent+"%"
element_membar.style.width = data.mem_percent+"%"
element_swapbar.style.width = data.swap_percent+"%"
}
});