review the UI ci and associated command

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

.circleci/config.yml

@@ -47,30 +47,23 @@ jobs:
       - store_test_results:
           path: test-results
 
-  test_react:
+  test_ui:
     executor: golang
 
     steps:
       - checkout
       - restore_cache:
           keys:
-            - v3-npm-deps-{{ checksum "web/ui/react-app/package-lock.json" }}
+            - v3-npm-deps-{{ checksum "web/ui/package-lock.json" }}
             - v3-npm-deps-
-      - run:
-          command: make react-app-test
+      - run: make ui-install
+      - run: make ui-build-module
+      - run: make ui-test
       - save_cache:
-          key: v3-npm-deps-{{ checksum "web/ui/react-app/package-lock.json" }}
+          key: v3-npm-deps-{{ checksum "web/ui/package-lock.json" }}
           paths:
             - ~/.npm
 
-  test_web_module:
-    executor: golang
-    steps:
-      - checkout
-      - run: make web-module-install
-      - run: make web-module-test
-      - run: make web-module-lint
-
   test_windows:
     executor:
       name: win/default
@@ -135,11 +128,7 @@ workflows:
           filters:
             tags:
               only: /.*/
-      - test_react:
-          filters:
-            tags:
-              only: /.*/
-      - test_web_module:
+      - test_ui:
           filters:
             tags:
               only: /.*/
@@ -165,7 +154,7 @@ workflows:
           context: org-context
           requires:
             - test_go
-            - test_react
+            - test_ui
             - build
           filters:
             branches:
@@ -175,7 +164,7 @@ workflows:
           context: org-context
           requires:
             - test_go
-            - test_react
+            - test_ui
             - build
           filters:
             tags:

Makefile

@@ -14,13 +14,9 @@
 # Needs to be defined before including Makefile.common to auto-generate targets
 DOCKER_ARCHS ?= amd64 armv7 arm64 ppc64le s390x
 
-WEB_MODULE_PATH = web/ui/module
+UI_PATH = web/ui
 REACT_APP_PATH = web/ui/react-app
-REACT_APP_SOURCE_FILES = $(shell find $(REACT_APP_PATH)/public/ $(REACT_APP_PATH)/src/ $(REACT_APP_PATH)/tsconfig.json)
-REACT_APP_OUTPUT_DIR = web/ui/static/react
-REACT_APP_NODE_MODULES_PATH = $(REACT_APP_PATH)/node_modules
 REACT_APP_NPM_LICENSES_TARBALL = "npm_licenses.tar.bz2"
-REACT_APP_BUILD_SCRIPT = ./scripts/build_react_app.sh
 
 PROMTOOL = ./promtool
 TSDB_BENCHMARK_NUM_METRICS ?= 1000
@@ -33,15 +29,28 @@ include Makefile.common
 
 DOCKER_IMAGE_NAME       ?= prometheus
 
-$(REACT_APP_NODE_MODULES_PATH): $(REACT_APP_PATH)/package.json $(REACT_APP_PATH)/package-lock.json
-	cd $(REACT_APP_PATH) && npm ci
+.PHONY: ui-install
+ui-install:
+	cd $(UI_PATH) && npm install
 
-$(REACT_APP_OUTPUT_DIR): $(REACT_APP_NODE_MODULES_PATH) $(REACT_APP_SOURCE_FILES) $(REACT_APP_BUILD_SCRIPT)
-	@echo ">> building React app"
-	@$(REACT_APP_BUILD_SCRIPT)
+.PHONY: ui-build
+ui-build:
+	cd $(UI_PATH) && npm run build
+
+.PHONY: ui-build-module
+ui-build-module:
+	cd $(UI_PATH) && npm run build:module
+
+.PHONY: ui-test
+ui-test:
+	cd $(UI_PATH) && npm run test:coverage
+
+.PHONY: ui-lint
+ui-lint:
+	cd $(UI_PATH) && npm run lint
 
 .PHONY: assets
-assets: web-module-install web-module-build $(REACT_APP_OUTPUT_DIR)
+assets: ui-install ui-build
 	@echo ">> writing assets"
 	# Un-setting GOOS and GOARCH here because the generated Go code is always the same,
 	# but the cached object code is incompatible between architectures and OSes (which
@@ -49,49 +58,22 @@ assets: web-module-install web-module-build $(REACT_APP_OUTPUT_DIR)
 	cd web/ui && GO111MODULE=$(GO111MODULE) GOOS= GOARCH= $(GO) generate -x -v $(GOOPTS)
 	@$(GOFMT) -w ./web/ui
 
-.PHONY: react-app-lint
-react-app-lint:
-	@echo ">> running React app linting"
-	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) && 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) && npm run test --no-watch --coverage
-
-.PHONY: web-module-build
-web-module-build:
-	@cd ${WEB_MODULE_PATH} && ./build.sh --build
-
-.PHONY: web-module-lint
-web-module-lint:
-	@cd ${WEB_MODULE_PATH} && ./build.sh --lint
-
-.PHONY: web-module-test
-web-module-test:
-	@cd ${WEB_MODULE_PATH} && ./build.sh --test
-
-.PHONY: web-module-install
-web-module-install:
-	@cd ${WEB_MODULE_PATH} && ./build.sh --install
-
 .PHONY: test
 # If we only want to only test go code we have to change the test target
 # which is called by all.
 ifeq ($(GO_ONLY),1)
 test: common-test
 else
