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

@@ -407,7 +407,7 @@ func runStore(
 		ins := extpromhttp.NewInstrumentationMiddleware(reg, nil)
 
 		compactorView := ui.NewBucketUI(logger, "", conf.webConfig.externalPrefix, conf.webConfig.prefixHeaderName, "/loaded", conf.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,28 +48,33 @@ 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) {
+	redirectPath := "/blocks"
+	if len(b.uiPrefix) > 0 {
+		redirectPath = b.uiPrefix
 	}
+	r.Get("/", func(w http.ResponseWriter, r *http.Request) {
+		http.Redirect(w, r, path.Join(GetWebPrefix(b.logger, b.externalPrefix, b.prefixHeader, r), redirectPath), 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)
+	})
+
+	// here we have two routes that serve the same document. It's because it depends where do we come from.
+	// If we are coming from the new UI, it will use the first route.
+	// If we are coming from the old UI, it will use the second route.
+	r.Get(path.Join("/classic", b.uiPrefix), instrf("bucket", ins, b.bucket))
+	r.WithPrefix(b.uiPrefix).Get("/classic", instrf("bucket", ins, b.bucket))
+	r.WithPrefix(b.uiPrefix).Get("/classic/static/*filepath", instrf("static", ins, b.serveStaticAsset))
+	registerReactApp(r, ins, b.BaseUI)
 }
 
 // Handle / of bucket UIs.
-func (b *Bucket) root(w http.ResponseWriter, r *http.Request) {
-	b.executeTemplate(w, "bucket.html", GetWebPrefix(b.logger, path.Join(b.externalPrefix, strings.TrimPrefix(b.uiPrefix, "/")), b.prefixHeader, r), b)
+func (b *Bucket) bucket(w http.ResponseWriter, r *http.Request) {
+	prefix := GetWebPrefix(b.logger, path.Join(b.externalPrefix, strings.TrimPrefix(b.uiPrefix, "/")), b.prefixHeader, r)
+	b.executeTemplate(w, "bucket.html", prefix, b)
 }
 
 func (b *Bucket) Set(blocks []metadata.Meta, err error) {

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

@@ -86,7 +86,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,9 +24,12 @@ import (
 
 var reactRouterPaths = []string{
 	"/alerts",
+	"/blocks",
 	"/config",
 	"/flags",
+	"/global",
 	"/graph",
+	"/loaded",
 	"/rules",
 	"/service-discovery",
 	"/status",