Serve swagger-ui assets from npm package

See merge request tildes/tildes!169
2 months ago · 9175db5cde
11 changed files with 4502 additions and 1412 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/files/index.css
+++ b/ansible/roles/swagger_ui/files/index.css
@ -0,0 +1,17 @@
+html
+{
+  box-sizing: border-box;
+  overflow: -moz-scrollbars-vertical;
+  overflow-y: scroll;
+}
+*,
+*:before,
+*:after
+{
+  box-sizing: inherit;
+}
+
+body {
+  margin:0;
+  background: #fafafa;
+}
--- a/ansible/roles/swagger_ui/files/index.html
+++ b/ansible/roles/swagger_ui/files/index.html
@ -0,0 +1,16 @@
+<!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" />
+    <link rel="stylesheet" type="text/css" href="/swagger-ui/index.css" />
+  </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 src="/swagger-ui/index.js" charset="UTF-8"> </script>
+  </body>
+</html>
--- a/ansible/roles/swagger_ui/files/index.js
+++ b/ansible/roles/swagger_ui/files/index.js
@ -0,0 +1,26 @@
+window.onload = function() {
+    const uiConfig = {
+        "url": "/api/beta/openapi.yaml",
+        "dom_id": "#swagger-ui",
+        "deepLinking": true,
+        "validatorUrl": null,
+        "layout": "StandaloneLayout",
+        "oauth2RedirectUrl": "/api/beta/ui/oauth2-redirect"
+    };
+    Object.assign(uiConfig, {
+        presets: [
+            SwaggerUIBundle.presets.apis,
+            SwaggerUIStandalonePreset,
+        ],
+        plugins: [
+            SwaggerUIBundle.plugins.DownloadUrl,
+        ],
+    });
+    const oauthConfig = null;
+    // Build a system
+    const ui = SwaggerUIBundle(uiConfig);
+    if (oauthConfig) {
+        ui.initOAuth(oauthConfig);
+    }
+    window.ui = ui;
+}
--- 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,30 @@
+---
+- 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: 0755
+    remote_src: true
+
+- name: Copy our own custom swagger-ui web assets
+  block:
+    - copy:
+        src: "index.html"
+        dest: "{{ app_dir }}/static/swagger-ui/index.html"
+        owner: "{{ app_username }}"
+        group: "{{ app_username }}"
+        mode: 0644
+    - copy:
+        src: "index.css"
+        dest: "{{ app_dir }}/static/swagger-ui/index.css"
+        owner: "{{ app_username }}"
+        group: "{{ app_username }}"
+        mode: 0644
+    - copy:
+        src: "index.js"
+        dest: "{{ app_dir }}/static/swagger-ui/index.js"
+        owner: "{{ app_username }}"
+        group: "{{ app_username }}"
+        mode: 0644
--- a/tildes/package-lock.json
+++ b/tildes/package-lock.json
--- a/tildes/package.json
+++ b/tildes/package.json
@ -8,7 +8,9 @@
    "lint:js": "node node_modules/eslint/bin/eslint.js static/js/",
    "lint:scss": "node node_modules/stylelint/bin/stylelint.js scss/"
  },
-  "dependencies": {},
+  "dependencies": {
+    "swagger-ui": "^5.27.1"
+  },
  "devDependencies": {
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^4.3.0",
@ -17,6 +19,9 @@
    "stylelint": "^10.0.1",
    "stylelint-scss": "^3.6.0"
  },
+  "scarfSettings": {
+    "enabled": false
+  },
  "eslintConfig": {
    "env": {
      "browser": true
--- 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/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/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")