Simplify 404 page (#17501)

Currently, for some reason, the 404 page renders an animation of a bunch of circles. This is complicated to render and doesn't seem necessary. Instead, we should just show basic html/css. Closes #10549
apache · Aug 13, 2021 · 2092988 · 2092988
1 parent 7b4ce7b
commit 2092988
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 152 deletions.
diff --git a/airflow/www/extensions/init_views.py b/airflow/www/extensions/init_views.py
@@ -144,7 +144,7 @@ def init_error_handlers(app: Flask):
     from airflow.www import views
 
     app.register_error_handler(500, views.show_traceback)
-    app.register_error_handler(404, views.circles)
+    app.register_error_handler(404, views.not_found)
 
 
 def set_cors_headers_on_response(response):
@@ -177,7 +177,7 @@ def _handle_api_error(ex):
             # here on the application level
             return common_error_handler(ex)
         else:
-            return views.circles(ex)
+            return views.not_found(ex)
 
     spec_dir = path.join(ROOT_APP_DIR, 'api_connexion', 'openapi')
     connexion_app = connexion.App(__name__, specification_dir=spec_dir, skip_error_handlers=True)

diff --git a/airflow/www/static/js/circles.js b/airflow/www/static/js/circles.js
diff --git a/airflow/www/templates/airflow/circles.html → airflow/www/templates/airflow/not_found.html b/airflow/www/templates/airflow/circles.html → airflow/www/templates/airflow/not_found.html
@@ -19,21 +19,17 @@
 
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <title>Airflow 404 = lots of circles</title>
-  <link rel="icon" type="image/png" href="{{ url_for('static', filename='pin_32.png') }}">
-</head>
-
-<body>
-    <div style="font-family: verdana;">
-        <h1>Airflow 404 = lots of circles</h1>
-        <p>{{ hostname }}</p>
-    </div>
-    <div id="div_svg"
-         class="centered text-center"
-         style="border: 1px solid #ccc;padding:0;margin:0;">
-        <svg id="circles-svg"></svg>
+  <head>
+    <title>Airflow 404</title>
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='pin_32.png') }}">
+  </head>
+  <body>
+    <div style="font-family: verdana; text-align: center; margin-top: 200px;">
+      <img src="{{ url_for('static', filename='pin_100.png') }}" width="50px" alt="pin-logo" />
+      <h1>Airflow 404</h1>
+      <p>Page cannot be found.</p>
+      <a href="/">Return to the main page</a>
+      <p>{{ hostname }}</p>
     </div>
-    <script src="{{ url_for_asset('circles.js') }}"></script>
-</body>
+  </body>
 </html>
diff --git a/airflow/www/views.py b/airflow/www/views.py
@@ -410,11 +410,11 @@ def get_downstream(task):
 ######################################################################################
 
 
-def circles(error):
-    """Show Circles on screen for any error in the Webserver"""
+def not_found(error):
+    """Show Not Found on screen for any error in the Webserver"""
     return (
         render_template(
-            'airflow/circles.html',
+            'airflow/not_found.html',
             hostname=socket.getfqdn()
             if conf.getboolean('webserver', 'EXPOSE_HOSTNAME', fallback=True)
             else 'redact',

diff --git a/airflow/www/webpack.config.js b/airflow/www/webpack.config.js
@@ -57,7 +57,6 @@ const config = {
     tiLog: `${JS_DIR}/ti_log.js`,
     tree: [`${CSS_DIR}/tree.css`, `${JS_DIR}/tree.js`],
     calendar: [`${CSS_DIR}/calendar.css`, `${JS_DIR}/calendar.js`],
-    circles: `${JS_DIR}/circles.js`,
     durationChart: `${JS_DIR}/duration_chart.js`,
     trigger: `${JS_DIR}/trigger.js`,
     variableEdit: `${JS_DIR}/variable_edit.js`,