1
0
mirror of https://github.com/mailcow/mailcow-dockerized.git synced 2024-12-12 10:45:14 +02:00

add loading animation for container charts

This commit is contained in:
FreddleSpl0it 2022-09-27 12:31:02 +02:00
parent 8a0bd23985
commit 3d82d9af1b
2 changed files with 32 additions and 10 deletions

View File

@ -1129,8 +1129,16 @@ function update_container_stats(timeout=5){
console.log(container);
console.log(data);
prev_stats = null;
if (data.length >= 2)
prev_stats = data[data.length -2]
if (data.length >= 2){
prev_stats = data[data.length -2];
// hide spinners if we collected enough data
$('#' + container + "_DiskIOChart").removeClass('d-none');
$('#' + container + "_DiskIOChart").prev().addClass('d-none');
$('#' + container + "_NetIOChart").removeClass('d-none');
$('#' + container + "_NetIOChart").prev().addClass('d-none');
}
data = data[data.length -1];
if (prev_stats != null){
@ -1387,6 +1395,8 @@ function createHostCpuAndMemChart(){
}
// check for mailcow updates
function check_update(current_version, github_repo_url){
if (!current_version || !github_repo_url) return false;
var github_account = github_repo_url.split("/")[3];
var github_repo_name = github_repo_url.split("/")[4];

View File

@ -210,13 +210,19 @@
<span class="d-block">{{ lang.debug.solr_dead }}</span>
{% endif %}
</div>
<div class="mt-4 col-sm-12 col-md-6">
<div class="mt-4 col-sm-12 col-md-6 d-flex flex-column">
<h6>Disk I/O</h6>
<canvas id="solr-mailcow_DiskIOChart" width="400" height="200"></canvas>
<div class="spinner-border my-4 mx-auto" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="mt-4 col-sm-12 col-md-6">
<canvas class="d-none" id="solr-mailcow_DiskIOChart" width="400" height="200"></canvas>
</div>
<div class="mt-4 col-sm-12 col-md-6 d-flex flex-column">
<h6>Net I/O</h6>
<canvas id="solr-mailcow_NetIOChart" width="400" height="200"></canvas>
<div class="spinner-border my-4 mx-auto" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<canvas class="d-none" id="solr-mailcow_NetIOChart" width="400" height="200"></canvas>
</div>
<div class="col-sm-12 d-flex" style="height: 40px">
<a href data-bs-toggle="modal"
@ -273,13 +279,19 @@
</div>
<div class="collapse p-0 list-group-details container-details-collapse" id="{{ container }}Collapse" data-id="{{ container_info.Id }}">
<div class="row p-2 pt-4">
<div class="mt-4 col-sm-12 col-md-6">
<div class="mt-4 col-sm-12 col-md-6 d-flex flex-column">
<h6>Disk I/O</h6>
<canvas id="{{ container }}_DiskIOChart" width="400" height="200"></canvas>
<div class="spinner-border my-4 mx-auto" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="mt-4 col-sm-12 col-md-6">
<canvas class="d-none" id="{{ container }}_DiskIOChart" width="400" height="200"></canvas>
</div>
<div class="mt-4 col-sm-12 col-md-6 d-flex flex-column">
<h6>Net I/O</h6>
<canvas id="{{ container }}_NetIOChart" width="400" height="200"></canvas>
<div class="spinner-border my-4 mx-auto" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<canvas class="d-none" id="{{ container }}_NetIOChart" width="400" height="200"></canvas>
</div>
<div class="col-12 d-flex" style="height: 40px">
<a href data-bs-toggle="modal"