Isolate react-app package (#3589)

* Isolate react-app package

Signed-off-by: Alex Weaver <weaver.alex.d@gmail.com>

---------

Signed-off-by: Alex Weaver <weaver.alex.d@gmail.com>

.github/workflows/ci.yml

@@ -43,3 +43,4 @@ jobs:
       - uses: prometheus/promci@v0.0.2
       - uses: ./.github/promci/actions/setup_environment
       - run: make
+      - run: git diff --exit-code

Makefile

@@ -37,7 +37,7 @@ build-react-app:
 	cd ui/react-app && npm install && npm run build
 
 .PHONY: assets-compress
-assets-compress:
+assets-compress: build-react-app
 	@echo '>> compressing assets'
 	scripts/compress_assets.sh
 

cluster/cluster_test.go

@@ -334,7 +334,7 @@ func testTLSConnection(t *testing.T) {
 	)
 	require.NoError(t, err)
 	go p2.Settle(context.Background(), 0*time.Second)
-
+	p2.WaitReady(context.Background())
 	require.Equal(t, 2, p1.ClusterSize())
 	p2.Leave(0 * time.Second)
 	require.Equal(t, 1, p1.ClusterSize())

cmd/alertmanager/main.go

@@ -57,6 +57,7 @@ import (
 	"github.com/prometheus/alertmanager/timeinterval"
 	"github.com/prometheus/alertmanager/types"
 	"github.com/prometheus/alertmanager/ui"
+	reactApp "github.com/prometheus/alertmanager/ui/react-app"
 )
 
 var (
@@ -495,6 +496,7 @@ func run() int {
 	webReload := make(chan chan error)
 
 	ui.Register(router, webReload, logger)
+	reactApp.Register(router, logger)
 
 	mux := api.Register(router, *routePrefix)
 

scripts/compress_assets.sh

@@ -7,9 +7,9 @@ set -euo pipefail
 cd ui/react-app
 cp embed.go.tmpl embed.go
 
-GZIP_OPTS="-fk"
+GZIP_OPTS="-fkn"
 # 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
+if ! gzip -k -h &>/dev/null; then GZIP_OPTS="-fn"; fi
 
 dist="dist"
 
@@ -33,5 +33,5 @@ if ! [[ -d "${dist}" ]]; then
 fi
 
 find dist -type f -name '*.gz' -delete
-find dist -type f -exec gzip $GZIP_OPTS '{}' \; -print0 | xargs -0 -I % echo %.gz | xargs echo //go:embed >> embed.go
+find dist -type f -exec gzip $GZIP_OPTS '{}' \; -print0 | xargs -0 -I % echo %.gz | sort | xargs echo //go:embed >> embed.go
 echo var embedFS embed.FS >> embed.go

ui/react-app/.gitignore

@@ -1,5 +1,4 @@
 node_modules/
 
-dist/
-
-embed.go
+dist/*
+!dist/*.gz

ui/react-app/embed.go

@@ -0,0 +1,21 @@
+// Copyright 2023 The Prometheus 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// DO NOT EDIT: This file was autogenerated by `scripts/compress_assets.sh`.
+
+package reactApp
+
+import "embed"
+
+//go:embed dist/26.js.gz dist/26.js.map.gz dist/732.js.gz dist/732.js.map.gz dist/index.html.gz dist/main.js.gz dist/main.js.map.gz
+var embedFS embed.FS

ui/react-app/embed.go.tmpl

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+// DO NOT EDIT: This file was autogenerated by `scripts/compress_assets.sh`.
+
 package reactApp
 
 import "embed"

ui/react-app/web.go

@@ -0,0 +1,64 @@
+// Copyright 2023 The Prometheus 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package reactApp
+
+import (
+	"fmt"
+	"io"
+	"net/http"
+	"path"
+
+	"github.com/go-kit/log"
+
+	"github.com/prometheus/common/route"
+	"github.com/prometheus/common/server"
+)
+
+var reactRouterPaths = []string{
+	"/",
+	"/status",
+}
+
+func Register(r *route.Router, logger log.Logger) {
+	serveReactApp := func(w http.ResponseWriter, r *http.Request) {
+		f, err := Assets.Open("/dist/index.html")
+		if err != nil {
+			w.WriteHeader(http.StatusInternalServerError)
+			fmt.Fprintf(w, "Error opening React index.html: %v", err)
+			return
+		}
+		defer func() { _ = f.Close() }()
+		idx, err := io.ReadAll(f)
+		if err != nil {
+			w.WriteHeader(http.StatusInternalServerError)
+			fmt.Fprintf(w, "Error reading React index.html: %v", err)
+			return
+		}
+		w.Write(idx)
+	}
+
+	// Static files required by the React app.
+	r.Get("/react-app/*filepath", func(w http.ResponseWriter, r *http.Request) {
+		for _, rt := range reactRouterPaths {
+			if r.URL.Path != "/react-app"+rt {
+				continue
+			}
+			serveReactApp(w, r)
+			return
+		}
+		r.URL.Path = path.Join("/dist", route.Param(r.Context(), "filepath"))
+		fs := server.StaticFileServer(Assets)
+		fs.ServeHTTP(w, r)
+	})
+}

ui/web.go

@@ -15,7 +15,6 @@ package ui
 
 import (
 	"fmt"
-	"io"
 	"net/http"
 	_ "net/http/pprof" // Comment this line to disable pprof endpoint.
 	"path"
@@ -23,17 +22,10 @@ import (
 	"github.com/go-kit/log"
 	"github.com/prometheus/client_golang/prometheus/promhttp"
 	"github.com/prometheus/common/route"
-	"github.com/prometheus/common/server"
 
 	"github.com/prometheus/alertmanager/asset"
-	reactApp "github.com/prometheus/alertmanager/ui/react-app"
 )
 
-var reactRouterPaths = []string{
-	"/",
-	"/status",
-}
-
 // Register registers handlers to serve files for the web interface.
 func Register(r *route.Router, reloadCh chan<- chan error, logger log.Logger) {
 	r.Get("/metrics", promhttp.Handler().ServeHTTP)
@@ -70,37 +62,6 @@ func Register(r *route.Router, reloadCh chan<- chan error, logger log.Logger) {
 		fs.ServeHTTP(w, req)
 	})
 
-	serveReactApp := func(w http.ResponseWriter, r *http.Request) {
-		f, err := reactApp.Assets.Open("/dist/index.html")
-		if err != nil {
-			w.WriteHeader(http.StatusInternalServerError)
-			fmt.Fprintf(w, "Error opening React index.html: %v", err)
-			return
-		}
-		defer func() { _ = f.Close() }()
-		idx, err := io.ReadAll(f)
-		if err != nil {
-			w.WriteHeader(http.StatusInternalServerError)
-			fmt.Fprintf(w, "Error reading React index.html: %v", err)
-			return
-		}
-		w.Write(idx)
-	}
-
-	// Static files required by the React app.
-	r.Get("/react-app/*filepath", func(w http.ResponseWriter, r *http.Request) {
-		for _, rt := range reactRouterPaths {
-			if r.URL.Path != "/react-app"+rt {
-				continue
-			}
-			serveReactApp(w, r)
-			return
-		}
-		r.URL.Path = path.Join("/dist", route.Param(r.Context(), "filepath"))
-		fs := server.StaticFileServer(reactApp.Assets)
-		fs.ServeHTTP(w, r)
-	})
-
 	r.Post("/-/reload", func(w http.ResponseWriter, req *http.Request) {
 		errc := make(chan error)
 		defer close(errc)