From 3470ee1fbf9d424784eb2613bab5ab0f14b4d222 Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Tue, 3 Nov 2020 14:51:48 +0100 Subject: [PATCH] Make React UI the default, keep old UI under /classic (#8142) The React app's assets are now served under /assets, while all old custom web assets (including the ones for console templates) are now served from /classic/static. I tested different combinations of --web.external-url and --web.route-prefix with proxies in front, and I couldn't find a problem yet with the routing. Console templates also still work. While migrating old endpoints to /classic, I noticed that /version was being treated like a lot of the old UI pages, with readiness check handler in front of it, etc. I kept it in /version and removed that readiness wrapper, since it doesn't seem to be needed for that endpoint. Signed-off-by: Julius Volz --- Makefile | 11 +- console_libraries/prom.lib | 22 ++-- docs/configuration/template_reference.md | 2 +- web/ui/react-app/src/Navbar.tsx | 2 +- web/ui/react-app/src/constants/constants.tsx | 2 +- .../src/pages/targets/ScrapePoolList.test.tsx | 6 +- .../src/pages/tsdbStatus/TSDBStatus.test.tsx | 2 +- .../static/js/graph/graph_template.handlebar | 4 +- web/ui/static/js/graph/index.js | 2 +- web/ui/static/js/prom_console.js | 6 +- web/ui/templates/_base.html | 35 +++--- web/ui/templates/alerts.html | 6 +- web/ui/templates/graph.html | 32 ++--- web/ui/templates/rules.html | 4 +- web/ui/templates/service-discovery.html | 4 +- web/ui/templates/targets.html | 4 +- web/web.go | 112 ++++++++++-------- web/web_test.go | 40 +++---- 18 files changed, 150 insertions(+), 146 deletions(-) diff --git a/Makefile b/Makefile index 810f7e460..0d2428773 100644 --- a/Makefile +++ b/Makefile @@ -15,10 +15,11 @@ DOCKER_ARCHS ?= amd64 armv7 arm64 ppc64le s390x REACT_APP_PATH = web/ui/react-app -REACT_APP_SOURCE_FILES = $(wildcard $(REACT_APP_PATH)/public/* $(REACT_APP_PATH)/src/* $(REACT_APP_PATH)/tsconfig.json) +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 @@ -32,9 +33,9 @@ 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_OUTPUT_DIR): $(REACT_APP_NODE_MODULES_PATH) $(REACT_APP_SOURCE_FILES) +$(REACT_APP_OUTPUT_DIR): $(REACT_APP_NODE_MODULES_PATH) $(REACT_APP_SOURCE_FILES) $(REACT_APP_BUILD_SCRIPT) @echo ">> building React app" - @./scripts/build_react_app.sh + @$(REACT_APP_BUILD_SCRIPT) .PHONY: assets assets: $(REACT_APP_OUTPUT_DIR) @@ -46,12 +47,12 @@ assets: $(REACT_APP_OUTPUT_DIR) @$(GOFMT) -w ./web/ui .PHONY: react-app-lint -react-app-lint: +react-app-lint: @echo ">> running React app linting" cd $(REACT_APP_PATH) && yarn lint:ci .PHONY: react-app-lint-fix -react-app-lint-fix: +react-app-lint-fix: @echo ">> running React app linting and fixing errors where possible" cd $(REACT_APP_PATH) && yarn lint diff --git a/console_libraries/prom.lib b/console_libraries/prom.lib index 3efbf3647..d7d436f94 100644 --- a/console_libraries/prom.lib +++ b/console_libraries/prom.lib @@ -1,21 +1,21 @@ {{/* vim: set ft=html: */}} {{/* Load Prometheus console library JS/CSS. Should go in */}} {{ define "prom_console_head" }} - - - - - - - - - - + + + + + + + + + + - + {{ end }} {{/* Top of all pages. */}} diff --git a/docs/configuration/template_reference.md b/docs/configuration/template_reference.md index c1a7e378f..49a1e412f 100644 --- a/docs/configuration/template_reference.md +++ b/docs/configuration/template_reference.md @@ -73,7 +73,7 @@ versions. | match | pattern, text | boolean | [regexp.MatchString](https://golang.org/pkg/regexp/#MatchString) Tests for a unanchored regexp match. | | reReplaceAll | pattern, replacement, text | string | [Regexp.ReplaceAllString](https://golang.org/pkg/regexp/#Regexp.ReplaceAllString) Regexp substitution, unanchored. | | graphLink | expr | string | Returns path to graph view in the [expression browser](https://prometheus.io/docs/visualization/browser/) for the expression. | -| tableLink | expr | string | Returns path to tabular ("Console") view in the [expression browser](https://prometheus.io/docs/visualization/browser/) for the expression. | +| tableLink | expr | string | Returns path to tabular ("Table") view in the [expression browser](https://prometheus.io/docs/visualization/browser/) for the expression. | ### Others diff --git a/web/ui/react-app/src/Navbar.tsx b/web/ui/react-app/src/Navbar.tsx index a425c33cb..2546f76d1 100644 --- a/web/ui/react-app/src/Navbar.tsx +++ b/web/ui/react-app/src/Navbar.tsx @@ -77,7 +77,7 @@ const Navigation: FC = ({ consolesLink }) => { Help - Classic UI + Classic UI diff --git a/web/ui/react-app/src/constants/constants.tsx b/web/ui/react-app/src/constants/constants.tsx index 5f0d8b9b4..0741fd946 100644 --- a/web/ui/react-app/src/constants/constants.tsx +++ b/web/ui/react-app/src/constants/constants.tsx @@ -1 +1 @@ -export const API_PATH = '../api/v1'; +export const API_PATH = 'api/v1'; diff --git a/web/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx b/web/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx index c46dbfc08..b5ed839a5 100644 --- a/web/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx +++ b/web/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx @@ -43,7 +43,7 @@ describe('ScrapePoolList', () => { ); }); scrapePoolList.update(); - expect(mock).toHaveBeenCalledWith('/path/prefix/../api/v1/targets?state=active', { + expect(mock).toHaveBeenCalledWith('/path/prefix/api/v1/targets?state=active', { cache: 'no-store', credentials: 'same-origin', }); @@ -69,7 +69,7 @@ describe('ScrapePoolList', () => { ); }); scrapePoolList.update(); - expect(mock).toHaveBeenCalledWith('/path/prefix/../api/v1/targets?state=active', { + expect(mock).toHaveBeenCalledWith('/path/prefix/api/v1/targets?state=active', { cache: 'no-store', credentials: 'same-origin', }); @@ -92,7 +92,7 @@ describe('ScrapePoolList', () => { }); scrapePoolList.update(); - expect(mock).toHaveBeenCalledWith('/path/prefix/../api/v1/targets?state=active', { + expect(mock).toHaveBeenCalledWith('/path/prefix/api/v1/targets?state=active', { cache: 'no-store', credentials: 'same-origin', }); diff --git a/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.test.tsx b/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.test.tsx index e7467c3ec..f8e360f4d 100644 --- a/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.test.tsx +++ b/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.test.tsx @@ -75,7 +75,7 @@ describe('TSDB Stats', () => { }); page.update(); - expect(mock).toHaveBeenCalledWith('/path/prefix/../api/v1/status/tsdb', { + expect(mock).toHaveBeenCalledWith('/path/prefix/api/v1/status/tsdb', { cache: 'no-store', credentials: 'same-origin', }); diff --git a/web/ui/static/js/graph/graph_template.handlebar b/web/ui/static/js/graph/graph_template.handlebar index 8f27bdda5..b77cc334c 100644 --- a/web/ui/static/js/graph/graph_template.handlebar +++ b/web/ui/static/js/graph/graph_template.handlebar @@ -6,10 +6,10 @@
- +
-
+