From 27aec919146f868fcef7bf962c72cc296bb8fe5d Mon Sep 17 00:00:00 2001 From: Augustin Husson Date: Fri, 10 Sep 2021 16:27:23 +0200 Subject: [PATCH] review the UI ci and associated command Signed-off-by: Augustin Husson --- .circleci/config.yml | 29 +++------ Makefile | 62 +++++++------------- scripts/build_react_app.sh | 18 ------ web/ui/build_ui.sh | 51 ++++++++++++++++ web/ui/module/build.sh | 60 ------------------- web/ui/module/codemirror-promql/.npmignore | 1 + web/ui/module/codemirror-promql/package.json | 2 +- web/ui/package.json | 7 ++- web/ui/react-app/package.json | 1 + 9 files changed, 90 insertions(+), 141 deletions(-) delete mode 100755 scripts/build_react_app.sh create mode 100644 web/ui/build_ui.sh delete mode 100755 web/ui/module/build.sh diff --git a/.circleci/config.yml b/.circleci/config.yml index 4ef588110..11ae98129 100644 --- a/.circleci/config.yml +++ b/.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: diff --git a/Makefile b/Makefile index b582d34b8..0322cd6f9 100644 --- a/Makefile +++ b/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=- diff --git a/scripts/build_react_app.sh b/scripts/build_react_app.sh deleted file mode 100755 index 08042a8aa..000000000 --- a/scripts/build_react_app.sh +++ /dev/null @@ -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 diff --git a/web/ui/build_ui.sh b/web/ui/build_ui.sh new file mode 100644 index 000000000..90b08fd42 --- /dev/null +++ b/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 diff --git a/web/ui/module/build.sh b/web/ui/module/build.sh deleted file mode 100755 index b289a3ae9..000000000 --- a/web/ui/module/build.sh +++ /dev/null @@ -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 diff --git a/web/ui/module/codemirror-promql/.npmignore b/web/ui/module/codemirror-promql/.npmignore index d90bdf5e3..b0ff5f28f 100644 --- a/web/ui/module/codemirror-promql/.npmignore +++ b/web/ui/module/codemirror-promql/.npmignore @@ -11,3 +11,4 @@ /.npmignore /.gitignore /.eslintrc.js +/.nyc_output diff --git a/web/ui/module/codemirror-promql/package.json b/web/ui/module/codemirror-promql/package.json index 60bccbe03..222eee4bb 100644 --- a/web/ui/module/codemirror-promql/package.json +++ b/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" diff --git a/web/ui/package.json b/web/ui/package.json index a49096983..7f4f4c014 100644 --- a/web/ui/package.json +++ b/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", diff --git a/web/ui/react-app/package.json b/web/ui/react-app/package.json index fe6f8f528..91e43341a 100644 --- a/web/ui/react-app/package.json +++ b/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}\"",