update bucket ui to use the react app by default

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

cmd/thanos/compact.go

@@ -481,10 +481,10 @@ func runCompact(
 		r := route.New()
 
 		ins := extpromhttp.NewInstrumentationMiddleware(reg, nil)
-		compactorView.Register(r, true, ins)
+		compactorView.Register(r, ins)
 
 		global := ui.NewBucketUI(logger, conf.label, conf.webConf.externalPrefix, conf.webConf.prefixHeaderName, "/global", component)
-		global.Register(r, false, ins)
+		global.Register(r, ins)
 
 		// Configure Request Logging for HTTP calls.
 		opts := []logging.Option{logging.WithDecider(func(_ string, _ error) logging.Decision {

cmd/thanos/store.go

@@ -417,7 +417,7 @@ func runStore(
 		ins := extpromhttp.NewInstrumentationMiddleware(reg, nil)
 
 		compactorView := ui.NewBucketUI(logger, "", externalPrefix, prefixHeader, "/loaded", component)
-		compactorView.Register(r, true, ins)
+		compactorView.Register(r, ins)
 
 		// Configure Request Logging for HTTP calls.
 		logMiddleware := logging.NewHTTPServerMiddleware(logger, httpLogOpts...)

cmd/thanos/tools_bucket.go

@@ -372,7 +372,7 @@ func registerBucketWeb(app extkingpin.AppClause, objStoreConfig *extflag.PathOrC
 		ins := extpromhttp.NewInstrumentationMiddleware(reg, nil)
 
 		bucketUI := ui.NewBucketUI(logger, *label, *webExternalPrefix, *webPrefixHeaderName, "", component.Bucket)
-		bucketUI.Register(router, true, ins)
+		bucketUI.Register(router, ins)
 
 		flagsMap := getFlagsMap(cmd.Flags())
 

pkg/ui/bucket.go

@@ -48,23 +48,19 @@ func NewBucketUI(logger log.Logger, label, externalPrefix, prefixHeader, uiPrefi
 }
 
 // Register registers http routes for bucket UI.
-func (b *Bucket) Register(r *route.Router, registerNewUI bool, ins extpromhttp.InstrumentationMiddleware) {
-	instrf := func(name string, next func(w http.ResponseWriter, r *http.Request)) http.HandlerFunc {
-		return ins.NewHandler(b.externalPrefix+name, http.HandlerFunc(next))
-	}
-	r.WithPrefix(b.uiPrefix).Get("/", instrf("root", b.root))
-	r.WithPrefix(b.uiPrefix).Get("/static/*filepath", instrf("static", b.serveStaticAsset))
-	if registerNewUI {
-		// Make sure that "<path-prefix>/new" is redirected to "<path-prefix>/new/" and
-		// not just the naked "/new/", which would be the default behavior of the router
-		// with the "RedirectTrailingSlash" option (https://godoc.org/github.com/julienschmidt/httprouter#Router.RedirectTrailingSlash),
-		// and which breaks users with a --web.route-prefix that deviates from the path derived
-		// from the external URL.
-		r.Get("/new", func(w http.ResponseWriter, r *http.Request) {
-			http.Redirect(w, r, path.Join(GetWebPrefix(b.logger, b.externalPrefix, b.prefixHeader, r), "new")+"/", http.StatusFound)
-		})
-		r.Get("/new/*filepath", instrf("react-static", b.serveReactUI))
-	}
+func (b *Bucket) Register(r *route.Router, ins extpromhttp.InstrumentationMiddleware) {
+	r.Get("/", func(w http.ResponseWriter, r *http.Request) {
+		http.Redirect(w, r, path.Join(GetWebPrefix(b.logger, b.externalPrefix, b.prefixHeader, r), "/blocks"), http.StatusFound)
+	})
+	// Redirect the original React UI's path (under "/new") to its new path at the root.
+	r.Get("/new/*path", func(w http.ResponseWriter, r *http.Request) {
+		p := route.Param(r.Context(), "path")
+		http.Redirect(w, r, path.Join(GetWebPrefix(b.logger, b.externalPrefix, b.prefixHeader, r), strings.TrimPrefix(p, "/new"))+"?"+r.URL.RawQuery, http.StatusFound)
+	})
+
+	r.WithPrefix(b.uiPrefix).Get("/classic", instrf("root", ins, b.root))
+	r.WithPrefix(b.uiPrefix).Get("/classic/static/*filepath", instrf("static", ins, b.serveStaticAsset))
+	registerReactApp(r, ins, b.BaseUI)
 }
 
 // Handle / of bucket UIs.

pkg/ui/react-app/src/thanos/Navbar.tsx

@@ -83,7 +83,7 @@ const navConfig: { [component: string]: (NavConfig | NavDropDown)[] } = {
 const defaultClassicUIRoute: { [component: string]: string } = {
   query: '/classic/graph',
   rule: '/classic/alerts',
-  bucket: '/',
+  bucket: '/classic',
   compact: '/classic/loaded',
   store: '/classic/loaded',
 };

pkg/ui/ui.go

@@ -24,6 +24,7 @@ import (
 
 var reactRouterPaths = []string{
 	"/alerts",
+	"/blocks",
 	"/config",
 	"/flags",
 	"/graph",