Add feature to build and enable UI V2

.github/workflows/ci.yml

@@ -4,15 +4,15 @@ on:  # yamllint disable-line rule:truthy
   pull_request:
   workflow_call:
 jobs:
-  test_frontend:
+  test_elm_frontend:
     name: Test alertmanager frontend
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - run: make clean
       - run: make all
         working-directory: ./ui/app
-      - run: make assets
+      - run: make elm-assets
       - run: make apiv2
       - run: git diff --exit-code
 

.gitignore

@@ -8,6 +8,9 @@
 /.tarballs
 /vendor
 
+# Static assets for UI
+/ui/static
+
 !.golangci.yml
 !/cli/testdata/*.yml
 !/cli/config/testdata/*.yml

.promu.yml

@@ -13,7 +13,9 @@ build:
     tags:
         all:
             - netgo
-        windows: []
+            - builtinassets
+        windows:
+            - builtinassets
     ldflags: |
         -X github.com/prometheus/common/version.Version={{.Version}}
         -X github.com/prometheus/common/version.Revision={{.Revision}}

Makefile

@@ -1,4 +1,4 @@
-# Copyright 2015 The Prometheus Authors
+# Copyright 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
@@ -16,6 +16,9 @@ DOCKER_ARCHS ?= amd64 armv7 arm64 ppc64le s390x
 
 include Makefile.common
 
+UI_PATH = ui
+MANTINE_PATH = $(UI_PATH)/mantine-ui
+# deprecated, use UI_PATH instead
 FRONTEND_DIR             = $(BIN_DIR)/ui/app
 TEMPLATE_DIR             = $(BIN_DIR)/template
 DOCKER_IMAGE_NAME       ?= alertmanager
@@ -27,13 +30,34 @@ STATICCHECK_IGNORE =
 build-all: assets apiv2 build
 
 .PHONY: build
-build: common-build
+build: assets-compress common-build
 
 .PHONY: lint
 lint: common-lint
 
+.PHONY: ui-install
+ui-install:
+	cd $(MANTINE_PATH) && npm install
+
+.PHONY: ui-build
+ui-build:
+	cd $(UI_PATH) && bash ./build_ui.sh
+
+.PHONY: ui-lint
+ui-lint:
+	cd $(MANTINE_PATH) && npm run lint
+
 .PHONY: assets
-assets: asset/assets_vfsdata.go
+assets: ui-install ui-build
+
+.PHONY: assets-compress
+assets-compress: assets
+	- @echo '>> compressing assets'
+	- scripts/compress_assets.sh
+
+# This target is used in CI to generate the Go file with the embedded elm UI assets.
+.PHONY: elm-assets
+elm-assets: asset/assets_vfsdata.go
 
 .PHONY: assets-tarball
 assets-tarball: ui/app/script.js ui/app/index.html

cmd/alertmanager/main.go

@@ -589,7 +589,7 @@ func run() int {
 
 	webReload := make(chan chan error)
 
-	ui.Register(router, webReload, logger)
+	ui.Register(router, webReload, logger, ff.EnableUIV2())
 
 	mux := api.Register(router, *routePrefix)
 

featurecontrol/featurecontrol.go

@@ -1,4 +1,4 @@
-// Copyright 2023 Prometheus Team
+// Copyright 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
@@ -27,6 +27,7 @@ const (
 	FeatureUTF8StrictMode        = "utf8-strict-mode"
 	FeatureAutoGOMEMLIMIT        = "auto-gomemlimit"
 	FeatureAutoGOMAXPROCS        = "auto-gomaxprocs"
+	FeatureUIV2                  = "ui-v2"
 )
 
 var AllowedFlags = []string{
@@ -36,6 +37,7 @@ var AllowedFlags = []string{
 	FeatureUTF8StrictMode,
 	FeatureAutoGOMEMLIMIT,
 	FeatureAutoGOMAXPROCS,
+	FeatureUIV2,
 }
 
 type Flagger interface {
@@ -45,6 +47,7 @@ type Flagger interface {
 	UTF8StrictMode() bool
 	EnableAutoGOMEMLIMIT() bool
 	EnableAutoGOMAXPROCS() bool
+	EnableUIV2() bool
 }
 
 type Flags struct {
@@ -55,6 +58,7 @@ type Flags struct {
 	utf8StrictMode               bool
 	enableAutoGOMEMLIMIT         bool
 	enableAutoGOMAXPROCS         bool
+	enableUIV2                   bool
 }
 
 func (f *Flags) EnableAlertNamesInMetrics() bool {
@@ -81,6 +85,10 @@ func (f *Flags) EnableAutoGOMAXPROCS() bool {
 	return f.enableAutoGOMAXPROCS
 }
 
+func (f *Flags) EnableUIV2() bool {
+	return f.enableUIV2
+}
+
 type flagOption func(flags *Flags)
 
 func enableReceiverNameInMetrics() flagOption {
@@ -119,6 +127,12 @@ func enableAlertNamesInMetrics() flagOption {
 	}
 }
 
+func enableUIV2() flagOption {
+	return func(configs *Flags) {
+		configs.enableUIV2 = true
+	}
+}
+
 func NewFlags(logger *slog.Logger, features string) (Flagger, error) {
 	fc := &Flags{logger: logger}
 	opts := []flagOption{}
@@ -147,6 +161,9 @@ func NewFlags(logger *slog.Logger, features string) (Flagger, error) {
 		case FeatureAutoGOMAXPROCS:
 			opts = append(opts, enableAutoGOMAXPROCS())
 			logger.Warn("Automatically set GOMAXPROCS to match Linux container CPU quota")
+		case FeatureUIV2:
+			opts = append(opts, enableUIV2())
+			logger.Warn("Enable the new UI (UIv2) and disable the old UI (UIv1)")
 		default:
 			return nil, fmt.Errorf("unknown option '%s' for --enable-feature", feature)
 		}
@@ -176,3 +193,5 @@ func (n NoopFlags) UTF8StrictMode() bool { return false }
 func (n NoopFlags) EnableAutoGOMEMLIMIT() bool { return false }
 
 func (n NoopFlags) EnableAutoGOMAXPROCS() bool { return false }
+
+func (n NoopFlags) EnableUIV2() bool { return false }

go.mod

@@ -35,6 +35,7 @@ require (
 	github.com/oklog/ulid/v2 v2.1.1
 	github.com/prometheus/client_golang v1.23.2
 	github.com/prometheus/common v0.67.5
+	github.com/prometheus/common/assets v0.2.0
 	github.com/prometheus/exporter-toolkit v0.15.1
 	github.com/prometheus/sigv4 v0.4.0
 	github.com/rs/cors v1.11.1

go.sum

@@ -503,6 +503,8 @@ github.com/prometheus/common v0.10.0/go.mod h1:Tlit/dnDKsSWFlCLTWaA1cyBgKHSMdTB8
 github.com/prometheus/common v0.26.0/go.mod h1:M7rCNAaPfAosfx8veZJCuw84e35h3Cfd9VFqTh1DIvc=
 github.com/prometheus/common v0.67.5 h1:pIgK94WWlQt1WLwAC5j2ynLaBRDiinoAb86HZHTUGI4=
 github.com/prometheus/common v0.67.5/go.mod h1:SjE/0MzDEEAyrdr5Gqc6G+sXI67maCxzaT3A2+HqjUw=
+github.com/prometheus/common/assets v0.2.0 h1:0P5OrzoHrYBOSM1OigWL3mY8ZvV2N4zIE/5AahrSrfM=
+github.com/prometheus/common/assets v0.2.0/go.mod h1:D17UVUE12bHbim7HzwUvtqm6gwBEaDQ0F+hIGbFbccI=
 github.com/prometheus/exporter-toolkit v0.15.1 h1:XrGGr/qWl8Gd+pqJqTkNLww9eG8vR/CoRk0FubOKfLE=
 github.com/prometheus/exporter-toolkit v0.15.1/go.mod h1:P/NR9qFRGbCFgpklyhix9F6v6fFr/VQB/CVsrMDGKo4=
 github.com/prometheus/procfs v0.0.0-20181005140218-185b4288413d/go.mod h1:c3At6R/oaqEKCNdg8wHV1ftS6bRYblBhIjjI8uT2IGk=

scripts/compress_assets.sh

@@ -0,0 +1,46 @@
+#!/usr/bin/env bash
+
+# Copyright 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 -euo pipefail
+
+export STATIC_DIR=static
+PREBUILT_ASSETS_STATIC_DIR=${PREBUILT_ASSETS_STATIC_DIR:-}
+if [ -n "$PREBUILT_ASSETS_STATIC_DIR" ]; then
+    STATIC_DIR=$(realpath $PREBUILT_ASSETS_STATIC_DIR)
+fi
+
+cd ui
+cp embed.go.tmpl embed.go
+
+GZIP_OPTS="-fkn"
+# gzip option '-k' may not always exist in the latest gzip available on different distros.
+if ! gzip -k -h &>/dev/null; then GZIP_OPTS="-fn"; fi
+
+mkdir -p static
+find static -type f -name '*.gz' -delete
+
+# Compress files from the prebuilt static directory and replicate the structure in the current static directory
+find "${STATIC_DIR}" -type f ! -name '*.gz' -exec bash -c '
+    for file; do
+        dest="${file#${STATIC_DIR}}"
+        mkdir -p "static/$(dirname "$dest")"
+        gzip '"$GZIP_OPTS"' "$file" -c > "static/${dest}.gz"
+    done
+' bash {} +
+
+# Append the paths of gzipped files to embed.go
+find static -type f -name '*.gz' -print0 | sort -z | xargs -0 echo //go:embed >> embed.go
+
+echo var EmbedFS embed.FS >> embed.go

ui/.gitignore

@@ -0,0 +1,2 @@
+*.gz
+embed.go

ui/assets_embed.go

@@ -0,0 +1,24 @@
+// Copyright 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.
+
+//go:build builtinassets
+
+package ui
+
+import (
+	"net/http"
+
+	"github.com/prometheus/common/assets"
+)
+
+var Assets = http.FS(assets.New(EmbedFS))

ui/build_ui.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+
+# Copyright 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
+
+if ! [[ -w  $HOME ]]
+then
+  export npm_config_cache=$(mktemp -d)
+fi
+
+assetsDir="./static"
+
+function buildMantineUI() {
+  echo "build mantine-ui"
+  (cd mantine-ui && npm run build)
+  mkdir -p ${assetsDir}
+  rm -rf ${assetsDir}/mantine-ui
+  mv ./mantine-ui/dist ${assetsDir}/mantine-ui
+}
+
+buildMantineUI

ui/embed.go.tmpl

@@ -0,0 +1,18 @@
+// Copyright 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.
+
+//go:build builtinassets
+
+package ui
+
+import "embed"

ui/mantine-ui/package.json

@@ -20,7 +20,9 @@
     "@mantine/code-highlight": "^8.3.14",
     "@mantine/core": "^8.3.13",
     "@mantine/hooks": "^8.3.13",
+    "@tabler/icons-react": "^3.36.1",
     "@tanstack/react-query": "^5.90.20",
+    "dayjs": "^1.11.19",
     "highlight.js": "^11.11.1",
     "react": "^19.1.0",
     "react-dom": "^19.2.4",

ui/mantine-ui/src/components/Header.module.css

@@ -1,3 +1,9 @@
+.header {
+  background-color: rgb(65, 73, 81);
+  color: #fff;
+  border-bottom: 1px solid var(--mantine-color-gray-6);
+}
+
 .navMain {
   flex: 1;
 }