Add time column to website (#765)

* Make block hash monospace

* Add time column to website main view

* fix tests

Author: ilyaluk

docker-compose.yml

@@ -18,10 +18,10 @@ services:
       - '11211:11211'
 
   db:
-    image: postgres
+    image: postgres:18
     restart: always
     volumes:
-      - 'psql_data:/var/lib/postgresql/data'
+      - 'psql_data:/var/lib/postgresql'
     ports:
       - '5432:5432'
     environment:

scripts/website-staticgen/main.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"io"
 	"os"
+	"time"
 
 	"github.com/flashbots/mev-boost-relay/services/website"
 	"github.com/goccy/go-json"
@@ -25,6 +26,14 @@ func main() {
 		panic(err)
 	}
 
+	// add fake times for some variability in rendered template
+	diff := time.Second
+	for i, v := range data.Payloads {
+		v.InsertedAt = time.Now().Add(-diff)
+		data.Payloads[i] = v
+		diff = diff * 5 / 3
+	}
+
 	indexTemplate, err := website.ParseIndexTemplate()
 	if err != nil {
 		panic(err)

services/website/html.go

@@ -4,6 +4,7 @@ import (
 	_ "embed"
 	"math/big"
 	"text/template"
+	"time"
 
 	"github.com/flashbots/mev-boost-relay/database"
 	"golang.org/x/text/cases"
@@ -67,10 +68,39 @@ func caseIt(s string) string {
 	return caser.String(s)
 }
 
+func relativeTime(t time.Time) string {
+	diff := time.Since(t)
+	if diff < 0 {
+		// should be unreachable, but just in case
+		return diff.String()
+	}
+
+	seconds := int(diff.Seconds())
+	minutes := int(diff.Minutes())
+	hours := int(diff.Hours())
+	days := hours / 24
+
+	if seconds < 60 {
+		return printer.Sprintf("%ds ago", seconds)
+	} else if minutes < 60 {
+		return printer.Sprintf("%dm ago", minutes)
+	} else if hours < 24 {
+		return printer.Sprintf("%dh ago", hours)
+	} else {
+		return printer.Sprintf("%dd ago", days)
+	}
+}
+
+func formatUTC(t time.Time) string {
+	return t.UTC().Format("2006-01-02 15:04:05 UTC")
+}
+
 var funcMap = template.FuncMap{
-	"weiToEth":  weiToEth,
-	"prettyInt": prettyInt,
-	"caseIt":    caseIt,
+	"weiToEth":     weiToEth,
+	"prettyInt":    prettyInt,
+	"caseIt":       caseIt,
+	"relativeTime": relativeTime,
+	"formatUTC":    formatUTC,
 }
 
 //go:embed website.html

services/website/website.html

@@ -233,6 +233,7 @@ <h2>
             <table class="pure-table pure-table-horizontal" style="width:100%;">
                 <thead>
                     <tr>
+                        <th style="text-align: right;">Time</th>
                         <th>Epoch</th>
                         <th>Slot</th>
                         <th>Block number</th>
@@ -257,6 +258,9 @@ <h2>
                     {{$linkDataAPI := .LinkDataAPI}}
                     {{ range .Payloads }}
                     <tr>
+                        <td style="text-align: right;">
+                            <span title="{{.InsertedAt | formatUTC}}">{{.InsertedAt | relativeTime}}</span>
+                        </td>
                         <td>{{.Epoch | prettyInt}}</td>
                         <td>
                             <a href="{{$linkDataAPI}}/relay/v1/data/bidtraces/proposer_payload_delivered?slot={{.Slot}}">{{.Slot | prettyInt}}</a>
@@ -267,7 +271,7 @@ <h2>
                         <td>
                             <div title="Blob Gas Used: {{.BlobGasUsed}}">{{.NumBlobs }}</div>
                         </td>
-                        <td>{{.BlockHash}}</td>
+                        <td style="font-family: monospace;">{{.BlockHash}}</td>
                         <td>
                             <div class="icons-container">
                                 {{ if ne $linkBeaconchain "" }}