-test: common-test react-app-test web-module-test web-module-lint
+test: common-test ui-build-module ui-test ui-lint
 endif
 
-
 .PHONY: npm_licenses
-npm_licenses: $(REACT_APP_NODE_MODULES_PATH)
+npm_licenses: ui-install
 	@echo ">> bundling npm licenses"
 	rm -f $(REACT_APP_NPM_LICENSES_TARBALL)
 	find $(REACT_APP_NODE_MODULES_PATH) -iname "license*" | tar cfj $(REACT_APP_NPM_LICENSES_TARBALL) --transform 's/^/npm_licenses\//' --files-from=-

scripts/build_react_app.sh

@@ -1,18 +0,0 @@
-#!/usr/bin/env bash
-#
-# Build React web UI.
-# Run from repository root.
-set -e
-set -u
-
-if ! [[ "$0" =~ "scripts/build_react_app.sh" ]]; then
-	echo "must be run from repository root"
-	exit 255
-fi
-
-cd web/ui/react-app
-
-echo "building React app"
-PUBLIC_URL=. npm run build
-rm -rf ../static/react
-mv build ../static/react

web/ui/build_ui.sh

@@ -0,0 +1,51 @@
+#!/bin/bash
+
+# Copyright 2021 The Prometheus Authors
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+set -e
+current=$(pwd)
+
+buildOrder=(module/codemirror-promql)
+
+function buildModule() {
+  for module in "${buildOrder[@]}"; do
+    cd "${module}"
+    echo "build ${module}"
+    npm run build
+    cd "${current}"
+  done
+}
+
+function buildReactApp() {
+  cd react-app
+  echo "build react-app"
+  npm run build
+  cd "${current}"
+  rm -rf ./static/react
+  mv ./react-app/build ./static/react
+}
+
+for i in "$@"; do
+  case ${i} in
+  --all)
+    buildModule
+    buildReactApp
+    shift
+    ;;
+  --build-module)
+    buildModule
+    shift
+    ;;
+  esac
+done

web/ui/module/build.sh

@@ -1,60 +0,0 @@
-#!/bin/bash
-
-set -e
-
-MODULE_LIST=(codemirror-promql)
-
-build-module() {
-  for module in "${MODULE_LIST[@]}"; do
-    cd "${module}"
-    echo "building ${module}"
-    npm run build
-    cd ../
-  done
-}
-
-lint-module() {
-  for module in "${MODULE_LIST[@]}"; do
-    cd "${module}"
-    echo "running linter for ${module}"
-    npm run lint
-    cd ../
-  done
-}
-
-test-module() {
-  for module in "${MODULE_LIST[@]}"; do
-    cd "${module}"
-    echo "running all tests for ${module}"
-    npm run test
-    cd ../
-  done
-}
-
-install-module(){
-  for module in "${MODULE_LIST[@]}"; do
-    cd "${module}"
-    echo "install deps for ${module}"
-    npm ci
-    cd ../
-  done
-}
-
-for i in "$@"; do
-  case ${i} in
-    --build)
-      build-module
-      shift
-      ;;
-    --lint)
-      lint-module
-      shift
-      ;;
-    --test)
-      test-module
-      ;;
-    --install)
-      install-module
-      ;;
-  esac
-done

web/ui/module/codemirror-promql/.npmignore

@@ -11,3 +11,4 @@
 /.npmignore
 /.gitignore
 /.eslintrc.js
+/.nyc_output

web/ui/module/codemirror-promql/package.json

@@ -9,7 +9,7 @@
     "build:grammar": "lezer-generator src/grammar/promql.grammar -o src/grammar/parser",
     "build:lib": "bash ./build.sh",
     "test": "npm run build:grammar && ts-mocha -p tsconfig.json ./**/*.test.ts",
-    "test-coverage": "npm run build:grammar && nyc ts-mocha -p ./tsconfig.json ./**/*.test.ts",
+    "test:coverage": "npm run build:grammar && nyc ts-mocha -p ./tsconfig.json ./**/*.test.ts",
     "codecov": "nyc report --reporter=text-lcov > coverage.lcov && codecov",
     "lint": "eslint src/ --ext .ts",
     "lint:fix": "eslint --fix src/ --ext .ts"

web/ui/package.json

@@ -2,9 +2,12 @@
   "name": "prometheus",
   "private": true,
   "scripts": {
-    "lint": "npm run lint --workspaces",
+    "build": "bash build_ui.sh --all",
+    "build:module": "bash build_ui.sh --build-module",
     "start": "npm run start -w react-app",
-    "test": "npm run test --workspaces"
+    "test": "npm run test --workspaces",
+    "test:coverage": "npm run test:coverage --workspaces",
+    "lint": "npm run lint --workspaces"
   },
   "workspaces": [
     "react-app",

web/ui/react-app/package.json

@@ -46,6 +46,7 @@
     "start": "craco start",
     "build": "craco build",
     "test": "craco test --runInBand --resetMocks=false",
+    "test:coverage": "craco test --runInBand --resetMocks=false --no-watch --coverage",
     "test:debug": "craco --inspect-brk test --runInBand --no-cache",
     "eject": "craco eject",
     "lint:ci": "eslint --quiet \"src/**/*.{ts,tsx}\"",