feat(GraphQL): playground, served by zot in specific binary (#753)

Signed-off-by: Catalin Hofnar <catalin.hofnar@gmail.com>
2026-06-16 04:17:55 +08:00 · 2022-10-05 22:56:41 +03:00
parent c146448f01
commit ffc9929c1a
9 changed files with 317 additions and 0 deletions
@@ -0,0 +1,6 @@
+package constants
+
+const (
+	Debug                 = "/_zot/debug"
+	GQLPlaygroundEndpoint = Debug + "/graphql-playground"
+)
@@ -0,0 +1,53 @@
+//go:build debug
+// +build debug
+
+package debug
+
+import (
+	"embed"
+	"html/template"
+	"net/http"
+
+	"github.com/gorilla/mux"
+	"zotregistry.io/zot/pkg/api/config"
+	"zotregistry.io/zot/pkg/api/constants"
+	debugCst "zotregistry.io/zot/pkg/debug/constants"
+	"zotregistry.io/zot/pkg/log"
+	"zotregistry.io/zot/pkg/storage"
+)
+
+//go:embed index.html.tmpl
+var playgroundHTML embed.FS
+
+// SetupGQLPlaygroundRoutes ...
+func SetupGQLPlaygroundRoutes(conf *config.Config, router *mux.Router,
+	storeController storage.StoreController, l log.Logger,
+) {
+	log := log.Logger{Logger: l.With().Caller().Timestamp().Logger()}
+	log.Info().Msg("setting up graphql playground route")
+
+	templ, err := template.ParseFS(playgroundHTML, "gqlplayground/index.html.tmpl")
+	if err != nil {
+		log.Fatal().Err(err)
+	}
+
+	//nolint:lll
+	router.PathPrefix(constants.RoutePrefix + debugCst.GQLPlaygroundEndpoint).HandlerFunc(func(writer http.ResponseWriter, req *http.Request) {
+		writer.Header().Add("Content-Type", "text/html")
+
+		proto := ""
+
+		if req.TLS == nil {
+			proto += "http://"
+		} else {
+			proto += "https://"
+		}
+
+		target := proto + req.Host + constants.ExtSearchPrefix
+
+		// respond with the output of template execution
+		_ = templ.Execute(writer, struct {
+			Target string
+		}{Target: target})
+	})
+}
@@ -0,0 +1,19 @@
+//go:build !debug
+// +build !debug
+
+package debug
+
+import (
+	"github.com/gorilla/mux"
+	"zotregistry.io/zot/pkg/api/config"
+	"zotregistry.io/zot/pkg/log"
+	"zotregistry.io/zot/pkg/storage"
+)
+
+// SetupGQLPlaygroundRoutes ...
+func SetupGQLPlaygroundRoutes(conf *config.Config, router *mux.Router,
+	storeController storage.StoreController, log log.Logger,
+) {
+	log.Warn().Msg("skipping enabling graphql playground extension because given zot binary" +
+		"doesn't include this feature, please build a binary that does so")
+}
@@ -0,0 +1,67 @@
+<!--
+ *  Copyright (c) 2021 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>zot GraphQL playground</title>
+    <style>
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #graphiql {
+        height: 100vh;
+      }
+    </style>
+
+    <!--
+      This GraphiQL example depends on Promise and fetch, which are available in
+      modern browsers, but can be "polyfilled" for older browsers.
+      GraphiQL itself depends on React DOM.
+      If you do not want to rely on a CDN, you can host these files locally or
+      include them directly in your favored resource bundler.
+    -->
+    <script
+      crossorigin
+      src="https://unpkg.com/react@17/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
+    ></script>
+
+    <!--
+      These two files can be found in the npm module, however you may wish to
+      copy them directly into your environment, or perhaps include them in your
+      favored resource bundler.
+     -->
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+  </head>
+
+  <body>
+    <div id="graphiql">Loading...</div>
+    <script
+      src="https://unpkg.com/graphiql/graphiql.min.js"
+      type="application/javascript"
+    ></script>
+    <script>
+      ReactDOM.render(
+        React.createElement(GraphiQL, {
+          fetcher: GraphiQL.createFetcher({
+            url: {{.Target}},
+          }),
+          defaultEditorToolsVisibility: true,
+        }),
+        document.getElementById('graphiql'),
+      );
+    </script>
+  </body>
+</html>