Better haproxy 503 page

fabianofranz · fabianofranz · commit a7faf10f82df · 2017-01-17T17:54:03.000-02:00
diff --git a/images/router/haproxy/conf/error-page-503.http b/images/router/haproxy/conf/error-page-503.http
@@ -7,6 +7,7 @@ Content-Type: text/html
 <html>
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
   <style type="text/css">
   /*!
    * Bootstrap v3.3.5 (http://getbootstrap.com)
@@ -23,15 +24,11 @@ Content-Type: text/html
     margin: 0;
   }
   h1 {
-    font-size: 1.9em;
+    font-size: 1.7em;
     font-weight: 400;
     line-height: 1.3;
     margin: 0.68em 0;
   }
-  @media (min-width: 768px) { 
-    h1 {
-      font-size: 2.15em;}
-  }
   * {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -52,25 +49,92 @@ Content-Type: text/html
     font-size: 13px;
     color: #333333;
     background-color: #ffffff;
-    margin: 4em 3em;
+    margin: 2em 1em;
   }
   p {
     margin: 0 0 10px;
     font-size: 13px;
-    font-weight: 300;
-    line-height: 1.4;
   }
+  .alert.alert-info {
+    padding: 15px;
+    margin-bottom: 20px;
+    border: 1px solid transparent;
+    background-color: #f5f5f5;
+    border-color: #8b8d8f;
+    color: #363636;
+    margin-top: 30px;
+  }
+  .alert p {
+    padding-left: 35px;
+  }
+  a {
+    color: #0088ce;
+  }
+
+  ul {
+    position: relative;
+    padding-left: 51px;
+  }
+  p.info {
+    position: relative;
+    font-size: 15px;
+    margin-bottom: 10px;
+  }
+  p.info:before, p.info:after {
+    content: "";
+    position: absolute;
+    top: 9%;
+    left: 0;
+  }
+  p.info:before {
+    content: "i";
+    left: 3px;
+    width: 20px;
+    height: 20px;
+    font-family: serif;
+    font-size: 15px;
+    font-weight: bold;
+    line-height: 21px;
+    text-align: center;
+    color: #fff;
+    background: #4d5258;
+    border-radius: 16px;
+  }
+
   @media (min-width: 768px) {
-    p {
-      font-size: 14px;
+    body {
+      margin: 4em 3em;
     }
+    h1 {
+      font-size: 2.15em;}
   }
+
   </style>
   </head>
   <body>
     <div>
       <h1>Application is not available</h1>
       <p>The application is currently not serving requests at this endpoint. It may not have been started or is still starting.</p>
+
+      <div class="alert alert-info">
+        <p class="info">
+          Possible reasons you are seeing this page:
+        </p>
+        <ul>
+          <li>
+            <strong>The host doesn't exist.</strong>
+            Make sure the hostname was typed correctly and that a route matching this hostname exists.
+          </li>
+          <li>
+            <strong>The host exists, but doesn't have a matching path.</strong>
+            Check if the URL path was typed correctly and that the route was created using the desired path.
+          </li>
+          <li>
+            <strong>Route and path matches, but all pods are down.</strong>
+            Make sure that the resources exposed by this route (pods, services, deployment configs, etc) have at least one pod running.
+          </li>
+        </ul>
+      </div>
     </div>
   </body>
 </html>
