charts/nginz: Serve swagger-ui (#2466)

wireapp · Jun 14, 2022 · 94716e3 · 94716e3
1 parent b72c112
commit 94716e3
Show file tree

Hide file tree

Showing 12 changed files with 360 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -59,6 +59,7 @@ spar.integration-aws.yaml
 integration-aws.yaml
 DOCKER_ID*
 swagger-ui
+!charts/nginz/static/swagger-ui
 deploy/services-demo/resources/templates/*
 deploy/services-demo/conf/nginz/zwagger-ui/*
 

diff --git a/changelog.d/2-features/nginz-swagger-ui b/changelog.d/2-features/nginz-swagger-ui
@@ -0,0 +1 @@
+charts/nginz: Serve swagger-ui for viewing swagger-1.2 docs
diff --git a/charts/nginz/conf/static/zauth.acl → charts/nginz/static/conf/zauth.acl b/charts/nginz/conf/static/zauth.acl → charts/nginz/static/conf/zauth.acl
diff --git a/charts/nginz/static/swagger-ui/index.html b/charts/nginz/static/swagger-ui/index.html
@@ -0,0 +1,77 @@
+<html>
+<!-- (not a frontend dev; "how to create tabs" taken from https://www.w3schools.com/howto/howto_js_tabs.asp -->
+<header>
+    <style media="screen" type="text/css">
+        /* Style the tab */
+        .tab {
+            overflow: hidden;
+            border: 1px solid #ccc;
+            background-color: #f1f1f1;
+        }
+        /* Style the buttons that are used to open the tab content */
+        .tab button {
+            background-color: inherit;
+            float: left;
+            border: none;
+            outline: none;
+            cursor: pointer;
+            padding: 14px 16px;
+            transition: 0.3s;
+        }
+        /* Change background color of buttons on hover */
+        .tab button:hover {
+            background-color: #ddd;
+        }
+        /* Create an active/current tablink class */
+        .tab button.active {
+            background-color: #ccc;
+        }
+        /* Style the tab content */
+        .tabcontent {
+            display: none;
+            padding: 6px 12px;
+            border: 1px solid #ccc;
+            border-top: none;
+        }
+    </style>
+
+
+</header>
+
+<body>
+    <!-- Tab links -->
+    <div class="tab">
+        <button class="tablinks" onclick="openTab(event, 'Swagger-1.2')" id="defaultOpen">Swagger-1.2</button>
+    </div>
+
+    <!-- Tab content -->
+    <iframe id="Swagger-1.2" class="tabcontent" src="./tab.html?url_suffix=api-docs/" height="100%" width="100%">
+    </iframe>
+
+    <script>
+        function openTab(evt, cityName) {
+            // Declare all variables
+            var i, tabcontent, tablinks;
+
+            // Get all elements with class="tabcontent" and hide them
+            tabcontent = document.getElementsByClassName("tabcontent");
+            for (i = 0; i < tabcontent.length; i++) {
+                tabcontent[i].style.display = "none";
+            }
+
+            // Get all elements with class="tablinks" and remove the class "active"
+            tablinks = document.getElementsByClassName("tablinks");
+            for (i = 0; i < tablinks.length; i++) {
+                tablinks[i].className = tablinks[i].className.replace(" active", "");
+            }
+
+            // Show the current tab, and add an "active" class to the button that opened the tab
+            document.getElementById(cityName).style.display = "block";
+            evt.currentTarget.className += " active";
+        }
+        document.getElementById("defaultOpen").click();
+    </script>
+
+</body>
+
+</html>
diff --git a/charts/nginz/static/swagger-ui/tab.html b/charts/nginz/static/swagger-ui/tab.html
@@ -0,0 +1,221 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="x-ua-compatible" content="IE=edge">
+  <title>Swagger UI</title>
+  <link rel="icon" type="image/png" href="https://unpkg.com/[email protected]/dist/images/favicon-32x32.png" sizes="32x32" />
+  <link rel="icon" type="image/png" href="https://unpkg.com/[email protected]/dist/images/favicon-16x16.png" sizes="16x16" />
+  <link href='https://unpkg.com/[email protected]/dist/css/typography.css' media='screen' rel='stylesheet' type='text/css'/>
+  <link href='https://unpkg.com/[email protected]/dist/css/reset.css' media='screen' rel='stylesheet' type='text/css'/>
+  <link href='https://unpkg.com/[email protected]/dist/css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
+  <link href='https://unpkg.com/[email protected]/dist/css/reset.css' media='print' rel='stylesheet' type='text/css'/>
+  <link href='https://unpkg.com/[email protected]/dist/css/print.css' media='print' rel='stylesheet' type='text/css'/>
+
+  <script src='https://unpkg.com/[email protected]/dist/lib/object-assign-pollyfill.js' type='text/javascript'></script>
+  <script src='https://unpkg.com/[email protected]/dist/lib/jquery-1.8.0.min.js' type='text/javascript'></script>
+  <script src='https://unpkg.com/[email protected]/dist/lib/jquery.slideto.min.js' type='text/javascript'></script>
+  <script src='https://unpkg.com/[email protected]/dist/lib/jquery.wiggle.min.js' type='text/javascript'></script>
+  <script src='https://unpkg.com/[email protected]/dist/lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
+  <script src='https://unpkg.com/[email protected]/dist/lib/handlebars-4.0.5.js' type='text/javascript'></script>
+  <script src='https://unpkg.com/[email protected]/dist/lib/lodash.min.js' type='text/javascript'></script>
+  <script src='https://unpkg.com/[email protected]/dist/lib/backbone-min.js' type='text/javascript'></script>
+  <script src='https://unpkg.com/[email protected]/dist/swagger-ui.js' type='text/javascript'></script>
+  <script src='https://unpkg.com/[email protected]/dist/lib/highlight.9.1.0.pack.js' type='text/javascript'></script>
+  <script src='https://unpkg.com/[email protected]/dist/lib/highlight.9.1.0.pack_extended.js' type='text/javascript'></script>
+  <script src='https://unpkg.com/[email protected]/dist/lib/jsoneditor.min.js' type='text/javascript'></script>
+  <script src='https://unpkg.com/[email protected]/dist/lib/marked.js' type='text/javascript'></script>
+  <script src='https://unpkg.com/[email protected]/dist/lib/swagger-oauth.js' type='text/javascript'></script>
+
+  <script type="text/javascript">
+  $(function() {
+     var base_url = location.protocol + "//" + location.hostname ;
+     document.getElementById('input_base_url').value = base_url;
+     var swagger_url = base_url;
+
+     // extract query parameters (used for setting the url_suffix)
+     function getUrlVars() {
+         var vars = [],
+             hash;
+         var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+         for (var i = 0; i < hashes.length; i++) {
+             hash = hashes[i].split('=');
+             vars.push(hash[0]);
+             vars[hash[0]] = hash[1];
+         }
+         return vars;
+     }
+     var get = getUrlVars();
+     var suffix = get['url_suffix'];
+     if (suffix && suffix.length > 1) {
+        document.getElementById('input_url_suffix').value = suffix;
+        swagger_url = base_url + '/' + suffix;
+     }
+
+     // -- Init
+     var access_token = '';
+     var timer = null;
+     hljs.configure({
+         highlightSizeThreshold: 5000
+     });
+     $('#access-token').hide();
+     $('#show-access-token').hide();
+     $('#hide-access-token').hide();
+     $('#form_logout').hide();
+     // -- Handlers
+     $('#input_login').click(function() {
+         login($('#input_email')[0].value, $('#input_password')[0].value);
+     });
+     $('#input_logout').click(function() {
+         logout();
+     });
+     $('#show-access-token').click(function() {
+         $('#access-token').show();
+         $('#show-access-token').hide();
+         $('#hide-access-token').show();
+     });
+     $('#hide-access-token').click(function() {
+         $('#access-token').hide();
+         $('#show-access-token').show();
+         $('#hide-access-token').hide();
+     });
+     window.swaggerUi = new SwaggerUi({
+         url: swagger_url,
+         dom_id: "swagger-ui-container",
+         supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
+         onComplete: function(swaggerApi, swaggerUi) {
+             log("Loaded SwaggerUI");
+             if (typeof initOAuth == "function") {
+                 /*
+                   initOAuth({
+                     clientId: "your-client-id",
+                     realm: "your-realms",
+                     appName: "your-app-name"
+                   });
+                   */
+             }
+             $('pre code').each(function(i, e) {
+                 hljs.highlightBlock(e)
+             });
+         },
+         onFailure: function(data) {
+             log("Unable to Load SwaggerUI");
+         },
+         docExpansion: "none",
+         jsonEditor: false,
+         defaultModelRendering: 'model',
+     });
+     window.swaggerUi.load();
+
+     function log() {
+         if ('console' in window) {
+             console.log.apply(console, arguments);
+         }
+     }
+     var login = function(email, password) {
+         $.ajax({
+             url: $('#input_base_url')[0].value + "/login",
+             type: "POST",
+             contentType: "application/json",
+             data: JSON.stringify({
+                 email: email,
+                 password: password
+             }),
+             success: function(result) {
+                 var json = eval(result);
+                 window.swaggerUi.api.clientAuthorizations.add("key", new SwaggerClient.ApiKeyAuthorization("Authorization", "Bearer " + json.access_token, "header"));
+                 // Update UI
+                 $('#form_login').hide();
+                 $('#form_logout').show();
+                 if (!$('#hide-access-token').is(':visible')) {
+                     $('#show-access-token').show();
+                 }
+                 $('#access-token').text(json.access_token);
+                 $('#swagger-ui-container').show();
+                 window.swaggerUi.listAll();
+                 // Update token & schedule refresh
+                 access_token = json.access_token;
+                 refresh();
+                 refresh();
+                 timer = setTimeout(function() {
+                     refresh();
+                 }, (json.expires_in * 1000) - 1000);
+             },
+             error: function(xhr, s, err) {
+                 console.log(err);
+                 $('#form_login').show();
+             }
+         });
+     };
+     var refresh = function() {
+         $.ajax({
+             url: $('#input_base_url')[0].value + "/access",
+             type: "POST",
+             contentType: "application/json",
+             headers: {
+                 "Authorization": "Bearer " + access_token
+             },
+             success: function(result) {
+                 var json = eval(result);
+                 window.swaggerUi.api.clientAuthorizations.add("key", new SwaggerClient.ApiKeyAuthorization("Authorization", "Bearer " + json.access_token, "header"));
+                 $('#access-token').text(json.access_token);
+                 // Update token & schedule refresh
+                 access_token = json.access_token;
+                 timer = setTimeout(function() {
+                     refresh();
+                 }, (json.expires_in * 1000) - 1000);
+             },
+             error: function(xhr, s, err) {
+                 console.log(err);
+                 $('#form_login').show();
+             }
+         });
+     };
+     var logout = function() {
+         $('#access-token').text('');
+         if (timer != null) {
+             clearTimeout(timer);
+         }
+         $('#swagger-ui-container').hide();
+         $('#form_login').show();
+         $('#form_logout').hide();
+     };
+  });
+
+  </script>
+</head>
+
+<body class="swagger-section">
+<br/>
+<div align="center">
+
+  <svg xmlns="http://www.w3.org/2000/svg" width="57" height="18" viewBox="0 0 57 18"><path fill-rule="evenodd" d="M10.857 14.767a5.45 5.45 0 0 1-1.277-3.51l.002-8.688c0-.708.573-1.284 1.277-1.284s1.277.576 1.277 1.284l-.002 8.687a5.45 5.45 0 0 1-1.277 3.51zm9.58-3.51c0 3.01-2.409 5.458-5.402 5.458a5.413 5.413 0 0 1-3.233-1.073 6.72 6.72 0 0 0 1.61-4.386l.002-8.687A2.565 2.565 0 0 0 10.859 0a2.565 2.565 0 0 0-2.555 2.569l-.002 8.687c0 1.675.64 3.206 1.65 4.386a5.413 5.413 0 0 1-3.233 1.073c-2.993 0-5.442-2.449-5.442-5.459V.66H0v10.597C0 14.975 3.035 18 6.733 18a6.681 6.681 0 0 0 4.164-1.458A6.587 6.587 0 0 0 15.028 18c3.698 0 6.686-3.025 6.686-6.744V.66h-1.278v10.597zm5.11 6.403h1.278V.624h-1.277V17.66zM38.008.327a7.337 7.337 0 0 0-6.073 3.233V.624h-1.278V17.66h1.278V7.72c0-3.367 2.725-6.106 6.073-6.106V.327zm2.394 13.705c-2.485-2.965-2.342-7.416.432-10.208a7.478 7.478 0 0 1 10.141-.436L40.401 14.032zM52.784 3.386a8.75 8.75 0 0 0-12.854-.471c-3.424 3.446-3.424 9.054 0 12.5a8.75 8.75 0 0 0 12.417.002l-.903-.91a7.478 7.478 0 0 1-10.14.434l5.285-5.32 6.195-6.235zM53.964.77h.447v1.16h.136V.77h.45V.643h-1.033V.77zM56.34.643l-.445 1.116L55.45.643h-.21v1.286h.131V.779l.457 1.15h.124l.455-1.145v1.145h.132V.643h-.201z"/></svg>
+  <br/><br/>
+
+  <form action="" id="form_login" onsubmit="return false;">
+    <br/>
+    <div class='input'><input placeholder="E-Mail" id="input_email" name="email" type="text"/></div>
+    <div class='input'><input placeholder="Password" id="input_password" name="password" type="password"/></div>
+    <div class='input'><input placeholder="BaseURL" id="input_base_url" name="base_url" type="hidden"></div>
+    <div class='input'><input placeholder="SwaggerSuffix" id="input_url_suffix" name="url_suffix" type="hidden"></div>
+    <input type="submit" value="Login" id="input_login"/>
+  </form>
+
+  <form action="" id="form_logout" onsubmit="return false;">
+    <input type="submit" value="Logout" id="input_logout"/>
+  </form>
+
+</div>
+
+<div align="center" style="font-family: Verdana, sans-serif, 10pt">
+  <a href="#" id="show-access-token">Show Access Token</a>
+  <a href="#" id="hide-access-token">Hide Access Token</a>
+  <div id="access-token" style="padding: 5px"></div>
+</div>
+
+<div id="message-bar" class="swagger-ui-wrap" data-sw-translate>&nbsp;</div>
+<div id="swagger-ui-container" class="swagger-ui-wrap"></div>
+
+</body>
+</html>
diff --git a/charts/nginz/templates/conf/_nginx.conf.tpl b/charts/nginz/templates/conf/_nginx.conf.tpl
@@ -329,6 +329,7 @@ http {
     #
 
     location /api-docs {
+        zauth off;
         default_type application/json;
         root {{ $.Values.nginx_conf.swagger_root }};
         index resources.json;

diff --git a/charts/nginz/templates/conf/_zwagger-config.js.tpl b/charts/nginz/templates/conf/_zwagger-config.js.tpl
diff --git a/charts/nginz/templates/configmap.yaml b/charts/nginz/templates/configmap.yaml
@@ -4,13 +4,11 @@ data:
 {{- include "nginz_nginx.conf" . | indent 4 }}
   upstreams.txt: |2
 {{- include "nginz_upstreams.txt" . | indent 4 }}
-  zwagger-config.js: |2
-{{- include "nginz_zwagger-config.js" . | indent 4 }}
   deeplink.json: |2
 {{- include "nginz_deeplink.json" . | indent 4 }}
   deeplink.html: |2
 {{- include "nginz_deeplink.html" . | indent 4 }}
-{{ (.Files.Glob "conf/static/*").AsConfig | indent 2 }}
+{{ (.Files.Glob "static/conf/*").AsConfig | indent 2 }}
 kind: ConfigMap
 metadata:
   creationTimestamp: null

diff --git a/charts/nginz/templates/deployment.yaml b/charts/nginz/templates/deployment.yaml
@@ -25,6 +25,8 @@ spec:
       annotations:
         # An annotation of the configmap checksum ensures changes to the configmap cause a redeployment upon `helm upgrade`
         checksum/configmap: {{ include (print .Template.BasePath "/configmap.yaml") . | sha256sum }}
+        checksum/swagger-ui-configmap: {{ include (print .Template.BasePath "/swagger-ui-configmap.yaml") . | sha256sum }}
+        checksum/swagger-resources-configmap: {{ include (print .Template.BasePath "/swagger-resources-configmap.yaml") . | sha256sum }}
         checksum/secret: {{ include (print .Template.BasePath "/secret.yaml") . | sha256sum }}
         fluentbit.io/parser-nginz: nginz
     spec:
@@ -51,6 +53,11 @@ spec:
         - name: upstreams
           mountPath: /etc/wire/nginz/upstreams
           readOnly: true
+        - name: swagger-ui
+          mountPath: /opt/zwagger-ui
+          readOnly: true
+        - name: swagger-resources
+          mountPath: {{ .Values.nginx_conf.swagger_root }}/api-docs
         ports:
         - name: http
           containerPort: {{ .Values.config.http.httpPort }}
@@ -83,3 +90,9 @@ spec:
           secretName: nginz
       - name: upstreams
         emptyDir: {}
+      - name: swagger-ui
+        configMap:
+          name: nginz-swagger-ui
+      - name: swagger-resources
+        configMap:
+          name: nginz-swagger-resources
diff --git a/charts/nginz/templates/swagger-resources-configmap.yaml b/charts/nginz/templates/swagger-resources-configmap.yaml
@@ -0,0 +1,27 @@
+# Swagger-1.0 JSON to combine swagger-1.0 documents from different services
+apiVersion: v1
+data:
+  resources.json: |2
+    {
+        "apiVersion": "1.0",
+        "swaggerVersion": "1.2",
+        "apis": [
+            {
+            "path": "/users",
+            "description": "Users, Connections and Onboarding"
+        },
+            {
+            "path": "/push",
+            "description": "Push Notifications"
+        },
+            {
+            "path": "/conversations",
+            "description": "Conversations and Messaging"
+        }
+        ]
+    }
+
+kind: ConfigMap
+metadata:
+  name: nginz-swagger-resources
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		charts/nginz: Serve swagger-ui for viewing swagger-1.2 docs