Merge pull request #683 from Quentin-M/whoops-404

Add 404 page
2015-10-30 14:30:20 -04:00 · 2015-10-30 14:30:20 -04:00 · 3f35265858
commit 3f35265858
parent 4724e2fd7c adb744089e
6 changed files with 136 additions and 101 deletions
--- a/conf/server-base.conf
+++ b/conf/server-base.conf
@ -76,7 +76,8 @@ location /c1/ {

 location /static/ {
    # checks for static file, if not found proxy to app
-    alias /static/;
+    alias      /static/;
+    error_page 404 /404;
 }

 location /v1/_ping {
--- a/endpoints/web.py
+++ b/endpoints/web.py
@ -58,6 +58,10 @@ def index(path, **kwargs):
 def internal_error_display():
  return render_page_template('500.html')

+@web.errorhandler(404)
+@web.route('/404', methods=['GET'])
+def not_found_error_display(e = None):
+  return render_page_template('404.html')

@web.route('/organization/<path:path>', methods=['GET'])
@no_cache
--- a/static/js/app.js
+++ b/static/js/app.js
@ -226,6 +226,11 @@ quayApp.run(['$location', '$rootScope', 'Restangular', 'UserService', 'PlanServi
      return false;
    }

+    if (response.status == 404) {
+      document.location = '/404';
+      return false;
+    }
+
    return true;
  });

--- a/templates/404.html
+++ b/templates/404.html
@ -0,0 +1,12 @@
+{% extends "error.html" %}
+
+{% block title %}
+  <title>Quay.io - Page Not Found!</title>
+{% endblock %}
+
+{% block content %}
+  <h3>The page doesn't exist !</h3>
+  <h4>
+    This is somewhat embarrassing, isn’t it ? It looks like nothing was found at this location. Please return to the <a href="/">main page</a>.
+  </h4>
+{% endblock %}
--- a/templates/500.html
+++ b/templates/500.html
@ -1,104 +1,25 @@
-<html>
+{% extends "error.html" %}
+
+{% block title %}
  <title>Quay.io - Something went wrong!</title>
-  <head>
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css">
-    <link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
-    <style type="text/css">
-      .ship-header {
-        width: 100%;
-        height: 400px;
-        position: relative;
-      }
+{% endblock %}

-      .ship-header div.layer {
-        position: absolute;
-        top: 0px;
-        bottom: 0px;
-        left: 0px;
-        right: 0px;
-      }
+{% block content %}
+  <h3>Something went wrong on our end!</h3>
+  <h4>
+    We're currently working to fix the problem, but if its persists please feel free to <a href="/contact">contact us</a>. In the meantime, try a refreshing drink (or just refreshing).
+  </h4>

-      .ship-header .background {
-        background-size: cover;
-        background-image: url(/static/img/500/background.svg);
-      }
+  <div style="margin-top: 20px">
+    Current Service Status:
+    <span id="status-elem">(Loading)</span>
+  </div>

-      .ship-header .ship {
-        background-size: cover;
-        background-image: url(/static/img/500/ship.svg);
-        position: absolute;
-        top: 0px;
-        bottom: 0px;
-        right: 0px;
-        width: 19%;
-      }
-
-      .ship-header .water {
-        background-size: cover;
-        background-image: url(/static/img/500/water.svg);
-      }
-
-      @-webkit-keyframes steaming {
-        0% {
-          -webkit-transform: translateX(0px) scaleX(1);
-        }
-        50% {
-          -webkit-transform: translateX(-180%) scaleX(1);
-        }
-        51% {
-          -webkit-transform: translateX(-180%) scaleX(-1);
-        }
-        99% {
-          -webkit-transform: translateX(0px) scaleX(-1);
-        }
-        100% {
-          -webkit-transform: translateX(0px) scaleX(1);
-        }
-      }
-
-      .ship-header .ship {
-        -webkit-animation-name: steaming;
-        -webkit-animation-duration: 30s;
-        -webkit-animation-iteration-count: infinite;
-        -webkit-animation-timing-function: linear;
-      }
-
-      .information {
-         padding: 30px;
-         text-align: center;
-      }
-
-      .information h3 {
-         margin-bottom: 20px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="header" class="ship-header">
-      <div class="background layer"></div>
-      <div id="ship" class="ship"></div>
-      <div class="water layer"></div>
-    </div>
-    <div class="information">
-      <img src="/static/img/quay-logo.png">
-      <h3>Something went wrong on our end!</h3>
-      <h4>
-        We're currently working to fix the problem, but if its persists please feel free to <a href="/contact">contact us</a>. In the meantime, try a refreshing drink (or just refreshing).
-      </h4>
-
-      <div style="margin-top: 20px">
-        Current Service Status:
-        <span id="status-elem">(Loading)</span>
-      </div>
-
-      <script type="text/javascript" src="//statuspage-production.s3.amazonaws.com/se.js"></script>
-      <script type="text/javascript">
-        window.fetchStatusPage({
-          pageId: '8szqd6w4s277',
-          renderTo: '#status-elem'
-        });
-      </script>
-    </div>
-  </body>
-</html>
+  <script type="text/javascript" src="//statuspage-production.s3.amazonaws.com/se.js"></script>
+  <script type="text/javascript">
+    window.fetchStatusPage({
+      pageId: '8szqd6w4s277',
+      renderTo: '#status-elem'
+    });
+  </script>
+{% endblock %}
--- a/templates/error.html
+++ b/templates/error.html
@ -0,0 +1,92 @@
+<html>
+  <head>
+    {% block title %}
+
+    {% endblock %}
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css">
+    <link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
+    <style type="text/css">
+      .ship-header {
+        width: 100%;
+        height: 400px;
+        position: relative;
+      }
+
+      .ship-header div.layer {
+        position: absolute;
+        top: 0px;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
+      }
+
+      .ship-header .background {
+        background-size: cover;
+        background-image: url(/static/img/500/background.svg);
+      }
+
+      .ship-header .ship {
+        background-size: cover;
+        background-image: url(/static/img/500/ship.svg);
+        position: absolute;
+        top: 0px;
+        bottom: 0px;
+        right: 0px;
+        width: 19%;
+      }
+
+      .ship-header .water {
+        background-size: cover;
+        background-image: url(/static/img/500/water.svg);
+      }
+
+      @-webkit-keyframes steaming {
+        0% {
+          -webkit-transform: translateX(0px) scaleX(1);
+        }
+        50% {
+          -webkit-transform: translateX(-180%) scaleX(1);
+        }
+        51% {
+          -webkit-transform: translateX(-180%) scaleX(-1);
+        }
+        99% {
+          -webkit-transform: translateX(0px) scaleX(-1);
+        }
+        100% {
+          -webkit-transform: translateX(0px) scaleX(1);
+        }
+      }
+
+      .ship-header .ship {
+        -webkit-animation-name: steaming;
+        -webkit-animation-duration: 30s;
+        -webkit-animation-iteration-count: infinite;
+        -webkit-animation-timing-function: linear;
+      }
+
+      .information {
+         padding: 30px;
+         text-align: center;
+      }
+
+      .information h3 {
+         margin-bottom: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="header" class="ship-header">
+      <div class="background layer"></div>
+      <div id="ship" class="ship"></div>
+      <div class="water layer"></div>
+    </div>
+    <div class="information">
+      <img src="/static/img/quay-logo.png">
+      {% block content %}
+
+      {% endblock %}
+    </div>
+  </body>
+</html>