Fix: YK Web build (#395)

* Fix: YK Web build

Migrated yk build from package.json scripts to the make file
added @types/node

* Updated docker build to include pre-built web assets

* Adds node and pnpm in tooling

* Updates Makefile to fix tooling for web-build

Makefile

@@ -101,6 +101,16 @@ MINIKUBE_VERSION ?= latest
 # used in integration and performance tests.
 YK_VERSION=18a3c7f
 
+# Add these near the top with other tool versions
+NODE_VERSION ?= 22.13.0
+PNPM_VERSION ?= latest
+
+# Add these with other LOCALBIN definitions
+NODE_DIR ?= $(LOCALBIN_TOOLING)/node
+PNPM ?= $(NODE_DIR)/lib/node_modules/corepack/shims/pnpm
+
+NODE_PATH := PATH=$(NODE_DIR)/bin:$(dir $(PNPM)):$$PATH
+
 ##@ General
 
 # The help target prints out all targets with their descriptions organized
@@ -308,17 +318,43 @@ test-k6-performance: ## run k6 performance tests.
 ##@ Build
 
 .PHONY: web-build
-web-build: ng ## build the web components.
-	pnpm --prefix ./web install
-	pnpm --prefix ./web update yunikorn-web ## ensure that the yunikorn-web package is up to date
-	uhsApiURL=$(strip $(call uhs_api_url)) yunikornApiURL=$(strip $(call yunikorn_api_url)) pnpm --prefix ./web setenv
-	pnpm --prefix ./web build
+web-build: node ## build the web components.
+## YHS Web
+	$(NODE_PATH) $(PNPM) --prefix ./web install
+	$(NODE_PATH) $(PNPM) --prefix ./web update yunikorn-web ## ensure that the yunikorn-web package is up to date
+	$(NODE_PATH) uhsApiURL=$(strip $(call uhs_api_url)) yunikornApiURL=$(strip $(call yunikorn_api_url)) \
+	moduleFederationRemoteEntry=$(strip $(call uhs_api_url))/remoteEntry.js \
+	localUhsComponentsWebAddress=$(strip $(call uhs_api_url)) \
+	$(NODE_PATH) $(PNPM) --prefix ./web setenv
+	$(NODE_PATH) $(PNPM) --prefix ./web build
+	echo "UHS Web Build Complete"
+## Yunikorn Web
+	echo "Removing node modules from yunikorn-web"
+	rm -rf ./web/node_modules/yunikorn-web/node_modules
+	echo "Copying yunikorn-web"
+	rsync -av --copy-links ./web/node_modules/yunikorn-web/ ./tmp/
+	echo "Installing yunikorn-web"
+	$(NODE_PATH) $(PNPM) --prefix ./tmp install
+	echo "Setting environment variables in yunikorn-web"
+	localSchedulerWebAddress=$(strip $(call yunikorn_api_url)) \
+	uhsApiURL=$(strip $(call uhs_api_url)) yunikornApiURL=$(strip $(call yunikorn_api_url)) \
+	moduleFederationRemoteEntry=$(strip $(call uhs_api_url))/remoteEntry.js \
+	localUhsComponentsWebAddress=$(strip $(call uhs_api_url)) \
+	$(NODE_PATH) $(PNPM) --prefix ./tmp setenv:prod
+	echo "Building yunikorn-web"
+	$(NODE_PATH) $(PNPM) --prefix ./tmp build:prod
+## Merging Assets
+	echo "Moving envconfig.json"
 	mv assets/assets/config/envconfig.json assets/assets/config/envconfig-uhs.json
-	## copy and merge yunikorn-web assets into the UHS assets directory
-	rsync -av web/node_modules/yunikorn-web/dist/yunikorn-web/ assets
+	echo "Copy and Merge yunikorn-web assets into the UHS assets directory"
+	rsync -av ./tmp/dist/yunikorn-web/ assets
+	echo "Cleaning up yunikorn-web build"
+	rm -rf ./tmp
+	echo "Moving envconfig.json"
 	mv assets/assets/config/envconfig.json assets/assets/config/envconfig-yk.json
 	## merge the two envconfig files
 	cd assets/assets/config && jq -s '.[0] * .[1]' envconfig-yk.json envconfig-uhs.json > envconfig.json
+	echo "Web build completed"
 
 .PHONY: build
 build: bin/app ## build the unicorn-history-server binary for current OS and architecture.
@@ -366,7 +402,7 @@ endif
 
 .PHONY: docker-build
 docker-build: OS=linux
-docker-build: bin/docker clean build ## build docker image using buildx.
+docker-build: bin/docker clean build web-build ## build docker image using buildx.
 	echo "Building docker image for linux/$(ARCH)"
 	docker buildx build    				     			 \
 		--file build/unicorn-history-server/Dockerfile   \
@@ -491,7 +527,7 @@ patch-yunikorn-service: ## patch yunikorn service to expose it as NodePort (yuni
 ##@ Build Dependencies
 
 .PHONY: install-tools
-install-tools: golangci-lint gotestsum $(CLUSTER_MGR) helm yq ## install development tools.
+install-tools: golangci-lint gotestsum $(CLUSTER_MGR) helm yq node ## install development tools.
 
 GOTESTSUM ?= $(LOCALBIN_TOOLING)/gotestsum
 GOTESTSUM_VERSION ?= v1.11.0
@@ -575,6 +611,15 @@ k6: xk6 $(K6) ## download k6 locally if necessary.
 $(K6): bin/tooling
 	test -s $(K6) || $(XK6) build $(K6_VERSION) --with github.com/grafana/xk6-kubernetes --output $(K6)
 
-.PHONY: ng
-ng: ## install Angular CLI.
-	npm install -g @angular/cli@18
+.PHONY: node
+node: $(NODE_DIR) ## download and setup node locally if necessary.
+$(NODE_DIR): bin/tooling
+	if [ ! -d $(NODE_DIR) ]; then \
+		mkdir -p $(NODE_DIR) ; \
+	fi ; \
+	NODE_ARCH="$$(if [ "$$(uname -m)" = "x86_64" ]; then echo "x64"; elif [ "$$(uname -m)" = "aarch64" ]; then echo "arm64"; else echo "$$(uname -m)"; fi)" ; \
+	echo "Downloading node $(NODE_VERSION) for $(OS)-$${NODE_ARCH}: https://nodejs.org/dist/v$(subst x,,$(NODE_VERSION))/node-v$(subst x,,$(NODE_VERSION))-$(OS)-$${NODE_ARCH}.tar.gz" ; \
+	curl -fsSL https://nodejs.org/dist/v$(subst x,,$(NODE_VERSION))/node-v$(subst x,,$(NODE_VERSION))-$(OS)-$${NODE_ARCH}.tar.gz | tar -xz --strip-components=1 -C $(NODE_DIR) ; \
+	PATH=$(NODE_DIR)/bin:$$PATH $(NODE_DIR)/bin/corepack enable && \
+	PATH=$(NODE_DIR)/bin:$$PATH $(NODE_DIR)/bin/corepack prepare pnpm@$(PNPM_VERSION) --activate
+

build/unicorn-history-server/Dockerfile

@@ -1,23 +1,8 @@
-ARG NODE_VERSION=22
 ARG ALPINE_VERSION=3.20
 
-FROM node:${NODE_VERSION} AS builder
-ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack enable
-
-WORKDIR /build/src
-COPY web ./
-
-RUN npm install -g @angular/cli@18
-RUN npm install -g pnpm --force
-
-RUN pnpm install
-RUN pnpm run build
-
 FROM alpine:${ALPINE_VERSION}
 
-COPY --from=builder /build/assets /app/assets
+COPY assets /app/assets
 COPY bin/app/unicorn-history-server /app/unicorn-history-server
 COPY migrations /app/migrations
 COPY config/unicorn-history-server/config.yml /app/config.yml

web/package.json

@@ -5,7 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "postbuild": "cd node_modules/yunikorn-web && pnpm install && pnpm build:prod",
+    "build:prod": "ng build --configuration production",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "preinstall": "npx only-allow pnpm",
@@ -41,6 +41,7 @@
     "@angular/cli": "^18.2.5",
     "@angular/compiler-cli": "^18.2.5",
     "@types/jasmine": "~5.1.4",
+    "@types/node": "^22.10.6",
     "jasmine-core": "~5.3.0",
     "json-server": "^0.17.4",
     "karma": "~6.4.4",