From 5d2205a9bb0e1b72c9ea4aca17b87103add6baad Mon Sep 17 00:00:00 2001
From: Rory Powell <rory.codes@gmail.com>
Date: Thu, 31 Mar 2022 15:58:45 +0100
Subject: [PATCH 1/2] Add static html error page to nginx for 502, 503, 504

---
 hosting/docker-compose.dev.yaml |   1 +
 hosting/nginx.dev.conf.hbs      |   6 ++
 hosting/nginx.prod.conf.hbs     |   8 +-
 hosting/proxy/Dockerfile        |   3 +-
 hosting/proxy/error.html        | 141 ++++++++++++++++++++++++++++++++
 5 files changed, 157 insertions(+), 2 deletions(-)
 create mode 100644 hosting/proxy/error.html

diff --git a/hosting/docker-compose.dev.yaml b/hosting/docker-compose.dev.yaml
index 43b8526e9e..be0bc74a26 100644
--- a/hosting/docker-compose.dev.yaml
+++ b/hosting/docker-compose.dev.yaml
@@ -27,6 +27,7 @@ services:
     image: nginx:latest
     volumes:
       - ./.generated-nginx.dev.conf:/etc/nginx/nginx.conf
+      - ./proxy/error.html:/usr/share/nginx/html/error.html
     ports:
       - "${MAIN_PORT}:10000"
     depends_on:
