feat(template/status): add time range indicator to bottom of status bar

go.mod

@@ -15,6 +15,7 @@ require (
 )
 
 require (
+	github.com/dustin/go-humanize v1.0.0 // indirect
 	github.com/hashicorp/errwrap v1.1.0 // indirect
 	github.com/hashicorp/go-multierror v1.1.1 // indirect
 	golang.org/x/net v0.0.0-20220513224357-95641704303c // indirect

go.sum

@@ -3,6 +3,7 @@ github.com/NYTimes/gziphandler v1.1.1/go.mod h1:n/CVRwUEOgIxrgPvAQhUUr9oeUtvrhMo
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dustin/go-humanize v1.0.0 h1:VSnTsYCnlFHaM2/igO1h6X3HA71jcobQuxemgkq4zYo=
 github.com/dustin/go-humanize v1.0.0/go.mod h1:HtrtbFcZ19U5GC7JDqmcUSB87Iq5E25KnS6fMYU6eOk=
 github.com/google/go-cmp v0.5.6 h1:BKbKCqvP6I+rmFHt06ZmyQtvB8xAkWdhFyr0ZUNZcxQ=
 github.com/google/go-cmp v0.5.6/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=

internal/endpoint/status_test.go

@@ -10,8 +10,8 @@ import (
 )
 
 func TestStatusHTMLEndpoint(t *testing.T) {
-	AssertEndpoint(t, "/status.html", "./testdata/status.html", `Reported by Ayd \(.+\)`)
-	AssertEndpoint(t, "/", "./testdata/status.html", `Reported by Ayd \(.+\)`)
+	AssertEndpoint(t, "/status.html", "./testdata/status.html", `Reported by Ayd \(.+\)|[0-9] years? ago`)
+	AssertEndpoint(t, "/", "./testdata/status.html", `Reported by Ayd \(.+\)|[0-9] years? ago`)
 }
 
 func TestStatusTextEndpoint(t *testing.T) {

internal/endpoint/templates.go

@@ -8,6 +8,7 @@ import (
 	"strings"
 	"time"
 
+	"github.com/dustin/go-humanize"
 	api "github.com/macrat/ayd/lib-ayd"
 )
 
@@ -62,6 +63,21 @@ var (
 			}
 			return make([]struct{}, length-len(rs))
 		},
+		"time_range": func(rs []api.Record) timeRange {
+			switch len(rs) {
+			case 0:
+				return timeRange{}
+			case 1:
+				return timeRange{
+					Newest: rs[0].Time,
+				}
+			default:
+				return timeRange{
+					Oldest: rs[0].Time,
+					Newest: rs[len(rs)-1].Time,
+				}
+			}
+		},
 		"is_unknown": func(s api.Status) bool {
 			return s == api.StatusUnknown
 		},
@@ -90,6 +106,9 @@ var (
 		"time2rfc822": func(t time.Time) string {
 			return t.Format(time.RFC822)
 		},
+		"time2humanize": func(t time.Time) string {
+			return humanize.Time(t)
+		},
 		"latency2float": func(d time.Duration) float64 {
 			return float64(d.Microseconds()) / 1000.0
 		},
@@ -190,3 +209,8 @@ func (b *statusSummaryBuilder) Build() []statusSummary {
 	}
 	return result
 }
+
+type timeRange struct {
+	Oldest time.Time
+	Newest time.Time
+}

internal/endpoint/templates/base.html

@@ -101,7 +101,6 @@ <h1>
     margin: 4px;
     padding: 12px 16px;
     border-radius: 4px;
-    /*background-color: rgba(var(--fg), .01);*/
     border: 1px solid rgba(var(--fg), .2);
 }
 

internal/endpoint/templates/status.html

@@ -147,10 +147,21 @@
     }
 }
 
-.updated {
-    display: block;
+.time-range {
+    border: 0 solid rgba(var(--fg), .2);
+    border-width: 0 1px;
+    padding: 0 .2em;
+    display: flex;
+}
+.time-range .oldest, .time-range .newest {
+    flex: 1 1 0;
+}
+.time-range .newest {
     text-align: right;
 }
+.time-range .no-data {
+    color: rgba(var(--fg), .7);
+}
 {{ end }}{{/* </style> */}}
 
 {{ define "body" }}
@@ -187,7 +198,13 @@ <h1 aria-label="'{{ .Target }}' is currently {{ .Status | to_lower }}">
                     <path d="{{ .Records | latency_graph }}" />
                 </svg>
             </figure>
-            <span class="updated">updated: <time>{{ if .Updated.IsZero }}(not yet){{ else }}{{ .Updated | time2str }}{{ end }}</time></span>
+            <div class="time-range">
+                {{- with .Records | time_range }}
+                <span class="oldest {{ if .Oldest.IsZero }}no-data{{ end }}">{{ if .Oldest.IsZero }}no data{{ else }}<time datetime="{{ .Oldest | time2str }}" title="{{ .Oldest | time2str }}">{{ .Oldest | time2humanize }}</time>{{ end }}</span>
+                <span class="{{ if .Oldest.IsZero }}no-data{{ end }}">~</span>
+                <span class="newest {{ if .Newest.IsZero }}no-data{{ end }}">{{ if .Newest.IsZero }}no data{{ else }}<time datetime="{{ .Newest | time2str }}" title="{{ .Newest | time2str }}">{{ .Newest | time2humanize }}</time>{{ end }}</span>
+                {{ end -}}
+            </div>
         </section>{{ end }}
     </article>
 

internal/endpoint/templates_test.go

@@ -118,6 +118,48 @@ func TestPadRecords(t *testing.T) {
 	}
 }
 
