remove the old ui

CHANGELOG.md

@@ -21,6 +21,7 @@ We use _breaking :warning:_ to mark changes that are not backward compatible (re
 - [#4125](https://github.com/thanos-io/thanos/pull/4125) Rule: Add `--alert.relabel-config` / `--alert.relabel-config-file` allowing to specify alert relabel configurations like [Prometheus](https://prometheus.io/docs/prometheus/latest/configuration/configuration/#relabel_config)
 - [#4211](https://github.com/thanos-io/thanos/pull/4211) Add TLS and basic authentication to Thanos APIs
 - [#4249](https://github.com/thanos-io/thanos/pull/4249) UI: add dark theme
+- [#4163](https://github.com/thanos-io/thanos/pull/4163) Old UI is removed in favor of the react-app.
 
 ### Fixed
 -

Makefile

@@ -100,7 +100,7 @@ assets: $(GO_BINDATA) $(REACT_APP_OUTPUT_DIR)
 	@echo ">> deleting asset file"
 	@rm pkg/ui/bindata.go || true
 	@echo ">> writing assets"
-	@$(GO_BINDATA) $(bindata_flags) -pkg ui -o pkg/ui/bindata.go -ignore '(.*\.map|bootstrap\.js|bootstrap-theme\.css|bootstrap\.css)'  pkg/ui/templates/... pkg/ui/static/...
+	@$(GO_BINDATA) $(bindata_flags) -pkg ui -o pkg/ui/bindata.go -ignore '(.*\.map|bootstrap\.js|bootstrap-theme\.css|bootstrap\.css)'  pkg/ui/static/...
 	@$(MAKE) format
 
 .PHONY: react-app-lint

cmd/thanos/compact.go

@@ -245,14 +245,6 @@ func runCompact(
 		)
 	}
 	var (
-		compactorView = ui.NewBucketUI(
-			logger,
-			conf.label,
-			conf.webConf.externalPrefix,
-			conf.webConf.prefixHeaderName,
-			"/loaded",
-			component,
-		)
 		api = blocksAPI.NewBlocksAPI(logger, conf.webConf.disableCORS, conf.label, flagsMap)
 		sy  *compact.Syncer
 	)
@@ -268,7 +260,6 @@ func runCompact(
 			}, []block.MetadataModifier{block.NewReplicaLabelRemover(logger, conf.dedupReplicaLabels)},
 		)
 		cf.UpdateOnChange(func(blocks []metadata.Meta, err error) {
-			compactorView.Set(blocks, err)
 			api.SetLoaded(blocks, err)
 		})
 		sy, err = compact.NewMetaSyncer(
@@ -482,10 +473,9 @@ func runCompact(
 		r := route.New()
 
 		ins := extpromhttp.NewInstrumentationMiddleware(reg, nil)
-		compactorView.Register(r, true, ins)
 
-		global := ui.NewBucketUI(logger, conf.label, conf.webConf.externalPrefix, conf.webConf.prefixHeaderName, "/global", component)
-		global.Register(r, false, ins)
+		global := ui.NewBucketUI(logger, conf.webConf.externalPrefix, conf.webConf.prefixHeaderName, component)
+		global.Register(r, ins)
 
 		// Configure Request Logging for HTTP calls.
 		opts := []logging.Option{logging.WithDecider(func(_ string, _ error) logging.Decision {
@@ -498,7 +488,6 @@ func runCompact(
 		// TODO(bwplotka): Allow Bucket UI to visualize the state of the block as well.
 		f := baseMetaFetcher.NewMetaFetcher(extprom.WrapRegistererWithPrefix("thanos_bucket_ui", reg), nil, nil, "component", "globalBucketUI")
 		f.UpdateOnChange(func(blocks []metadata.Meta, err error) {
-			global.Set(blocks, err)
 			api.SetGlobal(blocks, err)
 		})
 

cmd/thanos/store.go

@@ -407,16 +407,15 @@ func runStore(
 		r := route.New()
 		ins := extpromhttp.NewInstrumentationMiddleware(reg, nil)
 
-		compactorView := ui.NewBucketUI(logger, "", conf.webConfig.externalPrefix, conf.webConfig.prefixHeaderName, "/loaded", conf.component)
-		compactorView.Register(r, true, ins)
+		compactorView := ui.NewBucketUI(logger, conf.webConfig.externalPrefix, conf.webConfig.prefixHeaderName, conf.component)
+		compactorView.Register(r, ins)
 
 		// Configure Request Logging for HTTP calls.
 		logMiddleware := logging.NewHTTPServerMiddleware(logger, httpLogOpts...)
 		api := blocksAPI.NewBlocksAPI(logger, conf.webConfig.disableCORS, "", flagsMap)
 		api.Register(r.WithPrefix("/api/v1"), tracer, logger, ins, logMiddleware)
 
 		metaFetcher.UpdateOnChange(func(blocks []metadata.Meta, err error) {
-			compactorView.Set(blocks, err)
 			api.SetLoaded(blocks, err)
 		})
 		srv.Handle("/", r)

cmd/thanos/tools_bucket.go

@@ -371,8 +371,8 @@ 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 := ui.NewBucketUI(logger, *webExternalPrefix, *webPrefixHeaderName, component.Bucket)
+		bucketUI.Register(router, ins)
 
 		flagsMap := getFlagsMap(cmd.Flags())
 
@@ -416,7 +416,6 @@ func registerBucketWeb(app extkingpin.AppClause, objStoreConfig *extflag.PathOrC
 			return err
 		}
 		fetcher.UpdateOnChange(func(blocks []metadata.Meta, err error) {
-			bucketUI.Set(blocks, err)
 			api.SetGlobal(blocks, err)
 		})
 

pkg/ui/bucket.go

@@ -4,16 +4,11 @@
 package ui
 
 import (
-	"encoding/json"
-	"html/template"
 	"net/http"
 	"path"
-	"strings"
-	"time"
 
 	"github.com/go-kit/kit/log"
 	"github.com/prometheus/common/route"
-	"github.com/thanos-io/thanos/pkg/block/metadata"
 	"github.com/thanos-io/thanos/pkg/component"
 	extpromhttp "github.com/thanos-io/thanos/pkg/extprom/http"
 )
@@ -23,16 +18,12 @@ type Bucket struct {
 	*BaseUI
 
 	externalPrefix, prefixHeader string
-	uiPrefix                     string
 	// Unique Prometheus label that identifies each shard, used as the title. If
 	// not present, all labels are displayed externally as a legend.
-	Label       string
-	Blocks      template.JS
-	RefreshedAt time.Time
-	Err         error
+	Err error
 }
 
-func NewBucketUI(logger log.Logger, label, externalPrefix, prefixHeader, uiPrefix string, comp component.Component) *Bucket {
+func NewBucketUI(logger log.Logger, externalPrefix, prefixHeader string, comp component.Component) *Bucket {
 	tmplVariables := map[string]string{
 		"Component": comp.String(),
 	}
@@ -44,54 +35,18 @@ func NewBucketUI(logger log.Logger, label, externalPrefix, prefixHeader, uiPrefi
 
 	return &Bucket{
 		BaseUI:         NewBaseUI(log.With(logger, "component", "bucketUI"), "bucket_menu.html", tmplFuncs, tmplVariables, externalPrefix, prefixHeader, comp),
-		Blocks:         "[]",
-		Label:          label,
 		externalPrefix: externalPrefix,
 		prefixHeader:   prefixHeader,
-		uiPrefix:       uiPrefix,
 	}
 }
 
 // Register registers http routes for bucket UI.
-func (b *Bucket) Register(r *route.Router, registerNewUI bool, ins extpromhttp.InstrumentationMiddleware) {
-	classicPrefix := path.Join("/classic", b.uiPrefix)
-	r.WithPrefix(classicPrefix).Get("/", instrf("bucket", ins, b.bucket))
-	r.WithPrefix(classicPrefix).Get("/static/*filepath", instrf("static", ins, b.serveStaticAsset))
-
-	if registerNewUI {
-		// 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")
-			prefix := GetWebPrefix(b.logger, b.externalPrefix, b.prefixHeader, r)
-			http.Redirect(w, r, path.Join("/", prefix, p)+"?"+r.URL.RawQuery, http.StatusFound)
-		})
-
-		registerReactApp(r, ins, b.BaseUI)
-	}
-}
-
-// Handle / of bucket UIs.
-func (b *Bucket) bucket(w http.ResponseWriter, r *http.Request) {
-	classicPrefix := path.Join("/classic", b.uiPrefix)
-	prefix := GetWebPrefix(b.logger, path.Join(b.externalPrefix, strings.TrimPrefix(classicPrefix, "/")), b.prefixHeader, r)
-	b.executeTemplate(w, "bucket.html", prefix, b)
-}
-
-func (b *Bucket) Set(blocks []metadata.Meta, err error) {
-	if err != nil {
-		// Last view is maintained.
-		b.RefreshedAt = time.Now()
-		b.Err = err
-		return
-	}
-
-	data := "[]"
-	dataB, err := json.Marshal(blocks)
-	if err == nil {
-		data = string(dataB)
-	}
-
-	b.RefreshedAt = time.Now()
-	b.Blocks = template.JS(data)
-	b.Err = err
+func (b *Bucket) Register(r *route.Router, ins extpromhttp.InstrumentationMiddleware) {
+	// 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")
+		prefix := GetWebPrefix(b.logger, b.externalPrefix, b.prefixHeader, r)
+		http.Redirect(w, r, path.Join("/", prefix, p)+"?"+r.URL.RawQuery, http.StatusFound)
+	})
+	registerReactApp(r, ins, b.BaseUI)
 }

pkg/ui/query.go

@@ -7,7 +7,6 @@ import (
 	"html/template"
 	"net/http"
 	"path"
-	"sort"
 	"strings"
 	"time"
 
@@ -38,11 +37,8 @@ func NewQueryUI(logger log.Logger, storeSet *query.StoreSet, externalPrefix, pre
 	}
 	runtimeInfo := api.GetRuntimeInfoFunc(logger)
 
-	tmplFuncs := queryTmplFuncs()
-	tmplFuncs["uiPrefix"] = func() string { return "/classic" }
-
 	return &Query{
-		BaseUI:         NewBaseUI(logger, "query_menu.html", tmplFuncs, tmplVariables, externalPrefix, prefixHeader, component.Query),
+		BaseUI:         NewBaseUI(logger, "query_menu.html", queryTmplFuncs(), tmplVariables, externalPrefix, prefixHeader, component.Query),
 		storeSet:       storeSet,
 		externalPrefix: externalPrefix,
 		prefixHeader:   prefixHeader,
@@ -67,74 +63,15 @@ func queryTmplFuncs() template.FuncMap {
 
 // Register registers new GET routes for subpages and redirects from / to /graph.
 func (q *Query) Register(r *route.Router, ins extpromhttp.InstrumentationMiddleware) {
-	r.Get("/classic/", func(w http.ResponseWriter, r *http.Request) {
-		http.Redirect(w, r, path.Join("/", GetWebPrefix(q.logger, q.externalPrefix, q.prefixHeader, r), "/classic/graph"), 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(q.logger, q.externalPrefix, q.prefixHeader, r), p)+"?"+r.URL.RawQuery, http.StatusFound)
 	})
 
-	r.Get("/classic/graph", instrf("graph", ins, q.graph))
-	r.Get("/classic/stores", instrf("stores", ins, q.stores))
-	r.Get("/classic/status", instrf("status", ins, q.status))
-	r.Get("/classic/static/*filepath", instrf("static", ins, q.serveStaticAsset))
-
 	registerReactApp(r, ins, q.BaseUI)
 
 	// TODO(bplotka): Consider adding more Thanos related data e.g:
 	// - What store nodes we see currently.
 	// - What sidecars we see currently.
 }
-
-func (q *Query) graph(w http.ResponseWriter, r *http.Request) {
-	prefix := GetWebPrefix(q.logger, q.externalPrefix, q.prefixHeader, r)
-
-	q.executeTemplate(w, "graph.html", prefix, nil)
-}
-
-func (q *Query) status(w http.ResponseWriter, r *http.Request) {
-	prefix := GetWebPrefix(q.logger, q.externalPrefix, q.prefixHeader, r)
-
-	q.executeTemplate(w, "status.html", prefix, struct {
-		Birth   time.Time
-		CWD     string
-		Version api.ThanosVersion
-	}{
-		Birth:   q.birth,
-		CWD:     q.cwd,
-		Version: q.version,
-	})
-}
-
-func (q *Query) stores(w http.ResponseWriter, r *http.Request) {
-	prefix := GetWebPrefix(q.logger, q.externalPrefix, q.prefixHeader, r)
-	statuses := make(map[component.StoreAPI][]query.StoreStatus)
-	for _, status := range q.storeSet.GetStoreStatus() {
-		statuses[status.StoreType] = append(statuses[status.StoreType], status)
-	}
-
-	sources := make([]component.StoreAPI, 0, len(statuses))
-	for k := range statuses {
-		sources = append(sources, k)
-	}
-	sort.Slice(sources, func(i int, j int) bool {
-		if sources[i] == nil {
-			return false
-		}
-		if sources[j] == nil {
-			return true
-		}
-		return sources[i].String() < sources[j].String()
-	})
-
-	q.executeTemplate(w, "stores.html", prefix, struct {
-		Stores  map[component.StoreAPI][]query.StoreStatus
-		Sources []component.StoreAPI
-	}{
-		Stores:  statuses,
-		Sources: sources,
-	})
-}

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

@@ -76,9 +76,6 @@ const Navigation: FC<PathPrefixProps & NavbarProps> = ({ pathPrefix, consolesLin
           <NavItem>
             <NavLink href="https://prometheus.io/docs/prometheus/latest/getting_started/">Help</NavLink>
           </NavItem>
-          <NavItem>
-            <NavLink href={`${pathPrefix}/classic/graph${window.location.search}`}>Classic UI</NavLink>
-          </NavItem>
         </Nav>
       </Collapse>
       <ThemeToggle />

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

@@ -84,14 +84,6 @@ const navConfig: { [component: string]: (NavConfig | NavDropDown)[] } = {
   ],
 };
 
-const defaultClassicUIRoute: { [component: string]: string } = {
-  query: '/classic/graph',
-  rule: '/classic/alerts',
-  bucket: '/classic',
-  compact: '/classic/loaded',
-  store: '/classic/loaded',
-};
-
 interface NavigationProps {
   thanosComponent: string;
   defaultRoute: string;
@@ -137,11 +129,6 @@ const Navigation: FC<PathPrefixProps & NavigationProps> = ({ pathPrefix, thanosC
           <NavItem>
             <NavLink href="https://thanos.io/tip/thanos/getting-started.md/">Help</NavLink>
           </NavItem>
-          <NavItem>
-            <NavLink href={`${pathPrefix}${defaultClassicUIRoute[thanosComponent]}${window.location.search}`}>
-              Classic UI
-            </NavLink>
-          </NavItem>
         </Nav>
       </Collapse>
       <ThemeToggle />