From 3d82d9af1bd2d15a16c6a923a1cc9eb6cccd9400 Mon Sep 17 00:00:00 2001
From: FreddleSpl0it <patschul@posteo.de>
Date: Tue, 27 Sep 2022 12:31:02 +0200
Subject: [PATCH] add loading animation for container charts

---
 data/web/js/site/debug.js     | 14 ++++++++++++--
 data/web/templates/debug.twig | 28 ++++++++++++++++++++--------
 2 files changed, 32 insertions(+), 10 deletions(-)

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"