Improve HTTP 502 page by making more informational

dddd6ab4 · Ash McKenzie · GitLab · 021de384 · dddd6ab4
--- a/public/502.html
+++ b/public/502.html
@@ -2,7 +2,7 @@
 <html>
 <head>
  <meta content="width=device-width, initial-scale=1" name="viewport">
-  <title>GitLab is not responding (502)</title>
+  <title>Waiting for GitLab to boot</title>
  <style>
    body {
      color: #666;
@@ -69,24 +69,35 @@
  <a href="/">
    <img src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE5MiIgdmlld0JveD0iMCAwIDI1IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Im0yNC41MDcgOS41LS4wMzQtLjA5TDIxLjA4Mi41NjJhLjg5Ni44OTYgMCAwIDAtMS42OTQuMDkxbC0yLjI5IDcuMDFINy44MjVMNS41MzUuNjUzYS44OTguODk4IDAgMCAwLTEuNjk0LS4wOUwuNDUxIDkuNDExLjQxNiA5LjVhNi4yOTcgNi4yOTcgMCAwIDAgMi4wOSA3LjI3OGwuMDEyLjAxLjAzLjAyMiA1LjE2IDMuODY3IDIuNTYgMS45MzUgMS41NTQgMS4xNzZhMS4wNTEgMS4wNTEgMCAwIDAgMS4yNjggMGwxLjU1NS0xLjE3NiAyLjU2LTEuOTM1IDUuMTk3LTMuODkuMDE0LS4wMUE2LjI5NyA2LjI5NyAwIDAgMCAyNC41MDcgOS41WiIKICAgICAgICBmaWxsPSIjRTI0MzI5Ii8+CiAgPHBhdGggZD0ibTI0LjUwNyA5LjUtLjAzNC0uMDlhMTEuNDQgMTEuNDQgMCAwIDAtNC41NiAyLjA1MWwtNy40NDcgNS42MzIgNC43NDIgMy41ODQgNS4xOTctMy44OS4wMTQtLjAxQTYuMjk3IDYuMjk3IDAgMCAwIDI0LjUwNyA5LjVaIgogICAgICAgIGZpbGw9IiNGQzZEMjYiLz4KICA8cGF0aCBkPSJtNy43MDcgMjAuNjc3IDIuNTYgMS45MzUgMS41NTUgMS4xNzZhMS4wNTEgMS4wNTEgMCAwIDAgMS4yNjggMGwxLjU1NS0xLjE3NiAyLjU2LTEuOTM1LTQuNzQzLTMuNTg0LTQuNzU1IDMuNTg0WiIKICAgICAgICBmaWxsPSIjRkNBMzI2Ii8+CiAgPHBhdGggZD0iTTUuMDEgMTEuNDYxYTExLjQzIDExLjQzIDAgMCAwLTQuNTYtMi4wNUwuNDE2IDkuNWE2LjI5NyA2LjI5NyAwIDAgMCAyLjA5IDcuMjc4bC4wMTIuMDEuMDMuMDIyIDUuMTYgMy44NjcgNC43NDUtMy41ODQtNy40NDQtNS42MzJaIgogICAgICAgIGZpbGw9IiNGQzZEMjYiLz4KPC9zdmc+Cg==' alt="GitLab"/>
  </a>
-  <h1>
-    502
-  </h1>
+
+  <h1>Waiting for GitLab to boot</h1>
+  <h2>HTTP 502</h2>
+
  <div class="container">
-    <h3>We're sorry. GitLab is taking too much time to respond.</h3>
-    <hr />
-    <p>Try refreshing the page, or going back and attempting the action again.</p>
-    <p>Please contact your GitLab administrator if this problem persists.</p>
+    <p>It can take up to a few minutes for GitLab to boot completely.</p>
+    <p>This page will automatically reload every 5 seconds.</p>
+
    <a href="javascript:history.back()" class="js-go-back go-back">Go back</a>
  </div>
+
+  <hr/>
+
+  <footer>
+    <p>Refreshed at <span id="refreshedAt"></span></p>
+  </footer>
+
  <script>
-    (function () {
-      var goBack = document.querySelector('.js-go-back');
+    const now = new Date();
+    const refreshedAt = now.toLocaleTimeString();
+
+    document.getElementById("refreshedAt").innerText = refreshedAt;

-      if (history.length > 1) {
-        goBack.style.display = 'inline';
-      }
-    })();
+    window.setTimeout(() => location.reload(), 5000);
+
+    if (history.length > 1) {
+      const goBack = document.querySelector('.js-go-back');
+      goBack.style.display = 'inline';
+    }
  </script>
 </body>
 </html>