Use custom swagger-ui HTML template, copy assets from npm module

2 months ago · e17a3953be
7 changed files with 75 additions and 2 deletions
--- a/.gitignore
+++ b/.gitignore
@ -23,5 +23,8 @@ tildes/static/js/tildes.js
 # don't track site icon files
 tildes/static/images/site-icons/*.png

+# don't track the Swagger UI dist files copied into static dir
+tildes/static/swagger-ui/
+
 # NodeJS dependencies
 tildes/node_modules/
--- a/ansible/playbook.yml
+++ b/ansible/playbook.yml
@ -38,6 +38,8 @@
    - redis_module_cell
    - postgresql_redis_bridge
    - boussole
+    - nodejs
+    - swagger_ui
    - webassets
    - scripts
    - prometheus_node_exporter
@ -54,7 +56,6 @@
  roles:
    - prometheus
    - java
-    - nodejs
    - development

 - hosts: prod
--- a/ansible/roles/swagger_ui/meta/main.yml
+++ b/ansible/roles/swagger_ui/meta/main.yml
@ -0,0 +1,3 @@
+---
+dependencies:
+  - role: nodejs
--- a/ansible/roles/swagger_ui/tasks/main.yml
+++ b/ansible/roles/swagger_ui/tasks/main.yml
@ -0,0 +1,8 @@
+---
+- name: Copy swagger-ui web assets from node package
+  copy:
+    src: "{{ app_dir }}/node_modules/swagger-ui/dist/"
+    dest: "{{ app_dir }}/static/swagger-ui/"
+    owner: "{{ app_username }}"
+    group: "{{ app_username }}"
+    mode: 0644
--- a/tildes/prospector.yaml
+++ b/tildes/prospector.yaml
@ -5,6 +5,7 @@ max-line-length: 88

 ignore-paths:
  - alembic
+  - static/swagger-ui

 pep8:
  disable:
--- a/tildes/static/swagger-ui-tildes/index.html
+++ b/tildes/static/swagger-ui-tildes/index.html
@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Swagger UI</title>
+    <link rel="stylesheet" type="text/css" href="/swagger-ui/swagger-ui.css" />
+    <style>
+      html
+      {
+        box-sizing: border-box;
+        overflow: -moz-scrollbars-vertical;
+        overflow-y: scroll;
+      }
+      *,
+      *:before,
+      *:after
+      {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin:0;
+        background: #fafafa;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="swagger-ui"></div>
+    <script src="/swagger-ui/swagger-ui-bundle.js" charset="UTF-8"> </script>
+    <script src="/swagger-ui/swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
+    <script${nonce_attr}>
+        window.onload = function() {
+            const uiConfig = ${ui_config};
+            Object.assign(uiConfig, {
+                presets: [
+                    SwaggerUIBundle.presets.apis,
+                    SwaggerUIStandalonePreset,
+                ],
+                plugins: [
+                    SwaggerUIBundle.plugins.DownloadUrl,
+                ],
+            });
+            const oauthConfig = ${oauth_config};
+            // Build a system
+            const ui = SwaggerUIBundle(uiConfig);
+            if (oauthConfig) {
+                ui.initOAuth(oauthConfig);
+            }
+            window.ui = ui;
+        }
+    </script>
+  </body>
+</html>
--- a/tildes/tildes/routes.py
+++ b/tildes/tildes/routes.py
@ -17,6 +17,7 @@ from tildes.resources.user import user_by_username


 OPENAPI_YAML_FILE = "/opt/tildes/openapi_beta.yaml"
+SWAGGER_UI_HTML_FILE = "/opt/tildes/static/swagger-ui-tildes/index.html"


 def includeme(config: Configurator) -> None:
@ -134,7 +135,9 @@ def includeme(config: Configurator) -> None:
    # Routes for the JSON API
    # We also provide a path for the full spec and the built-in swagger UI explorer
    config.pyramid_openapi3_spec(OPENAPI_YAML_FILE, route="/api/beta/openapi.yaml")
-    config.pyramid_openapi3_add_explorer(route="/api/beta/ui")
+    config.pyramid_openapi3_add_explorer(
+        route="/api/beta/ui", template=SWAGGER_UI_HTML_FILE
+    )

    with config.route_prefix_context("/api/beta"):
        config.add_route("apibeta.topics", "/topics")