diff --git a/hosting/nginx.dev.conf.hbs b/hosting/nginx.dev.conf.hbs
index 9fc2345fb2..9398b7e719 100644
--- a/hosting/nginx.dev.conf.hbs
+++ b/hosting/nginx.dev.conf.hbs
@@ -28,6 +28,12 @@ http {
     ignore_invalid_headers off;
     proxy_buffering off;
 
+    error_page 502 503 504 /error.html;
+    location = /error.html {
+      root /usr/share/nginx/html; 
+      internal;
+    }
+
     location /db/ {
       proxy_pass      http://couchdb-service:5984;
       rewrite ^/db/(.*)$ /$1 break;
diff --git a/hosting/nginx.prod.conf.hbs b/hosting/nginx.prod.conf.hbs
index 8560ad0198..ad6ffb42cb 100644
--- a/hosting/nginx.prod.conf.hbs
+++ b/hosting/nginx.prod.conf.hbs
@@ -44,11 +44,17 @@ http {
     proxy_buffering off;
     # port_in_redirect off;
 
+    error_page 502 503 504 /error.html;
+    location = /error.html {
+      root /usr/share/nginx/html; 
+      internal;
+    }
+
     # Security Headers
     add_header X-Frame-Options SAMEORIGIN always;
     add_header X-Content-Type-Options nosniff always;
     add_header X-XSS-Protection "1; mode=block" always;
-    add_header Content-Security-Policy  "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://rsms.me https://maxcdn.bootstrapcdn.com; object-src 'none'; base-uri 'self'; connect-src 'self' https://api-iam.intercom.io https://app.posthog.com wss://nexus-websocket-a.intercom.io ; font-src 'self' data: https://cdn.jsdelivr.net https://fonts.gstatic.com https://rsms.me https://maxcdn.bootstrapcdn.com; frame-src 'self' https:; img-src http: https: data:; manifest-src 'self'; media-src 'self'; worker-src 'none';" always;
+    add_header Content-Security-Policy  "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io https://jspm.dev; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://rsms.me https://maxcdn.bootstrapcdn.com; object-src 'none'; base-uri 'self'; connect-src 'self' https://api-iam.intercom.io https://app.posthog.com wss://nexus-websocket-a.intercom.io ; font-src 'self' data: https://cdn.jsdelivr.net https://fonts.gstatic.com https://rsms.me https://maxcdn.bootstrapcdn.com; frame-src 'self' https:; img-src http: https: data:; manifest-src 'self'; media-src 'self'; worker-src 'none';" always;
 
     # upstreams
     set $apps {{ apps }};
diff --git a/hosting/proxy/Dockerfile b/hosting/proxy/Dockerfile
index b577e3e40f..a2b17d3333 100644
--- a/hosting/proxy/Dockerfile
+++ b/hosting/proxy/Dockerfile
@@ -1,2 +1,3 @@
 FROM nginx:latest
-COPY .generated-nginx.prod.conf /etc/nginx/nginx.conf
\ No newline at end of file
+COPY .generated-nginx.prod.conf /etc/nginx/nginx.conf
+COPY error.html /usr/share/nginx/html/error.html
\ No newline at end of file
diff --git a/hosting/proxy/error.html b/hosting/proxy/error.html
new file mode 100644
index 0000000000..f1c7647e0a
--- /dev/null
+++ b/hosting/proxy/error.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Budibase</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">  
+  </head>
+
+  <script src="https://jspm.dev/@spectrum-web-components/bundle/elements.js" type="module" async></script>
+
+  <script>
+    function goToStatus() {
+      window.location.href = "https://status.budibase.com";
+    }
+    function goHome() {
+      window.location.href = window.location.origin;
+    }
+    function getStatus() {
+      var http = new XMLHttpRequest()
+      var url = window.location.href
+      http.open('GET', url, true)
+      http.send()
+      http.onreadystatechange = (e) => {
+        var status = http.status
+        document.getElementById("status").innerHTML = status
+
+        var message
+        if (status === 502) {
+          message = "Bad gateway. Please try again later."
+        } else if (status === 503) {
+          message = "Service Unavailable. Please try again later."
+        } else if (status === 504) {
+          message = "Gateway timeout. Please try again later."
+        } else {
+          message = "Please try again later."
+        }
+
+        document.getElementById("message").innerHTML = message
+      }
+    }
+
+    getStatus()
+  </script>
+
+  <style>
+    html, body {
+      background-color: #1a1a1a;
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+      color: #e7e7e7;
+    } 
+    .main {
+      height: 100vh;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
+    .info {
+      display: flex;
+      flex-direction: column;
+      align-items: left;
+    }
+
+    @media only screen and (max-width: 600px) {
+      .info {
+        align-items: center;
+      }
+    }
+
+    .status {
+      color: var(--spectrum-global-color-gray-600)
+    }
+    .title {
+      font-weight: 400;
+      color: var(--spectrum-global-color-gray-900)
+    }
+    .message {
+      font-weight: 200;
+      color: var(--spectrum-global-color-gray-800)
+    }
+    .buttons {
+      display: flex;
+      flex-direction: row;
+      margin-top: 15px;
+    }
+    .statusButton {
+      margin-left: 20px;
+      border: none;
+    }
+    .hero {
+      height: 160px;
+      width: 160px;
+      margin-right: 80px;
+    }
+    .content {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+      justify-content: center;
+    }
+
+    @media only screen and (max-width: 600px) {
+      .content {
+        flex-direction: column;
+      }
+    }
+  </style>
+
+  <script src="">
+  </script>
+
+  <body>
+    <sp-theme scale="medium" color="dark">
+      <div class="main">
+        <div class="content">
+          <div class="hero">
+            <img src="https://raw.githubusercontent.com/Budibase/budibase/master/packages/builder/assets/bb-space-man.svg" alt="Budibase Logo">
+          </div>
+          <div class="info">
+            <div>
+              <h4 id="status" class="status"></h4>
+              <h1 class="title">
+                Houston we have a problem!
+              </h1>
+              <h3 id="message" class="message">
+              </h3>
+            </div>
+            <div class="buttons">
+              <sp-button onclick=goHome()>Return home</sp-button> 
+              <sp-button class="statusButton" quiet variant="secondary" onclick=goToStatus()>Check out status</sp-button> 
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </sp-theme>
+  </body>
+
+</html>
\ No newline at end of file

From be16540a8f63465ef27e11e45a805f3188294d6c Mon Sep 17 00:00:00 2001
From: Rory Powell <rory.codes@gmail.com>
Date: Mon, 25 Apr 2022 16:39:44 +0100
Subject: [PATCH 2/2] Replace spectrum with custom CSS

---
 hosting/proxy/error.html | 80 ++++++++++++++++++++++++++++------------
 1 file changed, 57 insertions(+), 23 deletions(-)

diff --git a/hosting/proxy/error.html b/hosting/proxy/error.html
index f1c7647e0a..023c1ebaff 100644
--- a/hosting/proxy/error.html
+++ b/hosting/proxy/error.html
@@ -6,9 +6,14 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">  
   </head>
 
-  <script src="https://jspm.dev/@spectrum-web-components/bundle/elements.js" type="module" async></script>
-
   <script>
+    function checkStatusButton() {
+      if (window.location.href.includes("budibase.app")) {
+        var button = document.getElementById("statusButton")
+        button.removeAttribute("hidden")
+      }
+    }
+
     function goToStatus() {
       window.location.href = "https://status.budibase.com";
     }
@@ -39,17 +44,42 @@
       }
     }
 
-    getStatus()
+    window.onload = function() {
+      checkStatusButton()
+      getStatus()
+    };
+   
   </script>
 
   <style>
+
+    :root {
+      --spectrum-global-color-gray-600: rgb(144,144,144);
+      --spectrum-global-color-gray-900: rgb(255,255,255);
+      --spectrum-global-color-gray-800: rgb(227,227,227);
+      --spectrum-global-color-static-blue-600: rgb(20,115,230);
+      --spectrum-global-color-static-blue-hover: rgb(	18, 103, 207);
+    }
+
     html, body {
       background-color: #1a1a1a;
       padding: 0;
       margin: 0;
       overflow: hidden;
       color: #e7e7e7;
+      font-family: 'Roboto', sans-serif;
     } 
+    button {
+      color: #e7e7e7;
+      font-family: 'Roboto', sans-serif;
+      border: none;
+      font-size: 15px;
+      border-radius: 15px;
+      padding: 8px 22px;
+    }
+    button:hover {
+      cursor: pointer;
+    }
     .main {
       height: 100vh;
       display: flex;
@@ -85,7 +115,14 @@
       flex-direction: row;
       margin-top: 15px;
     }
+    .homeButton {
+      background-color: var(--spectrum-global-color-static-blue-600);
+    }
+    .homeButton:hover {
+      background-color: var(--spectrum-global-color-static-blue-hover);
+    }
     .statusButton {
+      background-color: transparent;
       margin-left: 20px;
       border: none;
     }
@@ -112,30 +149,27 @@
   </script>
 
   <body>
-    <sp-theme scale="medium" color="dark">
-      <div class="main">
-        <div class="content">
-          <div class="hero">
-            <img src="https://raw.githubusercontent.com/Budibase/budibase/master/packages/builder/assets/bb-space-man.svg" alt="Budibase Logo">
+    <div class="main">
+      <div class="content">
+        <div class="hero">
+          <img src="https://raw.githubusercontent.com/Budibase/budibase/master/packages/builder/assets/bb-space-man.svg" alt="Budibase Logo">
+        </div>
+        <div class="info">
+          <div>
+            <h4 id="status" class="status"></h4>
+            <h1 class="title">
+              Houston we have a problem!
+            </h1>
+            <h3 id="message" class="message">
+            </h3>
           </div>
-          <div class="info">
-            <div>
-              <h4 id="status" class="status"></h4>
-              <h1 class="title">
-                Houston we have a problem!
-              </h1>
-              <h3 id="message" class="message">
-              </h3>
-            </div>
-            <div class="buttons">
-              <sp-button onclick=goHome()>Return home</sp-button> 
-              <sp-button class="statusButton" quiet variant="secondary" onclick=goToStatus()>Check out status</sp-button> 
-            </div>
+          <div class="buttons">
+            <button class="homeButton" onclick=goHome()>Return home</button> 
+            <button id="statusButton" class="statusButton" hidden="true" onclick=goToStatus()>Check out status</button> 
           </div>
         </div>
-        
       </div>
-    </sp-theme>
+    </div>
   </body>
 
 </html>
\ No newline at end of file