UI: Remove old ui (#5145)

* remove old ui

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

* add changelog

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

* update assets

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

CHANGELOG.md

@@ -19,6 +19,7 @@ We use *breaking :warning:* to mark changes that are not backward compatible (re
 
 ### Changed
 
+- [#5145](https://github.com/thanos-io/thanos/pull/5145) UI: Remove old UI.
 - [#5205](https://github.com/thanos-io/thanos/pull/5205) Rule: Add ruler labels as external labels in stateless ruler mode.
 - [#5206](https://github.com/thanos-io/thanos/pull/5206) Cache: add timeout for groupcache's fetch operation.
 - [#5218](https://github.com/thanos-io/thanos/pull/5218) Tools: Run bucket downsample tools continuously.

Makefile

@@ -121,7 +121,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  pkg/ui/static/...
 	@$(MAKE) format
 
 .PHONY: react-app-lint

cmd/thanos/compact.go

@@ -252,14 +252,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, bkt)
 		sy  *compact.Syncer
 	)
@@ -277,7 +269,6 @@ func runCompact(
 			},
 		)
 		cf.UpdateOnChange(func(blocks []metadata.Meta, err error) {
-			compactorView.Set(blocks, err)
 			api.SetLoaded(blocks, err)
 		})
 		sy, err = compact.NewMetaSyncer(
@@ -519,10 +510,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 {
@@ -535,7 +525,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, "component", "globalBucketUI")
 		f.UpdateOnChange(func(blocks []metadata.Meta, err error) {
-			global.Set(blocks, err)
 			api.SetGlobal(blocks, err)
 		})
 

cmd/thanos/store.go

@@ -429,16 +429,15 @@ 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 := 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, bkt)
 		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

@@ -25,7 +25,7 @@ import (
 	"github.com/oklog/run"
 	"github.com/oklog/ulid"
 	"github.com/olekukonko/tablewriter"
-	opentracing "github.com/opentracing/opentracing-go"
+	"github.com/opentracing/opentracing-go"
 	"github.com/pkg/errors"
 	"github.com/prometheus/client_golang/prometheus"
 	"github.com/prometheus/client_golang/prometheus/promauto"
@@ -584,8 +584,8 @@ func registerBucketWeb(app extkingpin.AppClause, objStoreConfig *extflag.PathOrC
 
 		ins := extpromhttp.NewInstrumentationMiddleware(reg, nil)
 
-		bucketUI := ui.NewBucketUI(logger, tbc.label, tbc.webExternalPrefix, tbc.webPrefixHeaderName, "", component.Bucket)
-		bucketUI.Register(router, true, ins)
+		bucketUI := ui.NewBucketUI(logger, tbc.webExternalPrefix, tbc.webPrefixHeaderName, component.Bucket)
+		bucketUI.Register(router, ins)
 
 		flagsMap := getFlagsMap(cmd.Flags())
 
@@ -643,7 +643,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,17 +4,9 @@
 package ui
 
 import (
-	"encoding/json"
-	"html/template"
-	"net/http"
-	"path"
-	"strings"
-	"time"
-
 	"github.com/go-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"
 )
@@ -24,75 +16,24 @@ 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(),
 	}
 
 	tmplFuncs := queryTmplFuncs()
-	// here the uiPrefix is empty because the uiPrefix is injected in the pathPrefix.
-	// Which seems to be the only way to the correct path in the file bucket.html
-	tmplFuncs["uiPrefix"] = func() string { return "" }
 
 	return &Bucket{
-		BaseUI:         NewBaseUI(log.With(logger, "component", "bucketUI"), "bucket_menu.html", tmplFuncs, tmplVariables, externalPrefix, prefixHeader, comp),
-		Blocks:         "[]",
-		Label:          label,
+		BaseUI:         NewBaseUI(log.With(logger, "component", "bucketUI"), tmplFuncs, tmplVariables, externalPrefix, prefixHeader, comp),
 		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) {
+	registerReactApp(r, ins, b.BaseUI)
 }

pkg/ui/query.go

@@ -5,9 +5,6 @@ package ui
 
 import (
 	"html/template"
-	"net/http"
-	"path"
-	"sort"
 	"strings"
 	"time"
 
@@ -41,10 +38,9 @@ func NewQueryUI(logger log.Logger, endpointSet *query.EndpointSet, externalPrefi
 	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, tmplFuncs, tmplVariables, externalPrefix, prefixHeader, component.Query),
 		endpointSet:    endpointSet,
 		externalPrefix: externalPrefix,
 		prefixHeader:   prefixHeader,
@@ -69,74 +65,9 @@ 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.Component][]query.EndpointStatus)
-	for _, status := range q.endpointSet.GetEndpointStatus() {
-		statuses[status.ComponentType] = append(statuses[status.ComponentType], status)
-	}
-
-	sources := make([]component.Component, 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.Component][]query.EndpointStatus
-		Sources []component.Component
-	}{
-		Stores:  statuses,
-		Sources: sources,
-	})
-}