insightsengineering · walkowif · Feb 18, 2025 · Feb 17, 2025 · Feb 18, 2025 · Feb 18, 2025
@@ -10,14 +10,14 @@ import (
 	"strconv"
 	"strings"
 	"time"
+
+	"go.szostok.io/version"
+	"gopkg.in/yaml.v3"
 )
 
 //go:embed template.html
 var htmlTemplate string
 
-//go:embed swagger_ui_template.js
-var swaggerUITemplate string
-
 // Microservice represents configuration for each microservice
 type Microservice struct {
 	Endpoint   string `mapstructure:"endpoint"`
@@ -81,36 +81,62 @@ func GetOASSpec(url string) ([]byte, string, string, error) {
 
 // GenerateHTML generates the HTML for viewing the OpenAPI spec using Swagger UI
 func GenerateHTML(spec []byte, microserviceList []MicroserviceList, serviceURL, selectedService, serviceSummary, message string) (string, error) {
-	type SwaggerUIParams struct {
-		Spec             string
-		Host             string
-		ProxyAddress     string
-		Headers          map[string]string
-		MicroserviceList []MicroserviceList
-		SelectedService  string
-		ServiceSummary   string
-	}
 
-	params := SwaggerUIParams{
-		Spec:             string(spec),
-		Host:             serviceURL,
-		ProxyAddress:     proxyAddress + "/",
-		Headers:          headers,
-		MicroserviceList: microserviceList,
-		SelectedService:  selectedService,
-		ServiceSummary:   serviceSummary,
-	}
+	servicesYaml, err := yaml.Marshal(&services)
+	checkError(err)
 
-	tmpl := htmlTemplate
+	headersYaml, err := yaml.Marshal(&headers)
+	checkError(err)
 
-	// Only include the SwaggerUIBundle if a service is selected from drop-down list
-	// and the OAS specs have been successfully retrieved from the service.
-	if message == "" {
-		tmpl += swaggerUITemplate
+	oasBinderConfiguration := `
+config = "` + cfgFile + `"
+proxyAddress = "` + proxyAddress + `"
+listenPort = ` + strconv.Itoa(listenPort) + `
+listenAddress = "` + listenAddress + `"
+apiSpecsPath = "` + apiSpecsPath + `"
+services =
+` + string(servicesYaml) + `headers = ` + string(headersYaml)
+
+	versionInfo := version.Get()
+
+	aboutOasBinder := `
+Version: ` + versionInfo.Version + `
+Git Commit: ` + versionInfo.GitCommit + `
+Build Date: ` + versionInfo.BuildDate + `
+Commit Date: ` + versionInfo.CommitDate + `
+Go Version: ` + versionInfo.GoVersion + `
+Compiler: ` + versionInfo.Compiler + `
+Platform: ` + versionInfo.Platform
+
+	type SwaggerUIParams struct {
+		Spec                   string
+		Host                   string
+		ProxyAddress           string
+		Headers                map[string]string
+		MicroserviceList       []MicroserviceList
+		SelectedService        string
+		ServiceSummary         string
+		DisplaySwaggerUI       bool
+		Message                string
+		OASBinderConfiguration string
+		AboutOASBinder         string
 	}
-	tmpl += `</script><br />` + message + `</body></html>`
 
-	t, err := template.New("swaggerui").Parse(tmpl)
+	params := SwaggerUIParams{
+		Spec:                   string(spec),
+		Host:                   serviceURL,
+		ProxyAddress:           proxyAddress + "/",
+		Headers:                headers,
+		MicroserviceList:       microserviceList,
+		SelectedService:        selectedService,
+		ServiceSummary:         serviceSummary,
+		DisplaySwaggerUI:       message == "",
+		Message:                message,
+		OASBinderConfiguration: oasBinderConfiguration,
+		AboutOASBinder:         aboutOasBinder,
+	}
+
+	t, err := template.New("swaggerui").Parse(htmlTemplate)
 	if err != nil {
 		return "", err
 	}

@@ -1,38 +1,159 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-  <meta charset="utf-8">
-  <title>Swagger UI</title>
-  <!-- Load the latest Swagger UI code and style from npm using unpkg.com -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-bundle.min.js" integrity="sha512-7ihPQv5ibiTr0DW6onbl2MIKegdT6vjpPySyIb4Ftp68kER6Z7Yiub0tFoMmCHzZfQE9+M+KSjQndv6NhYxDgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-standalone-preset.min.js" integrity="sha512-UrYi+60Ci3WWWcoDXbMmzpoi1xpERbwjPGij6wTh8fXl81qNdioNNHExr9ttnBebKF0ZbVnPlTPlw+zECUK1Xw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui.min.css" integrity="sha512-+9UD8YSD9GF7FzOH38L9S6y56aYNx3R4dYbOCgvTJ2ZHpJScsahNdaMQJU/8osUiz9FPu0YZ8wdKf4evUbsGSg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OAS Binder</title>
+  <!-- Load the latest Swagger UI code and style -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.18.2/swagger-ui-bundle.min.js" integrity="sha512-9tBcCofqWq+PelL6USpUB7OJrCaObfefi9ht9nVZuKt1XP7eHDs7NwVljLSLVtSsErax1Tz3pG3O82eeq546Rg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.18.2/swagger-ui-standalone-preset.min.js" integrity="sha512-RYT3vTu8lWSgdoB5zNck/WogIqUb/ap/ivTr6t2LeS+MwqxRQsnSHkHpJRKjnC4T2fH7OMTxxQoC3jh7KGd3HA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js" integrity="sha512-TPh2Oxlg1zp+kz3nFA0C5vVC6leG/6mm1z9+mA81MI5eaUVqasPLO8Cuk4gMF4gUfP5etR73rgU/8PNMsSesoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js" integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.18.2/swagger-ui.min.css" integrity="sha512-xRGj65XGEcpPTE7Cn6ujJWokpXVLxqLxdtNZ/n1w52+76XaCRO7UWKZl9yJHvzpk99A0EP6EW+opPcRwPDxwkA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
   <style>
-    .toolbar {
-      margin: 20px 0;
+    body {
+      display: flex;
+      height: 100vh;
+      margin-top: 56px;
+    }
+    .sidebar {
+      height: 100vh;
+      max-width: 30%;
+      flex: 0 0 400px;
+    }
+    .content {
+      flex-grow: 1;
+      padding: 15px;
+    }
+    .sidebar img {
+      max-width: 100%;
+      margin-bottom: 15px;
+    }
+    .navbar {
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 1000;
+      height: 56px;
+    }
+    .navbar-brand {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 1.5rem;
+      font-weight: bold;
+    }
+    .navbar-nav {
+      flex-grow: 0;
+    }
+    .sidebar-title {
+      text-align: center;
+      font-weight: bold;
+      margin-bottom: 15px;
+      font-size: 1.25rem;
     }
   </style>
 </head>
 <body>
-  <div class="container">
-    <div class="toolbar">
-      <div class="form-group">
-        <label for="microservice-select" class="font-weight-bold">Select Microservice:</label>
-        <select id="microservice-select" class="form-control">
-          <option value=""></option>
-          {{range .MicroserviceList}}
-            <option value="{{.Endpoint}}" {{if .Selected}}selected{{end}}>{{.Name}}</option>
-          {{end}}
-        </select>
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <a class="navbar-brand" href="#">OAS Binder</a>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav ms-auto">
+        <li class="nav-item">
+          <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#modal1">⚙</button>
+        </li>
+        <li class="nav-item">
+          <button class="btn btn-warning ms-2" data-bs-toggle="modal" data-bs-target="#modal2">❓</button>
+        </li>
+      </ul>
+    </div>
+  </nav>
+  <div class="sidebar bg-light p-3">
+    <img src="https://cdnlogo.com/logos/o/44/openapi-wordmark.svg" alt="">
+    <div class="sidebar-title">Select Service</div>
+    <ul class="nav flex-column">
+      {{range .MicroserviceList}}
+        <li class="nav-item">
+          <button data-target="{{.Endpoint}}" class="btn {{if .Selected}}btn-primary {{else}} btn-outline-primary{{end}} mb-2">{{.Name}}</button>
+        </li>
+      {{end}}
+    </ul>
+  </div>
+  <div class="content">
+    <div id="mainContent">
+      <div class="sidebar-title">{{ .Message }}</div>
+      <div id="swagger-ui"></div>
+    </div>
+  </div>
+
+    <!-- Modal structures -->
+  <div class="modal fade" id="modal1" tabindex="-1" aria-labelledby="modal1Label" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="modal1Label">OAS Binder configuration</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <pre>
+            {{ .OASBinderConfiguration }}
+          </pre>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
       </div>
-    <div id="swagger-ui"></div>
+    </div>
   </div>
+
+  <div class="modal fade" id="modal2" tabindex="-1" aria-labelledby="modal2Label" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="modal2Label">About OAS Binder</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          A tool to interact with OAS docs for multiple microservices
+          <br />
+          URL: <a href="https://github.com/insightsengineering/oasbinder">https://github.com/insightsengineering/oasbinder</a>
+          <br />
+          <pre>
+            {{ .AboutOASBinder }}
+          </pre>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script>
-  document.getElementById('microservice-select').addEventListener('change', function() {
-      var newEndpoint = this.value;
-      if (newEndpoint !== "{{.SelectedService}}") {
-        window.location.href = newEndpoint;
-      }
+    document.querySelectorAll('button[data-target]').forEach(button => {
+      button.addEventListener('click', function () {
+        const target = button.getAttribute('data-target');
+        window.location.href = `${window.location.origin}/${target}`;
+      });
     });
+
+    window.onload = function() {
+      if ({{ .DisplaySwaggerUI }}) {
+        const ui = SwaggerUIBundle({
+          spec: JSON.parse({{.Spec}}),
+          dom_id: "#swagger-ui",
+          requestInterceptor: (req) => {
+            req.url = req.url.replace({{.ProxyAddress}}, {{.Host}});
+            {{range $key, $value := .Headers}}
+            req.headers["{{$key}}"] = "{{$value}}";
+            {{end}}
+            return req;
+          }
+        });
+      }
+    }
+  </script>
+</body>
+</html>
@@ -7,9 +7,10 @@ toolchain go1.23.6
 require (
 	github.com/jamiealquiza/envy v1.1.0
 	github.com/sirupsen/logrus v1.9.3
-	github.com/spf13/cobra v1.8.1
+	github.com/spf13/cobra v1.9.1
 	github.com/spf13/viper v1.19.0
 	go.szostok.io/version v1.2.0
+	gopkg.in/yaml.v3 v3.0.1
 )
 
 require (
@@ -22,7 +23,7 @@ require (
 	github.com/dustin/go-humanize v1.0.1 // indirect
 	github.com/fatih/color v1.18.0 // indirect
 	github.com/fsnotify/fsnotify v1.8.0 // indirect
-	github.com/goccy/go-yaml v1.15.22 // indirect
+	github.com/goccy/go-yaml v1.15.23 // indirect
 	github.com/google/uuid v1.6.0 // indirect
 	github.com/hashicorp/go-version v1.7.0 // indirect
 	github.com/hashicorp/hcl v1.0.0 // indirect
@@ -50,11 +51,10 @@ require (
 	github.com/subosito/gotenv v1.6.0 // indirect
 	go.uber.org/multierr v1.11.0 // indirect
 	golang.org/x/crypto v0.33.0 // indirect
-	golang.org/x/exp v0.0.0-20250210185358-939b2ce775ac // indirect
+	golang.org/x/exp v0.0.0-20250218142911-aa4b98e5adaa // indirect
 	golang.org/x/sys v0.30.0 // indirect
 	golang.org/x/text v0.22.0 // indirect
 	gopkg.in/ini.v1 v1.67.0 // indirect
-	gopkg.in/yaml.v3 v3.0.1 // indirect
 )
 
 replace github.com/imdario/mergo => github.com/imdario/mergo v0.3.16
@@ -10,7 +10,7 @@ github.com/araddon/dateparse v0.0.0-20210429162001-6b43995a97de h1:FxWPpzIjnTlhP
 github.com/araddon/dateparse v0.0.0-20210429162001-6b43995a97de/go.mod h1:DCaWoUhZrYW9p1lxo/cm8EmUOOzAPSEZNGF2DK1dJgw=
 github.com/aymanbagabas/go-osc52/v2 v2.0.1 h1:HwpRHbFMcZLEVr42D4p7XBqjyuxQH5SMiErDT4WkJ2k=
 github.com/aymanbagabas/go-osc52/v2 v2.0.1/go.mod h1:uYgXzlJ7ZpABp8OJ+exZzJJhRNQ2ASbcXHWsFqH8hp8=
-github.com/cpuguy83/go-md2man/v2 v2.0.4/go.mod h1:tgQtvFlXSQOSOSIRvRPT7W67SCa46tRHOmNcaadrF8o=
+github.com/cpuguy83/go-md2man/v2 v2.0.6/go.mod h1:oOW0eioCTA6cOiMLiUPZOpcVxMig6NIQQ7OS05n1F4g=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc h1:U9qPSI2PIWSS1VwoXQT9A3Wy9MM3WgvqSxFWenqJduM=
@@ -23,8 +23,8 @@ github.com/frankban/quicktest v1.14.6 h1:7Xjx+VpznH+oBnejlPUj8oUpdxnVs4f8XU8WnHk
 github.com/frankban/quicktest v1.14.6/go.mod h1:4ptaffx2x8+WTWXmUCuVU6aPUX1/Mz7zb5vbUoiM6w0=
 github.com/fsnotify/fsnotify v1.8.0 h1:dAwr6QBTBZIkG8roQaJjGof0pp0EeF+tNV7YBP3F/8M=
 github.com/fsnotify/fsnotify v1.8.0/go.mod h1:8jBTzvmWwFyi3Pb8djgCCO5IBqzKJ/Jwo8TRcHyHii0=
-github.com/goccy/go-yaml v1.15.22 h1:iQI1hvCoiYYiVFq76P4AI8ImgDOfgiyKnl/AWjK8/gA=
-github.com/goccy/go-yaml v1.15.22/go.mod h1:XBurs7gK8ATbW4ZPGKgcbrY1Br56PdM69F7LkFRi1kA=
+github.com/goccy/go-yaml v1.15.23 h1:WS0GAX1uNPDLUvLkNU2vXq6oTnsmfVFocjQ/4qA48qo=
+github.com/goccy/go-yaml v1.15.23/go.mod h1:XBurs7gK8ATbW4ZPGKgcbrY1Br56PdM69F7LkFRi1kA=
 github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
@@ -91,9 +91,8 @@ github.com/spf13/afero v1.12.0 h1:UcOPyRBYczmFn6yvphxkn9ZEOY65cpwGKb5mL36mrqs=
 github.com/spf13/afero v1.12.0/go.mod h1:ZTlWwG4/ahT8W7T0WQ5uYmjI9duaLQGy3Q2OAl4sk/4=
 github.com/spf13/cast v1.7.1 h1:cuNEagBQEHWN1FnbGEjCXL2szYEXqfJPbP2HNUaca9Y=
 github.com/spf13/cast v1.7.1/go.mod h1:ancEpBxwJDODSW/UG4rDrAqiKolqNNh2DX3mk86cAdo=
-github.com/spf13/cobra v1.8.1 h1:e5/vxKd/rZsfSJMUX1agtjeTDf+qv1/JdBF8gg5k9ZM=
-github.com/spf13/cobra v1.8.1/go.mod h1:wHxEcudfqmLYa8iTfL+OuZPbBZkmvliBWKIezN3kD9Y=
-github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
+github.com/spf13/cobra v1.9.1 h1:CXSaggrXdbHK9CF+8ywj8Amf7PBRmPCOJugH954Nnlo=
+github.com/spf13/cobra v1.9.1/go.mod h1:nDyEzZ8ogv936Cinf6g1RU9MRY64Ir93oCnqb9wxYW0=
 github.com/spf13/pflag v1.0.6 h1:jFzHGLGAlb3ruxLB8MhbI6A8+AQX/2eW4qeyNZXNp2o=
 github.com/spf13/pflag v1.0.6/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
 github.com/spf13/viper v1.19.0 h1:RWq5SEjt8o25SROyN3z2OrDB9l7RPd3lwTWU8EcEdcI=
@@ -110,8 +109,8 @@ go.uber.org/multierr v1.11.0 h1:blXXJkSxSSfBVBlC76pxqeO+LN3aDfLQo+309xJstO0=
 go.uber.org/multierr v1.11.0/go.mod h1:20+QtiLqy0Nd6FdQB9TLXag12DsQkrbs3htMFfDN80Y=
 golang.org/x/crypto v0.33.0 h1:IOBPskki6Lysi0lo9qQvbxiQ+FvsCC/YWOecCHAixus=
 golang.org/x/crypto v0.33.0/go.mod h1:bVdXmD7IV/4GdElGPozy6U7lWdRXA4qyRVGJV57uQ5M=
-golang.org/x/exp v0.0.0-20250210185358-939b2ce775ac h1:l5+whBCLH3iH2ZNHYLbAe58bo7yrN4mVcnkHDYz5vvs=
-golang.org/x/exp v0.0.0-20250210185358-939b2ce775ac/go.mod h1:hH+7mtFmImwwcMvScyxUhjuVHR3HGaDPMn9rMSUUbxo=
+golang.org/x/exp v0.0.0-20250218142911-aa4b98e5adaa h1:t2QcU6V556bFjYgu4L6C+6VrCPyJZ+eyRsABUPs1mz4=
+golang.org/x/exp v0.0.0-20250218142911-aa4b98e5adaa/go.mod h1:BHOTPb3L19zxehTsLoJXVaTktb06DFgmdW6Wb9s8jqk=
 golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.30.0 h1:QjkSwP/36a20jFYWkSue1YwXzLmsV5Gfq7Eiy72C1uc=