replace yarn by npm (#9198)

Signed-off-by: Augustin Husson <husson.augustin@gmail.com>

.circleci/config.yml

@@ -56,14 +56,14 @@ jobs:
       - checkout
       - restore_cache:
           keys:
-            - v3-npm-deps-{{ checksum "web/ui/react-app/yarn.lock" }}
+            - v3-npm-deps-{{ checksum "web/ui/react-app/package-lock.json" }}
             - v3-npm-deps-
       - run:
           command: make react-app-test
       - save_cache:
-          key: v3-npm-deps-{{ checksum "web/ui/react-app/yarn.lock" }}
+          key: v3-npm-deps-{{ checksum "web/ui/react-app/package-lock.json" }}
           paths:
-            - /home/circleci/.cache/yarn
+            - ~/.npm
 
   test_windows:
     executor:

.gitpod.yml

@@ -10,7 +10,7 @@ tasks:
       gp sync-await build
       unset BROWSER
       export DANGEROUSLY_DISABLE_HOST_CHECK=true
-      yarn start
+      npm start
     openMode: split-right
 ports:
   - port: 3000

Makefile

@@ -32,8 +32,8 @@ include Makefile.common
 
 DOCKER_IMAGE_NAME       ?= prometheus
 
-$(REACT_APP_NODE_MODULES_PATH): $(REACT_APP_PATH)/package.json $(REACT_APP_PATH)/yarn.lock
-	cd $(REACT_APP_PATH) && yarn --frozen-lockfile
+$(REACT_APP_NODE_MODULES_PATH): $(REACT_APP_PATH)/package.json $(REACT_APP_PATH)/package-lock.json
+	cd $(REACT_APP_PATH) && npm ci
 
 $(REACT_APP_OUTPUT_DIR): $(REACT_APP_NODE_MODULES_PATH) $(REACT_APP_SOURCE_FILES) $(REACT_APP_BUILD_SCRIPT)
 	@echo ">> building React app"
@@ -51,17 +51,17 @@ assets: $(REACT_APP_OUTPUT_DIR)
 .PHONY: react-app-lint
 react-app-lint:
 	@echo ">> running React app linting"
-	cd $(REACT_APP_PATH) && yarn lint:ci
+	cd $(REACT_APP_PATH) && npm run lint:ci
 
 .PHONY: react-app-lint-fix
 react-app-lint-fix:
 	@echo ">> running React app linting and fixing errors where possible"
-	cd $(REACT_APP_PATH) && yarn lint
+	cd $(REACT_APP_PATH) && npm run lint
 
 .PHONY: react-app-test
 react-app-test: | $(REACT_APP_NODE_MODULES_PATH) react-app-lint
 	@echo ">> running React app tests"
-	cd $(REACT_APP_PATH) && yarn test --no-watch --coverage
+	cd $(REACT_APP_PATH) && npm run test --no-watch --coverage
 
 .PHONY: test
 # If we only want to only test go code we have to change the test target

README.md

@@ -57,7 +57,7 @@ Prometheus will now be reachable at http://localhost:9090/.
 
 To build Prometheus from source code, first ensure that have a working
 Go environment with [version 1.14 or greater installed](https://golang.org/doc/install).
-You also need [Node.js](https://nodejs.org/) and [Yarn](https://yarnpkg.com/)
+You also need [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/)
 installed in order to build the frontend assets.
 
 You can directly use the `go` tool to download and install the `prometheus`

RELEASE.md

@@ -97,18 +97,21 @@ Either upgrade the dependencies within their existing version constraints as spe
 
 ```
 cd web/ui/react-app
-yarn upgrade
-git add yarn.lock
+npm update
+git add package.json package-lock.json
 ```
 
 Or alternatively, update all dependencies to their latest major versions. This is potentially more disruptive and will require more follow-up fixes, but should be done from time to time (use your best judgement):
 
 ```
 cd web/ui/react-app
-yarn upgrade --latest
-git add package.json yarn.lock
+npx npm-check-updates -u
+npm install
+git add package.json package-lock.json
 ```
 
+You can find more details on managing npm dependencies and updates [in this blog post](https://www.carlrippon.com/upgrading-npm-dependencies/).
+
 ### 1. Prepare your release
 
 At the start of a new major or minor release cycle create the corresponding release branch based on the main branch. For example if we're releasing `2.17.0` and the previous stable release is `2.16.0` we need to create a `release-2.17` branch. Note that all releases are handled in protected release branches, see the above `Branch management and versioning` section. Release candidates and patch releases for any given major or minor release happen in the same `release-<major>.<minor>` branch. Do not create `release-<version>` for patch or release candidate releases.

scripts/build_react_app.sh

@@ -13,6 +13,6 @@ fi
 cd web/ui/react-app
 
 echo "building React app"
-PUBLIC_URL=. yarn build
+PUBLIC_URL=. npm run build
 rm -rf ../static/react
 mv build ../static/react

web/ui/react-app/README.md

@@ -13,18 +13,18 @@ Instead of plain JavaScript, we use [TypeScript](https://www.typescriptlang.org/
 To work with the React UI code, you will need to have the following tools installed:
 
 * The [Node.js](https://nodejs.org/) JavaScript runtime.
-* The [Yarn](https://yarnpkg.com/) package manager.
+* The [npm](https://www.npmjs.com/) package manager. Once you installed Node, npm should already be available.
 * *Recommended:* An editor with TypeScript, React, and [ESLint](https://eslint.org/) linting support. See e.g. [Create React App's editor setup instructions](https://create-react-app.dev/docs/setting-up-your-editor/). If you are not sure which editor to use, we recommend using [Visual Studio Code](https://code.visualstudio.com/docs/languages/typescript). Make sure that [the editor uses the project's TypeScript version rather than its own](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript).
 
 **NOTE**: When using Visual Studio Code, be sure to open the `web/ui/react-app` directory in the editor instead of the root of the repository. This way, the right ESLint and TypeScript configuration will be picked up from the React workspace.
 
 ## Installing npm dependencies
 
-The React UI depends on a large number of [npm](https://www.npmjs.com/) packages. These are not checked in, so you will need to download and install them locally via the Yarn package manager:
+The React UI depends on a large number of [npm](https://www.npmjs.com/) packages. These are not checked in, so you will need to download and install them locally via the npm package manager:
 
-    yarn
+    npm install
 
-Yarn consults the `package.json` and `yarn.lock` files for dependencies to install. It creates a `node_modules` directory with all installed dependencies.
+npm consults the `package.json` and `package-lock.json` files for dependencies to install. It creates a `node_modules` directory with all installed dependencies.
 
 **NOTE**: Remember to change directory to `web/ui/react-app` before running this command and the following commands.
 
@@ -32,7 +32,7 @@ Yarn consults the `package.json` and `yarn.lock` files for dependencies to insta
 
 You can start a development server for the React UI outside of a running Prometheus server by running:
 
-    yarn start
+    npm start
 
 This will open a browser window with the React app running on http://localhost:3000/. The page will reload if you make edits to the source code. You will also see any lint errors in the console.
 
@@ -44,11 +44,11 @@ Due to a `"proxy": "http://localhost:9090"` setting in the `package.json` file,
 
 Create React App uses the [Jest](https://jestjs.io/) framework for running tests. To run tests in interactive watch mode:
 
-    yarn test
+    npm test
 
 To generate an HTML-based test coverage report, run:
 
-    CI=true yarn test --coverage
+    CI=true npm test --coverage
 
 This creates a `coverage` subdirectory with the generated report. Open `coverage/lcov-report/index.html` in the browser to view it.
 
@@ -62,7 +62,7 @@ We define linting rules for the [ESLint](https://eslint.org/) linter. We recomme
 
 To detect and automatically fix lint errors, run:
 
-    yarn lint
+    npm run lint
 
 This is also available via the `react-app-lint-fix` target in the main Prometheus `Makefile`.
 
@@ -70,7 +70,7 @@ This is also available via the `react-app-lint-fix` target in the main Prometheu
 
 To build a production-optimized version of the React app to a `build` subdirectory, run:
 
-    yarn build
+    npm run build
 
 **NOTE:** You will likely not need to do this directly. Instead, this is taken care of by the `build` target in the main Prometheus `Makefile` when building the full binary.
 
@@ -80,4 +80,4 @@ To build a Prometheus binary that includes a compiled-in version of the producti
 
     make build
 
-This installs npm dependencies via Yarn, builds a production build of the React app, and then finally compiles in all web assets into the Prometheus binary.
+This installs dependencies via npm, builds a production build of the React app, and then finally compiles in all web assets into the Prometheus binary.

web/ui/react-app/package.json

@@ -110,5 +110,8 @@
     "transformIgnorePatterns": [
       "/node_modules/(?!codemirror-promql).+(js|jsx)$"
     ]
+  },
+  "optionalDependencies": {
+    "fsevents": "^2.3.2"
   }
 }