From e8bbe191d41d7556dff07929e0f0449ff845afcb Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Thu, 18 Apr 2024 15:00:27 +0200 Subject: [PATCH] Build both old & new UI into Prometheus, allow choosing via feature flag This keeps the old "react-app" directory in its existing location (to make it easier to merge changes from the main branch), but separates it from the npm workspaces setup. Thus it now needs to be npm-installed/built/linted separately. This is a bit hacky, but should only be needed temporarily, until the old UI can be removed. Signed-off-by: Julius Volz --- .gitignore | 3 +- Makefile | 8 + cmd/prometheus/main.go | 5 +- docs/feature_flags.md | 8 +- scripts/ui_release.sh | 4 +- web/ui/build_ui.sh | 14 +- web/ui/mantine-ui/index.html | 2 +- .../{prometheus-logo.svg => favicon.svg} | 0 web/ui/module/codemirror-promql/package.json | 1 + web/ui/package-lock.json | 688 +- web/ui/react-app/package-lock.json | 24050 ++++++++++++++++ web/ui/react-app/package.json | 14 +- web/web.go | 27 +- 13 files changed, 24675 insertions(+), 149 deletions(-) rename web/ui/mantine-ui/public/{prometheus-logo.svg => favicon.svg} (100%) create mode 100644 web/ui/react-app/package-lock.json diff --git a/.gitignore b/.gitignore index e85d766b0..f4ed7242b 100644 --- a/.gitignore +++ b/.gitignore @@ -22,7 +22,8 @@ benchmark.txt /documentation/examples/remote_storage/example_write_adapter/example_write_adapter npm_licenses.tar.bz2 -/web/ui/static/react +/web/ui/static/react-app +/web/ui/static/mantine-ui /vendor /.build diff --git a/Makefile b/Makefile index ab229f931..f9a02fc28 100644 --- a/Makefile +++ b/Makefile @@ -48,6 +48,10 @@ ui-bump-version: .PHONY: ui-install ui-install: cd $(UI_PATH) && npm install + # The old React app has been separated from the npm workspaces setup to avoid + # issues with conflicting dependencies. This is a temporary solution until the + # new Mantine-based UI is fully integrated and the old app can be removed. + cd $(UI_PATH)/react-app && npm install .PHONY: ui-build ui-build: @@ -64,6 +68,10 @@ ui-test: .PHONY: ui-lint ui-lint: cd $(UI_PATH) && npm run lint + # The old React app has been separated from the npm workspaces setup to avoid + # issues with conflicting dependencies. This is a temporary solution until the + # new Mantine-based UI is fully integrated and the old app can be removed. + cd $(UI_PATH)/react-app && npm run lint .PHONY: assets assets: ui-install ui-build diff --git a/cmd/prometheus/main.go b/cmd/prometheus/main.go index e36665857..05553bfa0 100644 --- a/cmd/prometheus/main.go +++ b/cmd/prometheus/main.go @@ -230,6 +230,9 @@ func (c *flagConfig) setFeatureListOptions(logger log.Logger) error { continue case "promql-at-modifier", "promql-negative-offset": level.Warn(logger).Log("msg", "This option for --enable-feature is now permanently enabled and therefore a no-op.", "option", o) + case "new-ui": + c.web.UseNewUI = true + level.Info(logger).Log("msg", "Serving experimental new web UI.") default: level.Warn(logger).Log("msg", "Unknown option for --enable-feature", "option", o) } @@ -446,7 +449,7 @@ func main() { a.Flag("scrape.discovery-reload-interval", "Interval used by scrape manager to throttle target groups updates."). Hidden().Default("5s").SetValue(&cfg.scrape.DiscoveryReloadInterval) - a.Flag("enable-feature", "Comma separated feature names to enable. Valid options: agent, auto-gomemlimit, exemplar-storage, expand-external-labels, memory-snapshot-on-shutdown, promql-at-modifier, promql-negative-offset, promql-per-step-stats, promql-experimental-functions, remote-write-receiver (DEPRECATED), extra-scrape-metrics, new-service-discovery-manager, auto-gomaxprocs, no-default-scrape-port, native-histograms, otlp-write-receiver. See https://prometheus.io/docs/prometheus/latest/feature_flags/ for more details."). + a.Flag("enable-feature", "Comma separated feature names to enable. Valid options: agent, auto-gomemlimit, exemplar-storage, expand-external-labels, memory-snapshot-on-shutdown, promql-at-modifier, promql-negative-offset, promql-per-step-stats, promql-experimental-functions, remote-write-receiver (DEPRECATED), extra-scrape-metrics, new-service-discovery-manager, auto-gomaxprocs, no-default-scrape-port, native-histograms, otlp-write-receiver, new-ui. See https://prometheus.io/docs/prometheus/latest/feature_flags/ for more details."). Default("").StringsVar(&cfg.featureList) promlogflag.AddFlags(a, &cfg.promlogConfig) diff --git a/docs/feature_flags.md b/docs/feature_flags.md index 04d9ff365..bb75811bb 100644 --- a/docs/feature_flags.md +++ b/docs/feature_flags.md @@ -193,7 +193,7 @@ This should **only** be applied to metrics that currently produce such labels. `--enable-feature=otlp-write-receiver` The OTLP receiver allows Prometheus to accept [OpenTelemetry](https://opentelemetry.io/) metrics writes. -Prometheus is best used as a Pull based system, and staleness, `up` metric, and other Pull enabled features +Prometheus is best used as a Pull based system, and staleness, `up` metric, and other Pull enabled features won't work when you push OTLP metrics. ## Experimental PromQL functions @@ -224,3 +224,9 @@ When the `concurrent-rule-eval` feature flag is enabled, rules without any depen This has the potential to improve rule group evaluation latency and resource utilization at the expense of adding more concurrent query load. The number of concurrent rule evaluations can be configured with `--rules.max-concurrent-rule-evals`, which is set to `4` by default. + +## Experimental new web UI + +Enables the new experimental web UI instead of the old and stable web UI. The new UI is a complete rewrite and aims to be cleaner, less cluttered, and more modern under the hood. It is not feature complete yet and is still under active development. + +`--enable-feature=new-ui` diff --git a/scripts/ui_release.sh b/scripts/ui_release.sh index ea4423d25..c1b872fd3 100755 --- a/scripts/ui_release.sh +++ b/scripts/ui_release.sh @@ -30,8 +30,8 @@ function publish() { cmd+=" --dry-run" fi for workspace in ${workspaces}; do - # package "app" is private so we shouldn't try to publish it. - if [[ "${workspace}" != "react-app" ]]; then + # package "mantine-ui" is private so we shouldn't try to publish it. + if [[ "${workspace}" != "mantine-ui" ]]; then cd "${workspace}" eval "${cmd}" cd "${root_ui_folder}" diff --git a/web/ui/build_ui.sh b/web/ui/build_ui.sh index f0b496efd..62568aaa3 100644 --- a/web/ui/build_ui.sh +++ b/web/ui/build_ui.sh @@ -30,10 +30,19 @@ function buildModule() { } function buildReactApp() { + echo "build react-app" + cd react-app + npm run build + cd .. + rm -rf ./static/react-app + mv ./react-app/build ./static/react-app +} + +function buildMantineUI() { echo "build mantine-ui" npm run build -w @prometheus-io/mantine-ui - rm -rf ./static/react - mv ./mantine-ui/dist ./static/react + rm -rf ./static/mantine-ui + mv ./mantine-ui/dist ./static/mantine-ui } for i in "$@"; do @@ -41,6 +50,7 @@ for i in "$@"; do --all) buildModule buildReactApp + buildMantineUI shift ;; --build-module) diff --git a/web/ui/mantine-ui/index.html b/web/ui/mantine-ui/index.html index f54cf951c..deb5f7f56 100644 --- a/web/ui/mantine-ui/index.html +++ b/web/ui/mantine-ui/index.html @@ -2,7 +2,7 @@ - +