makefile: Add support for skipping UI build when prebuilt assets are provided

This commit introduces the ability to skip the UI build in the Makefile by
providing prebuilt UI assets, addressing the needs of users who may not have npm
installed or who do not want to go through the front-end build process.

To achieve this, we added the `PREBUILT_ASSETS_STATIC_DIR` environment variable.
If this variable is set, the Makefile will skip the UI build and related tasks,
such as bundling npm licenses. Instead, it will use the prebuilt assets from
the specified directory.

We already publish prebuilt UI assets as part of our release artifacts
(e.g., `prometheus-web-ui-3.0.0-beta.0.tar.gz`). Users can download this tarball,
extract it, and point the `PREBUILT_ASSETS_STATIC_DIR` to the extracted folder.
This reduces build complexity, especially for users who don't have a development
environment for front-end builds.

For example, you can use the command:
`make PREBUILT_ASSETS_STATIC_DIR=static build`
where `static` refers to the directory containing the prebuilt UI files.
This change simplifies the build process while still allowing users to use a
prebuilt UI if desired.

This solution is particularly useful for users who don't need to modify the UI
and prefer to use the prebuilt version that we provide with each release.

Signed-off-by: Julien <roidelapluie@o11y.eu>

Makefile

@@ -30,6 +30,11 @@ include Makefile.common
 
 DOCKER_IMAGE_NAME       ?= prometheus
 
+# Only build UI if PREBUILT_ASSETS_STATIC_DIR is not set
+ifdef PREBUILT_ASSETS_STATIC_DIR
+  SKIP_UI_BUILD = true
+endif
+
 .PHONY: update-npm-deps
 update-npm-deps:
 	@echo ">> updating npm dependencies"
@@ -75,8 +80,24 @@ ui-lint:
 	cd $(UI_PATH)/react-app && npm run lint
 
 .PHONY: assets
+ifndef SKIP_UI_BUILD
 assets: ui-install ui-build
 
+.PHONY: npm_licenses
+npm_licenses: ui-install
+	@echo ">> bundling npm licenses"
+	rm -f $(REACT_APP_NPM_LICENSES_TARBALL) npm_licenses
+	ln -s . npm_licenses
+	find npm_licenses/$(UI_NODE_MODULES_PATH) -iname "license*" | tar cfj $(REACT_APP_NPM_LICENSES_TARBALL) --files-from=-
+	rm -f npm_licenses
+else
+assets:
+	@echo '>> skipping assets build, pre-built assets provided'
+
+npm_licenses:
+	@echo '>> skipping assets npm licenses, pre-built assets provided'
+endif
+
 .PHONY: assets-compress
 assets-compress: assets
 	@echo '>> compressing assets'
@@ -125,14 +146,6 @@ else
 test: check-generated-parser common-test ui-build-module ui-test ui-lint check-go-mod-version
 endif
 
-.PHONY: npm_licenses
-npm_licenses: ui-install
-	@echo ">> bundling npm licenses"
-	rm -f $(REACT_APP_NPM_LICENSES_TARBALL) npm_licenses
-	ln -s . npm_licenses
-	find npm_licenses/$(UI_NODE_MODULES_PATH) -iname "license*" | tar cfj $(REACT_APP_NPM_LICENSES_TARBALL) --files-from=-
-	rm -f npm_licenses
-
 .PHONY: tarball
 tarball: npm_licenses common-tarball
 

scripts/compress_assets.sh

@@ -4,6 +4,12 @@
 
 set -euo pipefail
 
+export STATIC_DIR=static
+PREBUILT_ASSETS_STATIC_DIR=${PREBUILT_ASSETS_STATIC_DIR:-}
+if [ -n "$PREBUILT_ASSETS_STATIC_DIR" ]; then
+    STATIC_DIR=$(realpath $PREBUILT_ASSETS_STATIC_DIR)
+fi
+
 cd web/ui
 cp embed.go.tmpl embed.go
 
@@ -11,6 +17,19 @@ 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
 
+mkdir -p static
 find static -type f -name '*.gz' -delete
-find static -type f -exec gzip $GZIP_OPTS '{}' \; -print0 | xargs -0 -I % echo %.gz | sort | xargs echo //go:embed >> embed.go
+
+# Compress files from the prebuilt static directory and replicate the structure in the current static directory
+find "${STATIC_DIR}" -type f ! -name '*.gz' -exec bash -c '
+    for file; do
+        dest="${file#${STATIC_DIR}}"
+        mkdir -p "static/$(dirname "$dest")"
+        gzip '"$GZIP_OPTS"' "$file" -c > "static/${dest}.gz"
+    done
+' bash {} +
+
+# Append the paths of gzipped files to embed.go
+find static -type f -name '*.gz' -print0 | sort -z | xargs -0 echo //go:embed >> embed.go
+
 echo var EmbedFS embed.FS >> embed.go