Gnous/mailcow
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

add loading animation for container charts

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
data/web/js/site/debug.js
View File

@ -1129,8 +1129,16 @@ function update_container_stats(timeout=5){
console.log(container); console.log(container);
console.log(data); console.log(data);
prev_stats = null; prev_stats = null;
if (data.length >= 2) if (data.length >= 2){
prev_stats = data[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]; data = data[data.length -1];
if (prev_stats != null){ if (prev_stats != null){
@ -1387,6 +1395,8 @@ function createHostCpuAndMemChart(){
} }
// check for mailcow updates // check for mailcow updates
function check_update(current_version, github_repo_url){ 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_account = github_repo_url.split("/")[3];
var github_repo_name = github_repo_url.split("/")[4]; var github_repo_name = github_repo_url.split("/")[4];

28
data/web/templates/debug.twig
View File

@ -210,13 +210,19 @@
<span class="d-block">{{ lang.debug.solr_dead }}</span> <span class="d-block">{{ lang.debug.solr_dead }}</span>
{% endif %} {% endif %}
</div> </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> <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>
<canvas class="d-none" id="solr-mailcow_DiskIOChart" width="400" height="200"></canvas>
</div> </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>Net I/O</h6> <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>
<div class="col-sm-12 d-flex" style="height: 40px"> <div class="col-sm-12 d-flex" style="height: 40px">
<a href data-bs-toggle="modal" <a href data-bs-toggle="modal"
@ -273,13 +279,19 @@
</div> </div>
<div class="collapse p-0 list-group-details container-details-collapse" id="{{ container }}Collapse" data-id="{{ container_info.Id }}"> <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="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> <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>
<canvas class="d-none" id="{{ container }}_DiskIOChart" width="400" height="200"></canvas>
</div> </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>Net I/O</h6> <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>
<div class="col-12 d-flex" style="height: 40px"> <div class="col-12 d-flex" style="height: 40px">
<a href data-bs-toggle="modal" <a href data-bs-toggle="modal"