refactor(ui): use pnpm package manager

.github/.licenserc.yaml

@@ -4,6 +4,7 @@ header:
     copyright-owner: Chaos Mesh Authors.
   paths-ignore:
     - '.gitignore'
+    - '.gitkeep'
     - '.dockerignore'
     - '.editorconfig'
     - '.lift.toml'
@@ -53,10 +54,12 @@ header:
     # Dockerfiles
     - '**/Dockerfile'
     # UI
+    - 'ui/pnpm-workspace.yaml'
+    - 'ui/pnpm-lock.yaml'
     - 'ui/.husky/**'
     - 'ui/.prettierignore'
     - 'ui/.prettierrc'
-    - 'ui/.yarnclean'
+    - 'ui/app/public/index.html'
     - 'ui/app/src/api/zz_generated.frontend.chaos-mesh.ts'
     - 'ui/app/src/formik/**'
     - 'ui/app/src/openapi/**'
@@ -70,7 +73,5 @@ header:
     - 'ui/packages/mui-extends/.storybook/**'
     - 'ui/packages/mui-extends/stories/**'
     - 'ui/packages/mui-extends/test/storyshots.test.js'
-    - 'ui/yarn.lock'
     # codecov configuration file
     - 'codecov.yml'
-    - '.gitkeep'

.github/workflows/ci.yml

@@ -40,7 +40,7 @@ jobs:
               - '**.go'
               - 'helm/**'
             ui:
-              - 'ui/yarn.lock'
+              - 'ui/pnpm-lock.yaml'
               - '**.js'
               - '**.ts?(x)'
   go:
@@ -109,32 +109,33 @@ jobs:
         job:
           - build
           - test
-        # node-version: ["14"] # TODO: add nodejs-16?
-    runs-on: "ubuntu-20.04"
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14
-          cache: "yarn"
-          cache-dependency-path: "ui/yarn.lock"
+          node-version: 18
+          cache: "pnpm"
+          cache-dependency-path: "ui/pnpm-lock.yaml"
 
-      - name: Install dependencies
-        run: yarn --frozen-lockfile
+      - run: pnpm install --frozen-lockfile
 
-      - name: Cache app build
+      - name: Cache app/build
         if: ${{ matrix.job == 'build' }}
         uses: actions/cache@v2
         with:
           path: ./ui/app/build
