pporcheret
/
Pymonit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dynamically progress bar update

main
pporcheret 2023-07-04 17:51:24 +02:00
parent 1b0cdb1f44
commit 538319ac71
1 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
templates/index.html
View File

@ -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,6 +58,7 @@ Environnement
<br> vCPU : {{ full['vcpu'] }}
<br> Memory : {{ full['mem_max']}}
<br> Node : {{ node }}
<br> Up since : {{ boottime }}
</div></div>
</div>
@ -68,7 +69,7 @@ Monitor
</div>
<div class="card-body">
<canvas id="canvas"></canvas>
<br>
</div>
</div>
</div>
</div>
@ -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>