public
nobgit
read
NobMail
Based on mailcow: dockerized
Languages
Repository composition by tracked source files.
PHP
49%
JavaScript
35%
HTML
9%
CSS
4%
Shell
2%
Python
1%
Lua
0%
Perl
0%
Ruby
0%
SCSS
0%
Create file
Wiki Documentation
Clone
https://nobgit.com/orgs/nobgit/nobmail.git
ssh://[email protected]:2222/orgs/nobgit/nobmail.git
Commit
add loading animation for container charts
3d82d9af
data/web/js/site/debug.js | 14 ++++++++++++--
data/web/templates/debug.twig | 28 ++++++++++++++++++++--------
2 files changed, 32 insertions(+), 10 deletions(-)Diff
diff --git a/data/web/js/site/debug.js b/data/web/js/site/debug.js
index 1e633673..deb0215e 100644
--- a/data/web/js/site/debug.js
+++ b/data/web/js/site/debug.js
@@ -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];
diff --git a/data/web/templates/debug.twig b/data/web/templates/debug.twig
index 64a3376e..fd917ccf 100644
--- a/data/web/templates/debug.twig
+++ b/data/web/templates/debug.twig
@@ -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>
+ <canvas class="d-none" id="solr-mailcow_DiskIOChart" width="400" height="200"></canvas>
</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>
- <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>
+ <canvas class="d-none" id="{{ container }}_DiskIOChart" width="400" height="200"></canvas>
</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>
- <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"