-          key: ${{ runner.os }}-yarn-${{ hashFiles('ui/yarn.lock') }}
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('ui/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-pnpm-
 
-      - name: Try build
+      - name: Build app
         if: ${{ matrix.job == 'build' }}
-        run: yarn build
+        run: pnpm build
 
-      - name: Run UT
+      - name: Run tests
         if: ${{ matrix.job == 'test' }}
-        run: yarn test
+        run: pnpm test

.github/workflows/ci_skip.yml

@@ -26,7 +26,7 @@ jobs:
               - '**.go'
               - 'helm/**'
             ui:
-              - 'ui/yarn.lock'
+              - 'ui/pnpm-lock.yaml'
               - '**.js'
               - '**.ts?(x)'
   go:

.gitignore

@@ -23,8 +23,6 @@ core.sqlite
 /_tools/
 
 node_modules
-# FIXME: comment this line temporarily to get e2e_test.yml working.
-# /yarn.lock
 
 output/
 _artifacts/

CHANGELOG.md

@@ -22,7 +22,8 @@ For more information and how-to, see [RFC: Keep A Changelog](https://github.com/
 - Upgrade byteman-helper to v4.0.20 [#3863](https://github.com/chaos-mesh/chaos-mesh/pull/3863)
 - Helm: change default webhook port to [#10250](https://github.com/chaos-mesh/chaos-mesh/pull/3877)
 - Upgrade base image for chaos-mesh to alpine:3.17 [#3893](https://github.com/chaos-mesh/chaos-mesh/pull/3893)
-- Slow down releasing the latest version #[3900](https://github.com/chaos-mesh/chaos-mesh/pull/3900)
+- Slow down releasing the latest version [#3900](https://github.com/chaos-mesh/chaos-mesh/pull/3900)
+- Change the package manager from `yarn` to `pnpm`. [#3965](https://github.com/chaos-mesh/chaos-mesh/pull/3965)
 
 ### Removed
 

Makefile

@@ -43,7 +43,6 @@ PACKAGE_LIST := echo $$(go list ./... | grep -vE "chaos-mesh/test|pkg/ptrace|zz_
 CRD_OPTIONS ?= "crd:trivialVersions=true,preserveUnknownFields=false,crdVersions=v1"
 
 export GO_BUILD_CACHE ?= $(ROOT)/.cache/chaos-mesh
-export YARN_BUILD_CACHE ?= $(ROOT)/.cache/yarn
 
 BUILD_TAGS ?=
 
@@ -57,7 +56,7 @@ BASIC_IMAGE_ENV=IMAGE_DEV_ENV_PROJECT=$(IMAGE_DEV_ENV_PROJECT) IMAGE_DEV_ENV_REG
 	IMAGE_BUILD_ENV_TAG=$(IMAGE_BUILD_ENV_TAG) IN_DOCKER=$(IN_DOCKER) \
 	IMAGE_TAG=$(IMAGE_TAG) IMAGE_PROJECT=$(IMAGE_PROJECT) IMAGE_REGISTRY=$(IMAGE_REGISTRY) \
 	TARGET_PLATFORM=$(TARGET_PLATFORM) \
-	GO_BUILD_CACHE=$(GO_BUILD_CACHE) YARN_BUILD_CACHE=$(YARN_BUILD_CACHE)
+	GO_BUILD_CACHE=$(GO_BUILD_CACHE)
 
 RUN_IN_DEV_SHELL=$(shell $(BASIC_IMAGE_ENV)\
 	$(ROOT)/build/get_env_shell.py dev-env)
@@ -76,16 +75,16 @@ timer:
 multithread_tracee: test/cmd/multithread_tracee/main.c
 	cc test/cmd/multithread_tracee/main.c -lpthread -O2 -o ./bin/test/multithread_tracee
 
-yarn_dependencies:
+pnpm_install_dependencies:
 ifeq (${UI},1)
 	cd ui &&\
-	yarn install --frozen-lockfile --network-timeout 500000
+	pnpm install --frozen-lockfile
 endif
 
-ui: yarn_dependencies
+ui: pnpm_install_dependencies
 ifeq (${UI},1)
 	cd ui &&\
-	yarn build
+	pnpm build
 	hack/embed_ui_assets.sh
 endif
 

build/common.py

@@ -25,5 +25,4 @@
     "LDFLAGS",
     "CRATES_MIRROR",
     "GO_BUILD_CACHE",
-    "YARN_BUILD_CACHE",
 ]

build/get_env_shell.py

@@ -104,16 +104,6 @@ def main():
         cmd += ["--volume", f"{tmp_go_dir}:/tmp/go"]
         cmd += ["--volume", f"{tmp_go_build_dir}:/tmp/go-build"]
 
-    if os.getenv("YARN_BUILD_CACHE") is not None and os.getenv(
-            "YARN_BUILD_CACHE") != "":
-        yarn_cache_dir = f"{os.getenv('YARN_BUILD_CACHE')}/cache"
-        yarn_global_folder = f"{os.getenv('YARN_BUILD_CACHE')}/global"
-
-        pathlib.Path(yarn_cache_dir).mkdir(parents=True, exist_ok=True)
-        pathlib.Path(yarn_global_folder).mkdir(parents=True, exist_ok=True)
-        cmd += ["--volume", f"{yarn_cache_dir}:/.cache/yarn"]
-        cmd += ["--volume", f"{yarn_global_folder}:/.yarn"]
-
     for env_key in common.export_env_variables:
         pass_env_to_docker_arg(cmd, env_key)
 

images/build-env/Dockerfile

@@ -14,14 +14,10 @@ RUN apt-get update && \
     apt-get install build-essential curl git pkg-config libfuse-dev fuse -y && \
     rm -rf /var/lib/apt/lists/*
 
-# require nodejs >= 12
-RUN curl -fsSL https://deb.nodesource.com/setup_14.x | bash - && \
+RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && \
     apt-get install -y nodejs && \
     rm -rf /var/lib/apt/lists/*
-RUN npm config set unsafe-perm true
-RUN npm install yarn -g
-
-RUN if [[ -n "$HTTP_PROXY" ]]; then yarn config set proxy $HTTP_PROXY; fi
+RUN npm install pnpm -g
 
 ARG TARGET_PLATFORM=amd64
 

ui/.gitignore

@@ -21,6 +21,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 package-lock.json
 

ui/.prettierignore

@@ -1,5 +1 @@
 app/build
-tsconfig.json
-package.json
-package-lock.json
-yarn.lock

ui/README.md

@@ -68,14 +68,14 @@ One is **app**, which describe the whole UI interface, and the other is **packag
 
 If you haven't installed the nodejs and golang environment, checkout [https://nodejs.org/en/download/](https://nodejs.org/en/download/) and [https://golang.org/](https://golang.org/).
 
-And we use [Yarn 1](https://classic.yarnpkg.com/en/) as the dependency management. Maybe we will migrate to Yarn 2 in the future, but not now.
+And we use [pnpm](https://pnpm.io/) as the dependency management. Please also install it.
 
 #### Install deps
 
 Into the `ui` folder, run:
 
 ```sh
-yarn bootstrap
+pnpm bootstrap
 ```
 
 This command will install all deps the UI needed.
@@ -103,7 +103,7 @@ Then, you need to provide an API server as a proxy, it will pass into an env var
   There have two ways to run chaos-dashboard server in your terminal:
 
   - `cd .. && go run cmd/chaos-dashboard/main.go`
-  - `cd .. && ./images/chaos-dashboard/bin/chaos-dashboard` (Already build in `yarn bootstrap`)
+  - `cd .. && ./images/chaos-dashboard/bin/chaos-dashboard` (Already build in `pnpm bootstrap`)
 
   One is real-time, the other needs to be compiled before use. The compiled bundles an extra Swagger docs into the binary file.
 
@@ -113,13 +113,13 @@ We already place a one-step script to start the UI:
 
 ```sh
 # cross-env REACT_APP_API_URL=http://localhost:2333 BROWSER=none react-scripts start
-yarn workspace @ui/app start:default
+pnpm -F @ui/app start:default
 ```
 
 Or if you want to specify the `API_URL`:
 
 ```sh
-REACT_APP_API_URL=xxx BROWSER=none yarn workspace @ui/app start
+REACT_APP_API_URL=xxx BROWSER=none pnpm -F @ui/app start
 ```
 
 Then open <http://localhost:3000> to view it in the browser.
@@ -131,16 +131,16 @@ Then open <http://localhost:3000> to view it in the browser.
 This package extends many of mui's components for use in the UI. It will use `tsc` to compile the code, simply run:
 
 ```sh
-yarn workspace @ui/mui-extends build
+pnpm -F @ui/mui-extends build
 ```
 
 to build them.
 
 We provide [storybook](https://storybook.js.org/) for previewing the components, you can run:
 
 ```sh
-yarn workspace @ui/mui-extends build && \
-yarn workspace @ui/mui-extends storybook
+pnpm -F @ui/mui-extends build && \
+pnpm -F @ui/mui-extends storybook
 ```
 
 to open it.

ui/app/package.json

@@ -6,15 +6,17 @@
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.3.0",
     "@loadable/component": "^5.14.1",
+    "@mui/base": "5.0.0-alpha.120",
     "@mui/icons-material": "^5.10.16",
-    "@mui/lab": "5.0.0-alpha.98",
+    "@mui/lab": "5.0.0-alpha.122",
     "@mui/material": "^5.10.16",
     "@mui/styles": "^5.10.16",
-    "@mui/x-data-grid": "5.17.1",
-    "@nivo/core": "^0.74.0",
-    "@nivo/pie": "^0.74.0",
-    "@reactour/tour": "^2.3.0",
+    "@mui/x-data-grid": "6.0.0",
+    "@nivo/core": "^0.80.0",
+    "@nivo/pie": "^0.80.0",
+    "@reactour/tour": "^3.3.0",
     "@reduxjs/toolkit": "^1.7.1",
+    "@ui/mui-extends": "workspace:*",
     "ace-builds": "^1.4.12",
     "auto-bind": "^5.0.1",
     "axios": "^0.24.0",
@@ -43,7 +45,7 @@
     "react-intl": "^5.22.0",
     "react-redux": "^7.2.2",
     "react-router-dom": "^6.0.2",
-    "react-scripts": "5.0.0",
+    "react-scripts": "5.0.1",
     "react-window": "^1.8.6",
     "redux": "^4.0.5",
     "typescript": "~4.5.2",
@@ -75,7 +77,7 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.15.1",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.5.0",
     "@types/cytoscape": "^3.14.12",
     "@types/d3": "^6.3.0",
@@ -92,7 +94,7 @@
     "@types/react-redux": "^7.1.15",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-window": "^1.8.2",
-    "@types/reactour": "^1.17.1",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@types/uuid": "^8.3.4",
     "@types/yup": "^0.29.11",
     "cross-env": "^7.0.3",
@@ -103,7 +105,7 @@
   "jest": {
     "resetMocks": false,
     "transformIgnorePatterns": [
-      "node_modules/(?!auto-bind)"
+      "node_modules/.pnpm/(?!auto-bind)"
     ]
   }
 }