Render template for /memberlist endpoint (#3937)

* Render template for /memberlist endpoint

* Add missing file

cmd/tempo/app/config.go

@@ -114,6 +114,7 @@ func (c *Config) RegisterFlagsAndApplyDefaults(prefix string, f *flag.FlagSet) {
 
 	f.Var(&c.MemberlistKV.JoinMembers, "memberlist.host-port", "Host port to connect to memberlist cluster.")
 	f.IntVar(&c.MemberlistKV.TCPTransport.BindPort, "memberlist.bind-port", 7946, "Port for memberlist to communicate on")
+	f.IntVar(&c.MemberlistKV.MessageHistoryBufferBytes, "memberlist.message-history-buffer-bytes", 0, "")
 
 	// Everything else
 	flagext.DefaultValues(&c.IngesterClient)

cmd/tempo/app/memberlist.go

@@ -0,0 +1,24 @@
+package app
+
+import (
+	_ "embed"
+	"html/template"
+	"net/http"
+	"path"
+	"strings"
+
+	"github.com/grafana/dskit/kv/memberlist"
+)
+
+//go:embed memberlist_status.gohtml
+var memberlistStatusPageHTML string
+
+func memberlistStatusHandler(httpPathPrefix string, kvs *memberlist.KVInitService) http.Handler {
+	templ := template.New("memberlist_status")
+	templ.Funcs(map[string]interface{}{
+		"AddPathPrefix": func(link string) string { return path.Join(httpPathPrefix, link) },
+		"StringsJoin":   strings.Join,
+	})
+	template.Must(templ.Parse(memberlistStatusPageHTML))
+	return memberlist.NewHTTPStatusHandler(kvs, templ)
+}

cmd/tempo/app/modules.go

@@ -2,6 +2,7 @@ package app
 
 import (
 	"context"
+	"embed"
 	"errors"
 	"fmt"
 	"io"
@@ -422,10 +423,15 @@ func (t *App) initQueryFrontend() (services.Service, error) {
 	// http endpoint to see usage stats data
 	t.Server.HTTPRouter().Handle(addHTTPAPIPrefix(&t.cfg, api.PathUsageStats), usageStatsHandler(t.cfg.UsageReport))
 
+	t.Server.HTTPRouter().PathPrefix("/static/").HandlerFunc(http.FileServer(http.FS(staticFiles)).ServeHTTP).Methods("GET")
+
 	// todo: queryFrontend should implement service.Service and take the cortex frontend a submodule
 	return t.frontend, nil
 }
 
+//go:embed static
+var staticFiles embed.FS
+
 func (t *App) initCompactor() (services.Service, error) {
 	if t.cfg.Target == ScalableSingleBinary && t.cfg.Compactor.ShardingRing.KVStore.Store == "" {
 		t.cfg.Compactor.ShardingRing.KVStore.Store = "memberlist"
@@ -488,7 +494,7 @@ func (t *App) initMemberlistKV() (services.Service, error) {
 	t.cfg.Distributor.DistributorRing.KVStore.MemberlistKV = t.MemberlistKV.GetMemberlistKV
 	t.cfg.Compactor.ShardingRing.KVStore.MemberlistKV = t.MemberlistKV.GetMemberlistKV
 
-	t.Server.HTTPRouter().Handle("/memberlist", t.MemberlistKV)
+	t.Server.HTTPRouter().Handle("/memberlist", memberlistStatusHandler("", t.MemberlistKV))
 
 	return t.MemberlistKV, nil
 }

cmd/tempo/app/static/tempo-styles.css

@@ -0,0 +1,38 @@
+a {
+    color: #2864bb;
+    text-decoration: none;
+}
+
+a:hover, a:active {
+    text-decoration: underline;
+}
+
+.header .tempo-brand {
+    max-width: 150px;
+}
+
+@media (min-width: 576px) {
+    .header .tempo-brand {
+        max-height: calc(1.375rem + 1.5vw); /* same as h1 font-size */
+    }
+}
+
+@media (min-width: 1200px) {
+    .header .tempo-brand {
+        max-height: 2.5rem; /* same as h1 font-size */
+    }
+}
+
+
+.service-row h2 {
+    display: inline;
+    font-size: var(--bs-body-font-size);
+    font-weight: bolder !important;
+    line-height: var(--bs-body-line-height);
+}
+
+/* fit table column to the width of the content */
+.fit-width {
+    width:0.1%;
+    white-space: nowrap;
+}