+func TestTimeRange(t *testing.T) {
+	f := templateFuncs["time_range"].(func([]api.Record) timeRange)
+
+	times := []time.Time{
+		time.Date(2000, 1, 1, 0, 0, 0, 0, time.UTC),
+		time.Date(2000, 1, 2, 0, 0, 0, 0, time.UTC),
+		time.Date(2000, 1, 3, 0, 0, 0, 0, time.UTC),
+	}
+	var zero time.Time
+
+	tests := []struct {
+		Times  []time.Time
+		Oldest time.Time
+		Newest time.Time
+	}{
+		{nil, zero, zero},
+		{times, times[0], times[len(times)-1]},
+		{times[:1], zero, times[0]},
+	}
+
+	for _, tt := range tests {
+		t.Run(fmt.Sprintf("%v_%v", tt.Oldest, tt.Newest), func(t *testing.T) {
+			var xs []api.Record
+			for _, x := range tt.Times {
+				xs = append(xs, api.Record{
+					Time: x,
+				})
+			}
+
+			result := f(xs)
+
+			if !result.Oldest.Equal(tt.Oldest) {
+				t.Errorf("expected oldest is %v but got %v", tt.Oldest, tt.Oldest)
+			}
+
+			if !result.Newest.Equal(tt.Newest) {
+				t.Errorf("expected newest is %v but got %v", tt.Newest, tt.Newest)
+			}
+		})
+	}
+}
+
 type DummyStringer string
 
 func (s DummyStringer) String() string {

internal/endpoint/testdata/status.html

@@ -261,10 +261,21 @@
     }
 }
 
-.updated {
-    display: block;
+.time-range {
+    border: 0 solid rgba(var(--fg), .1);
+    border-width: 0 1px;
+    padding: 0 .2em;
+    display: flex;
+}
+.time-range .oldest, .time-range .newest {
+    flex: 1 1 0;
+}
+.time-range .newest {
     text-align: right;
 }
+.time-range .no-data {
+    color: rgba(var(--fg), .7);
+}
 
 
 footer {
@@ -419,7 +430,11 @@ <h1 aria-label="'http://c.example.com' is currently unknown">
                     <path d="M18,1 18,0.47377398720682296 18.5,0.47377398720682296 19.5,0 h0.5V1" />
                 </svg>
             </figure>
-            <span class="updated">updated: <time>2021-01-02T15:04:09Z</time></span>
+            <div class="time-range">
+                <span class="oldest "><time datetime="2021-01-02T15:04:08Z" title="2021-01-02T15:04:08Z">[[MASKED_DATA]]</time></span>
+                <span class="">~</span>
+                <span class="newest "><time datetime="2021-01-02T15:04:09Z" title="2021-01-02T15:04:09Z">[[MASKED_DATA]]</time></span>
+                </div>
         </section>
         <section class="status healthy">
             <h1 aria-label="'http://a.example.com' is currently healthy">
@@ -501,7 +516,11 @@ <h1 aria-label="'http://a.example.com' is currently healthy">
                     <path d="M17,1 17,0.642858382656692 17.5,0.642858382656692 18.5,0.321429191328346 19.5,0 h0.5V1" />
                 </svg>
             </figure>
-            <span class="updated">updated: <time>2021-01-02T15:04:07Z</time></span>
+            <div class="time-range">
+                <span class="oldest "><time datetime="2021-01-02T15:04:05Z" title="2021-01-02T15:04:05Z">[[MASKED_DATA]]</time></span>
+                <span class="">~</span>
+                <span class="newest "><time datetime="2021-01-02T15:04:07Z" title="2021-01-02T15:04:07Z">[[MASKED_DATA]]</time></span>
+                </div>
         </section>
         <section class="status healthy">
             <h1 aria-label="'http://b.example.com' is currently healthy">
@@ -580,7 +599,11 @@ <h1 aria-label="'http://b.example.com' is currently healthy">
                     <path d="M18,1 18,0.7727398243773127 18.5,0.7727398243773127 19.5,0 h0.5V1" />
                 </svg>
             </figure>
-            <span class="updated">updated: <time>2021-01-02T15:04:06Z</time></span>
+            <div class="time-range">
+                <span class="oldest "><time datetime="2021-01-02T15:04:05Z" title="2021-01-02T15:04:05Z">[[MASKED_DATA]]</time></span>
+                <span class="">~</span>
+                <span class="newest "><time datetime="2021-01-02T15:04:06Z" title="2021-01-02T15:04:06Z">[[MASKED_DATA]]</time></span>
+                </div>
         </section>
         <section class="status unknown">
             <h1 aria-label="'dummy:#no-record-yet' is currently unknown">
@@ -653,7 +676,11 @@ <h1 aria-label="'dummy:#no-record-yet' is currently unknown">
                     <path d="" />
                 </svg>
             </figure>
-            <span class="updated">updated: <time>(not yet)</time></span>
+            <div class="time-range">
+                <span class="oldest no-data">no data</span>
+                <span class="no-data">~</span>
+                <span class="newest no-data">no data</span>
+                </div>
         </section>
     </article>