refactor the way the ui is embedded (#583)

Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
perses · Sep 30, 2022 · a27ded9 · a27ded9
1 parent 4c9a66c
commit a27ded9
Showing 10 changed files with 66 additions and 184 deletions.
diff --git a/.github/workflows/build_and_release.yaml b/.github/workflows/build_and_release.yaml
@@ -81,8 +81,6 @@ jobs:
     name: "go and github release"
     needs: "build-frontend"
     runs-on: ubuntu-latest
-    env:
-      GORELEASER_PARALLEL: 1
     permissions:
       contents: write
     steps:

diff --git a/Makefile b/Makefile
@@ -92,10 +92,17 @@ test: generate
 integration-test: generate
 	$(GO) test -tags=integration -v -count=1 -cover -coverprofile=$(COVER_PROFILE) -coverpkg=./... ./...
 
+.PHONY: coverage-html
 coverage-html: integration-test
 	@echo ">> Print test coverage"
 	$(GO) tool cover -html=$(COVER_PROFILE)
 
+.PHONY: assets-compress
+assets-compress:
+	@echo '>> compressing assets'
+	scripts/compress_assets.sh
+
+## Cross build binaries for all platforms (Use "make build" in development)
 .PHONY: cross-build
 cross-build: ## Cross build binaries for all platforms (Use "make build" in development)
 	goreleaser release --snapshot --rm-dist --parallelism ${GORELEASER_PARALLEL}
@@ -122,9 +129,8 @@ build-cli:
 	CGO_ENABLED=0 GOARCH=${GOARCH} $(GO) build -ldflags "${LDFLAGS}" -o ./bin/percli ./cmd/percli
 
 .PHONY: generate
-generate:
+generate: assets-compress
 	$(GO) generate ./internal/api
-	$(GO) generate ./internal/api/front
 
 .PHONY: clean
 clean:

diff --git a/cmd/perses/main.go b/cmd/perses/main.go
@@ -20,9 +20,9 @@ import (
 	"github.com/perses/perses/internal/api/config"
 	"github.com/perses/perses/internal/api/core"
 	"github.com/perses/perses/internal/api/core/middleware"
-	"github.com/perses/perses/internal/api/front"
 	"github.com/perses/perses/internal/api/impl/v1/dashboard/schemas"
 	"github.com/perses/perses/internal/api/shared/dependency"
+	"github.com/perses/perses/ui"
 	"github.com/sirupsen/logrus"
 )
 
@@ -57,7 +57,7 @@ func main() {
 	}
 	serviceManager := dependency.NewServiceManager(persistenceManager, conf)
 	persesAPI := core.NewPersesAPI(serviceManager)
-	persesFrontend := front.NewPersesFrontend()
+	persesFrontend := ui.NewPersesFrontend()
 	runner := app.NewRunner().WithDefaultHTTPServer("perses").SetBanner(banner)
 
 	// enable hot reload of CUE schemas for dashboards validation:

diff --git a/go.mod b/go.mod
@@ -10,6 +10,7 @@ require (
 	github.com/olekukonko/tablewriter v0.0.5
 	github.com/perses/common v0.15.0
 	github.com/prometheus/common v0.37.0
+	github.com/prometheus/common/assets v0.2.0
 	github.com/sirupsen/logrus v1.9.0
 	github.com/spf13/cobra v1.5.0
 	github.com/stretchr/testify v1.8.0

diff --git a/go.sum b/go.sum
@@ -303,6 +303,8 @@ github.com/prometheus/common v0.26.0/go.mod h1:M7rCNAaPfAosfx8veZJCuw84e35h3Cfd9
 github.com/prometheus/common v0.32.1/go.mod h1:vu+V0TpY+O6vW9J44gczi3Ap/oXXR10b+M/gUGO4Hls=
 github.com/prometheus/common v0.37.0 h1:ccBbHCgIiT9uSoFY0vX8H3zsNR5eLt17/RQLUvn8pXE=
 github.com/prometheus/common v0.37.0/go.mod h1:phzohg0JFMnBEFGxTDbfu3QyL5GI8gTQJFhYO5B3mfA=
+github.com/prometheus/common/assets v0.2.0 h1:0P5OrzoHrYBOSM1OigWL3mY8ZvV2N4zIE/5AahrSrfM=
+github.com/prometheus/common/assets v0.2.0/go.mod h1:D17UVUE12bHbim7HzwUvtqm6gwBEaDQ0F+hIGbFbccI=
 github.com/prometheus/procfs v0.0.0-20181005140218-185b4288413d/go.mod h1:c3At6R/oaqEKCNdg8wHV1ftS6bRYblBhIjjI8uT2IGk=
 github.com/prometheus/procfs v0.0.0-20190507164030-5867b95ac084/go.mod h1:TjEm7ze935MbeOT/UhFTIMYKhuLP4wbCsTZCD3I8kEA=
 github.com/prometheus/procfs v0.0.2/go.mod h1:TjEm7ze935MbeOT/UhFTIMYKhuLP4wbCsTZCD3I8kEA=

diff --git a/internal/api/front/generate.go b/internal/api/front/generate.go
diff --git a/scripts/compress_assets.sh b/scripts/compress_assets.sh
@@ -0,0 +1,37 @@
+#!/usr/bin/env bash
+#
+# compress static assets
+
+set -euo pipefail
+
+cd ui
+cp embed.go.tmpl embed.go
+
+GZIP_OPTS="-fk"
+# gzip option '-k' may not always exist in the latest gzip available on different distros.
+if ! gzip -k -h &>/dev/null; then GZIP_OPTS="-f"; fi
+
+dist="app/dist"
+
+if ! [[ -d "${dist}" ]]; then
+  mkdir -p ${dist}
+  echo "<!doctype html>
+        <html lang=\"en\">
+        <head>
+          <meta charset=\"utf-8\">
+          <title>Node</title>
+          <base href=\"/\">
+          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
+          <link rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\">
+        </head>
+        <body>
+        <div>
+          <p> This is the default index, looks like you forget to generate the react app before generating the golang endpoint.</p>
+        </div>
+        </body>
+        </html>" > ${dist}/index.html
+fi
+
+find app/dist -type f -name '*.gz' -delete
+find app/dist -type f -exec gzip $GZIP_OPTS '{}' \; -print0 | xargs -0 -I % echo %.gz | xargs echo //go:embed >> embed.go
+echo var embedFS embed.FS >> embed.go
diff --git a/ui/.gitignore b/ui/.gitignore
@@ -30,3 +30,4 @@ dist
 # ignore file copied during the release process of the UI
 LICENSE
 CHANGELOG.md
+/embed.go
diff --git a/internal/api/front/doc.go → ui/embed.go.tmpl b/internal/api/front/doc.go → ui/embed.go.tmpl
@@ -1,4 +1,4 @@
-// Copyright 2021 The Perses Authors
+// Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -11,10 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-package front
+package ui
 
-//go:generate go run generate.go
-
-// method register route is generated by the command above.
-type Endpoint struct {
-}
+import "embed"
diff --git a/internal/api/front/server.go → ui/endpoint.go b/internal/api/front/server.go → ui/endpoint.go
@@ -1,4 +1,4 @@
-// Copyright 2021 The Perses Authors
+// Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -11,27 +11,29 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-package front
+package ui
 
 import (
+	"net/http"
+
 	"github.com/labstack/echo/v4"
+	"github.com/labstack/echo/v4/middleware"
 	echoUtils "github.com/perses/common/echo"
+	"github.com/prometheus/common/assets"
 )
 
-type endpoint interface {
-	RegisterRoutes(g *echo.Group)
-}
+var asts = http.FS(assets.New(embedFS))
 
 type frontend struct {
 	echoUtils.Register
-	endpoint endpoint
 }
 
 func NewPersesFrontend() echoUtils.Register {
-	return &frontend{endpoint: &Endpoint{}}
+	return &frontend{}
 }
 
-func (a *frontend) RegisterRoute(e *echo.Echo) {
-	frontGroup := e.Group("")
-	a.endpoint.RegisterRoutes(frontGroup)
+func (f *frontend) RegisterRoute(e *echo.Echo) {
+	contentHandler := echo.WrapHandler(http.FileServer(asts))
+	contentRewrite := middleware.Rewrite(map[string]string{"/*": "/app/dist/$1"})
+	e.GET("/*", contentHandler, contentRewrite)
 }