[YUNIKORN-2480] Convert yunikorn-web to use pnpm (#178)

Update yarn to pnpm in README.md and angular.json

Closes: #178

.github/workflows/main.yml

@@ -30,13 +30,13 @@ jobs:
           node-version-file: '.nvmrc'
       - run: |
           npm install -g @angular/cli > /dev/null
-          npm install -g yarn > /dev/null
+          npm install -g pnpm > /dev/null
       - name: Install Dependencies
-        run: PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 yarn install
+        run: PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 pnpm install
       - name: Build Prod
-        run: yarn build:prod
+        run: pnpm build:prod
       - name: Test Coverage
-        run: yarn test:coverage
+        run: pnpm test:coverage
       - name: Go lint
         run: make lint
       - name: Go unit tests

.gitignore

@@ -14,6 +14,7 @@
 /node_modules
 npm-debug.log
 yarn-error.log
+yarn.lock
 
 # IDEs and editors
 .idea/

Dockerfile

@@ -21,11 +21,12 @@ FROM --platform=$BUILDPLATFORM node:${NODE_VERSION}-alpine as buildstage
 
 WORKDIR /work
 # Only copy what is needed for the build
-COPY *.json *.js yarn.lock .browserslistrc /work/
+COPY *.json *.js *.yaml .browserslistrc /work/
 COPY src /work/src/
 
-RUN PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 yarn install
-RUN yarn build:prod
+RUN npm install -g pnpm
+RUN PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 pnpm i
+RUN pnpm build:prod
 
 # Imagestage: use scratch base image
 FROM --platform=$TARGETPLATFORM scratch

Makefile

@@ -128,6 +128,11 @@ endif
 all:
 	$(MAKE) -C $(dir $(BASE_DIR)) build
 
+# Install pnpm
+.PHONY: install-pnpm
+install-pnpm:
+	@pnpm version >/dev/null 2>/dev/null || npm install -g pnpm
+
 # Install tools
 .PHONY: tools
 tools: $(GOLANGCI_LINT_BIN)
@@ -158,9 +163,9 @@ OS := $(shell uname -s | tr '[:upper:]' '[:lower:]')
 license-check:
 	@echo "checking license headers:"
 ifeq (darwin,$(OS))
-	$(shell mkdir -p "$(OUTPUT)" && find -E . -not \( -path './.git*' -prune \) -not \( -path ./coverage -prune \) -not \( -path ./node_modules -prune \) -not \( -path ./build -prune \) -not \( -path ./tools -prune \) -regex ".*\.(go|sh|md|conf|yaml|yml|html|mod)" -exec grep -L "Licensed to the Apache Software Foundation" {} \; > "$(OUTPUT)/license-check.txt")
+	$(shell mkdir -p "$(OUTPUT)" && find -E . -not \( -path './.git*' -prune \) -not \( -path ./coverage -prune \) -not \( -path ./node_modules -prune \) -not \( -path ./build -prune \) -not \( -path ./tools -prune \) -not -path ./pnpm-lock.yaml -regex ".*\.(go|sh|md|conf|yaml|yml|html|mod)" -exec grep -L "Licensed to the Apache Software Foundation" {} \; > "$(OUTPUT)/license-check.txt")
 else
-	$(shell mkdir -p "$(OUTPUT)" && find . -not \( -path './.git*' -prune \) -not \( -path ./coverage -prune \) -not \( -path ./node_modules -prune \) -not \( -path ./build -prune \) -not \( -path ./tools -prune \) -regex ".*\.\(go\|sh\|md\|conf\|yaml\|yml\|html\|mod\)" -exec grep -L "Licensed to the Apache Software Foundation" {} \; > "$(OUTPUT)/license-check.txt")
+	$(shell mkdir -p "$(OUTPUT)" && find . -not \( -path './.git*' -prune \) -not \( -path ./coverage -prune \) -not \( -path ./node_modules -prune \) -not \( -path ./build -prune \) -not \( -path ./tools -prune \) -not -path ./pnpm-lock.yaml -regex ".*\.\(go\|sh\|md\|conf\|yaml\|yml\|html\|mod\)" -exec grep -L "Licensed to the Apache Software Foundation" {} \; > "$(OUTPUT)/license-check.txt")
 endif
 	@if [ -s "$(OUTPUT)/license-check.txt" ]; then \
 		echo "following files are missing license header:" ; \
@@ -171,18 +176,18 @@ endif
 
 # Start web interface in a local dev setup
 .PHONY: start-dev
-start-dev:
-	yarn start:srv & yarn start
+start-dev: install-pnpm
+	pnpm start:srv & pnpm start
 
 # Build the web interface for dev and test
 .PHONY: build
-build:
-	PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 && yarn install && ng build
+build: install-pnpm
+	PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 && pnpm i && ng build
 
 # Run JS unit tests
 .PHONY: test_js
-test_js: build
-	PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 && yarn test:singleRun
+test_js: build install-pnpm
+	PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 && pnpm test:singleRun
 
 # Run Go unit tests
 .PHONY: test_go
@@ -198,8 +203,8 @@ test: test_js test_go
 
 # Build the web interface in a production ready version
 .PHONY: build-prod
-build-prod:
-	PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 && yarn install && yarn build:prod
+build-prod: install-pnpm
+	PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 && pnpm i && pnpm build:prod
 
 # Simple clean of generated files only (no local cleanup).
 .PHONY: clean

README.md

@@ -30,10 +30,10 @@ The project requires a number of external tools to be installed before the build
 - [Node.js](https://nodejs.org/en/)
 - [Angular CLI](https://github.com/angular/angular-cli)
 - [Karma](https://karma-runner.github.io)
-- [yarn](https://www.npmjs.com/package/yarn)
+- [pnpm](https://www.npmjs.com/package/pnpm)
 - [json-server](https://www.npmjs.com/package/json-server)
 
-To manage our node packages, we've chosen Yarn. Simply execute the command `yarn install` to set up all necessary dependencies. This single step ensures that your environment is fully prepared with all the required packages.
+To manage our node packages, we've chosen pnpm. Simply execute the command `pnpm install` to set up all necessary dependencies. This single step ensures that your environment is fully prepared with all the required packages.
 
 ### Development server
 
@@ -61,13 +61,13 @@ The Makefile is smart enough to detect your host architecture but it will tag th
 ### Running tests
 
 All tests can be executed via `make test`. It will first build the project and then execute the unit tests followed by the end to end tests.  
-If you want to run the unit tests separately, run `yarn test` to execute them via [Karma](https://karma-runner.github.io). If you want to run the unit tests with code coverage, run `yarn test:coverage`.
+If you want to run the unit tests separately, run `pnpm test` to execute them via [Karma](https://karma-runner.github.io). If you want to run the unit tests with code coverage, run `pnpm test:coverage`.
 
 ## Local development
 Beside the simple all in way to start the development server via make you can also start a development environment manually. 
 
-The application depends on [json-server](https://www.npmjs.com/package/json-server) for data. Install json-server locally. Run `yarn start:srv` to start json-server for local development.
-Run `yarn start` to start the angular development server and navigate to `http://localhost:4200/`.
+The application depends on [json-server](https://www.npmjs.com/package/json-server) for data. Install json-server locally. Run `pnpm start:srv` to start json-server for local development.
+Run `pnpm start` to start the angular development server and navigate to `http://localhost:4200/`.
 
 After updating the context in the `json-db.json` or `json-route.json`, checking the json server is available  by running `make json-server`.
 

angular.json

@@ -2,7 +2,7 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "yarn",
+    "packageManager": "pnpm",
     "analytics": false
   },
   "newProjectRoot": "projects",

package.json

@@ -2,6 +2,7 @@
   "name": "yunikorn-web",
   "version": "0.0.0",
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",