Merge pull request #31 from nsg/loading-screen

Loading screen
nsg · May 23, 2023 · 6fb982e · 6fb982e
2 parents 5478f3e + de13235
commit 6fb982e
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 29 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 /*.snap
+/src/etc/5xx.html
 __pycache__
 *.bkp
diff --git a/src/etc/5xx.http b/src/etc/5xx.http
@@ -11,7 +11,7 @@ Content-Type: text/html
         <style>
             body {
                 background-color: #070707;
-                color: #ebe9e9;
+                color: #e4e2e2;
                 font-family: Verdana, Geneva, Tahoma, sans-serif
             }
 
@@ -25,16 +25,51 @@ Content-Type: text/html
                 color: rgb(158, 158, 196);
             }
 
-            .backend-status {
-                background-color: #2c2c2c;
+            h1 {
+                color: #cecece;
+                border-bottom: 1px solid #9e9e9e;
             }
-            
+
             .backend-status > div {
-                padding: 0.4em;
+                margin-bottom: 0.4em;
+                padding: 1em;
+                border-radius: 0.8em;
+                background-color: #2c2c2c;
+            }
+
+            .backend-status > div.fail {
+                background: repeating-linear-gradient(
+                    45deg,
+                    rgba(255, 0, 0, 0.4),
+                    rgba(255, 0, 0, 0.4) 10px,
+                    rgba(255, 0, 0, 0.35) 10px,
+                    rgba(255, 0, 0, 0.35) 20px
+                );
             }
 
-            .backend-status > div > span {
-                float: right;
+            .backend-status > div.okay {
+                background: repeating-linear-gradient(
+                    45deg,
+                    rgba(0, 255, 0, 0.4),
+                    rgba(0, 255, 0, 0.4) 10px,
+                    rgba(0, 255, 0, 0.35) 10px,
+                    rgba(0, 255, 0, 0.35) 20px
+                );
+            }
+
+            .backend-status > div.unset::before {
+                content: '⏳';
+                margin-right: 0.4em;
+            }
+
+            .backend-status > div.okay::before {
+                content: '✅';
+                margin-right: 0.4em;
+            }
+
+            .backend-status > div.fail::before {
+                content: '⛔';
+                margin-right: 0.4em;
             }
 
             footer {
@@ -48,41 +83,32 @@ Content-Type: text/html
             <h1>Immich loading ...</h1>
 
             <div class="backend-status">
-                <div id="backend-be_server">
+                <div id="backend-be_server" class="unset">
                     Immich Server
-                    <span></span>
                 </div>
-                <div id="backend-be_web">
+                <div id="backend-be_web" class="unset">
                     Immich Web
-                    <span></span>
                 </div>
-                <div id="backend-be_microservices">
+                <div id="backend-be_microservices" class="unset">
                     Microservices
-                    <span></span>
                 </div>
-                <div id="backend-be_ml">
+                <div id="backend-be_ml" class="unset">
                     Machine Learning
-                    <span></span>
                 </div>
-                <div id="backend-be_typesense">
+                <div id="backend-be_typesense" class="unset">
                     Typesense (Search Database)
-                    <span></span>
                 </div>
-                <div id="backend-be_postgres">
+                <div id="backend-be_postgres" class="unset">
                     Postgres (Relational Database)
-                    <span></span>
                 </div>
-                <div id="backend-be_redis">
+                <div id="backend-be_redis" class="unset">
                     Redis (In-memory key-value database)
-                    <span></span>
                 </div>
-                <div id="backend-acme">
+                <div id="backend-acme" class="unset">
                     ACME Challenge (Used by Let's Encrypt to issue a TLS certificate)
-                    <span></span>
                 </div>
-                <div id="backend-stats">
+                <div id="backend-stats" class="unset">
                     HAProxy Stats
-                    <span></span>
                 </div>
             </div>
 
@@ -95,7 +121,7 @@ Content-Type: text/html
 
         <script>
             function do_request() {
-                const request = new Request("/haproxy/;csv")
+                const request = new Request("http://127.0.0.1/haproxy/;csv")
                 fetch(request).then((response) => {
                     if (response.status === 200) {
                         return response.text()
@@ -107,9 +133,9 @@ Content-Type: text/html
                         ld = line.split(",")
                         if (ld[1] == "BACKEND") {
                             if (ld[17] == "UP") {
-                                document.querySelector("#backend-"+ld[0]+" span").innerHTML = '✅';
+                                document.querySelector("#backend-"+ld[0]).className = "okay"
                             } else {
-                                document.querySelector("#backend-"+ld[0]+" span").innerHTML = '⛔';
+                                document.querySelector("#backend-"+ld[0]).className = "fail"
                                 down_backends = down_backends + 1
                             }
                         }
@@ -120,9 +146,12 @@ Content-Type: text/html
                     if (down_backends < 1) {
                         location.reload();
                     }
+
+                    setTimeout(do_request, 1000)
+                }).catch(error => {
+                    setTimeout(do_request, 10000)
                 })
 
-                setTimeout(do_request, 2000)
             }
 
             setTimeout(do_request, 500)