Skip to content

Commit

Permalink
feat(status/endpoint): add some tooltips of relative time
Browse files Browse the repository at this point in the history
  • Loading branch information
@macrat
macrat committed Jun 5, 2022
1 parent 4076277 commit 99f1969
Show file tree
Hide file tree
Showing 9 changed files with 37 additions and 41 deletions.
2 changes: 1 addition & 1 deletion internal/endpoint/incidents_test.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import (
)

func TestIncidentsHTMLEndpoint(t *testing.T) {
AssertEndpoint(t, "/incidents.html", "./testdata/incidents.html", `Reported by Ayd \(.+\)`)
AssertEndpoint(t, "/incidents.html", "./testdata/incidents.html", `Reported by Ayd \(.+\)|[0-9] years? ago`)
}

func TestIncidentsRSSEndpoint(t *testing.T) {
Expand Down
2 changes: 1 addition & 1 deletion internal/endpoint/log_test.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -492,5 +492,5 @@ func TestLogCSVEndpoint(t *testing.T) {
}

func TestLogHTMLEndpoint(t *testing.T) {
AssertEndpoint(t, "/log.html?since=2021-01-01T00%3A00%3A00Z&until=2021-01-03T00%3A00%3A00Z", "./testdata/log.html", "")
AssertEndpoint(t, "/log.html?since=2021-01-01T00%3A00%3A00Z&until=2021-01-03T00%3A00%3A00Z", "./testdata/log.html", "[0-9] years? ago")
}
3 changes: 2 additions & 1 deletion internal/endpoint/templates.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@ var (

type statusSummary struct {
Status api.Status
Count int
Percent float32
Cumulative float32
IsLast bool
Expand Down Expand Up @@ -188,7 +189,7 @@ func (b *statusSummaryBuilder) Build() []statusSummary {
result := make([]statusSummary, len(b.Count))
i := 0
for s, c := range b.Count {
result[i] = statusSummary{s, float32(c) * 100 / float32(b.Total), 0, false}
result[i] = statusSummary{s, c, float32(c) * 100 / float32(b.Total), 0, false}
i++
}
sort.Slice(result, func(i, j int) bool {
Expand Down
4 changes: 2 additions & 2 deletions internal/endpoint/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ <h1>
<span class="target" aria-label="incident of '{{ .Target }}'">{{ .Target }}</span>
</h1>
<div class="period">
<time aria-label="since {{ .CausedAt | time2str }}">{{ .CausedAt | time2str }}</time>
<time aria-label="since {{ .CausedAt | time2str }}" title="{{ .CausedAt | time2humanize }}">{{ .CausedAt | time2str }}</time>
<span aria-hidden="true">-</span>
{{ if .ResolvedAt.IsZero -}}
ongoing
{{- else -}}
<time aria-label="until {{ .ResolvedAt | time2str }}">{{ .ResolvedAt | time2str }}</time>
<time aria-label="until {{ .ResolvedAt | time2str }}" title="{{ .ResolvedAt | time2humanize }}">{{ .ResolvedAt | time2str }}</time>
{{- end }}
</div>{{ if .Message }}
<pre class="message">{{ .Message }}</pre>{{ end }}
Expand Down
34 changes: 16 additions & 18 deletions internal/endpoint/templates/log.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,18 @@
}
{{ end }}{{/* </style> */}}

{{ define "log-records" }}
<tbody>{{ range .}}
<tr>
<td><time title="{{ .Time | time2humanize }}">{{ .Time | time2str }}</time></td>
<td class="status {{ .Status | to_lower }}">{{ .Status }}</td>
<td class="latency">{{ .Latency }}</td>
<td class="target">{{ .Target }}</td>
<td class="message">{{ .Message }}{{ range .ReadableExtra }} <span class="extra"><span class="extra-label">{{ .Key }}</span> {{ .Value }}</span>{{ end }}</td>
</tr>{{ end }}
</tbody>
{{- end }}

{{ define "body" }}
<article style="text-align: center">
<form>
Expand Down Expand Up @@ -99,25 +111,11 @@
<th>message</th>
</tr>
</thead>
<tbody>{{ range .Head }}
<tr>
<td>{{ .Time | time2str }}</td>
<td class="status {{ .Status | to_lower }}">{{ .Status }}</td>
<td class="latency">{{ .Latency }}</td>
<td class="target">{{ .Target }}</td>
<td class="message">{{ .Message }}{{ range .ReadableExtra }} <span class="extra"><span class="extra-label">{{ .Key }}</span> {{ .Value }}</span>{{ end }}</td>
</tr>{{ end }}
</tbody>{{ if .Tail }}
{{- block "log-records" .Head }}{{ end }}
{{- if .Tail }}
<tbody><tr><td colspan="5" class="omit-indicator">{{ .Omitted }} records have omitted</td></tr></tbody>
<tbody>{{ range .Tail }}
<tr>
<td>{{ .Time | time2str }}</td>
<td class="status {{ .Status | to_lower }}">{{ .Status }}</td>
<td class="latency">{{ .Latency }}</td>
<td class="target">{{ .Target }}</td>
<td class="message">{{ .Message }}{{ range .ReadableExtra }} <span class="extra"><span class="extra-label">{{ .Key }}</span> {{ .Value }}</span>{{ end }}</td>
</tr>{{ end }}
</tbody>{{ end }}
{{- block "log-records" .Tail }}{{ end }}
{{- end }}
</table>
<div class="download-buttons">
{{ .Count }} of {{ .Total }} records have shown<br />
Expand Down
2 changes: 1 addition & 1 deletion internal/endpoint/templates/status.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@
{{ define "body" }}
<article class="overview" aria-label="overview">{{ with .ProbeHistory | calculate_summary }}
<ul>{{ range .}}
<li style="flex: 1 1 {{ .Percent }}%">
<li style="flex: 1 1 {{ .Percent }}%" title="{{ .Status | to_camel }}: {{ .Count }} targets">
{{ .Status | to_camel }}
<span class="percent">{{ printf "%.0f%%" .Percent}}</span>
</li>{{ end }}
Expand Down
7 changes: 3 additions & 4 deletions internal/endpoint/testdata/incidents.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,6 @@
margin: 4px;
padding: 12px 16px;
border-radius: 4px;

border: 1px solid rgba(var(--fg), .2);
}

Expand Down Expand Up @@ -204,7 +203,7 @@ <h1>
<span class="target" aria-label="incident of 'http://c.example.com'">http://c.example.com</span>
</h1>
<div class="period">
<time aria-label="since 2021-01-02T15:04:09Z">2021-01-02T15:04:09Z</time>
<time aria-label="since 2021-01-02T15:04:09Z" title="[[MASKED_DATA]]">2021-01-02T15:04:09Z</time>
<span aria-hidden="true">-</span>
ongoing
</div>
Expand All @@ -223,9 +222,9 @@ <h1>
<span class="target" aria-label="incident of 'http://b.example.com'">http://b.example.com</span>
</h1>
<div class="period">
<time aria-label="since 2021-01-02T15:04:05Z">2021-01-02T15:04:05Z</time>
<time aria-label="since 2021-01-02T15:04:05Z" title="[[MASKED_DATA]]">2021-01-02T15:04:05Z</time>
<span aria-hidden="true">-</span>
<time aria-label="until 2021-01-02T15:04:06Z">2021-01-02T15:04:06Z</time>
<time aria-label="until 2021-01-02T15:04:06Z" title="[[MASKED_DATA]]">2021-01-02T15:04:06Z</time>
</div>
<pre class="message">this is failure</pre>
</section>
Expand Down
15 changes: 7 additions & 8 deletions internal/endpoint/testdata/log.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,6 @@
margin: 4px;
padding: 12px 16px;
border-radius: 4px;

border: 1px solid rgba(var(--fg), .2);
}

Expand Down Expand Up @@ -266,49 +265,49 @@
</thead>
<tbody>
<tr>
<td>2021-01-02T15:04:05Z</td>
<td><time title="[[MASKED_DATA]]">2021-01-02T15:04:05Z</time></td>
<td class="status healthy">HEALTHY</td>
<td class="latency">123.456ms</td>
<td class="target">http://a.example.com</td>
<td class="message">hello world</td>
</tr>
<tr>
<td>2021-01-02T15:04:05Z</td>
<td><time title="[[MASKED_DATA]]">2021-01-02T15:04:05Z</time></td>
<td class="status failure">FAILURE</td>
<td class="latency">12.345ms</td>
<td class="target">http://b.example.com</td>
<td class="message">this is failure</td>
</tr>
<tr>
<td>2021-01-02T15:04:06Z</td>
<td><time title="[[MASKED_DATA]]">2021-01-02T15:04:06Z</time></td>
<td class="status healthy">HEALTHY</td>
<td class="latency">234.567ms</td>
<td class="target">http://a.example.com</td>
<td class="message">hello world!</td>
</tr>
<tr>
<td>2021-01-02T15:04:06Z</td>
<td><time title="[[MASKED_DATA]]">2021-01-02T15:04:06Z</time></td>
<td class="status healthy">HEALTHY</td>
<td class="latency">54.321ms</td>
<td class="target">http://b.example.com</td>
<td class="message">this is healthy</td>
</tr>
<tr>
<td>2021-01-02T15:04:07Z</td>
<td><time title="[[MASKED_DATA]]">2021-01-02T15:04:07Z</time></td>
<td class="status healthy">HEALTHY</td>
<td class="latency">345.678ms</td>
<td class="target">http://a.example.com</td>
<td class="message">hello world!!</td>
</tr>
<tr>
<td>2021-01-02T15:04:08Z</td>
<td><time title="[[MASKED_DATA]]">2021-01-02T15:04:08Z</time></td>
<td class="status aborted">ABORTED</td>
<td class="latency">1.234ms</td>
<td class="target">http://c.example.com</td>
<td class="message">this is aborted <span class="extra"><span class="extra-label">hello</span> world</span></td>
</tr>
<tr>
<td>2021-01-02T15:04:09Z</td>
<td><time title="[[MASKED_DATA]]">2021-01-02T15:04:09Z</time></td>
<td class="status unknown">UNKNOWN</td>
<td class="latency">2.345ms</td>
<td class="target">http://c.example.com</td>
Expand Down
9 changes: 4 additions & 5 deletions internal/endpoint/testdata/status.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,6 @@
margin: 4px;
padding: 12px 16px;
border-radius: 4px;

border: 1px solid rgba(var(--fg), .2);
}

Expand Down Expand Up @@ -262,7 +261,7 @@
}

.time-range {
border: 0 solid rgba(var(--fg), .1);
border: 0 solid rgba(var(--fg), .2);
border-width: 0 1px;
padding: 0 .2em;
display: flex;
Expand Down Expand Up @@ -332,11 +331,11 @@

<article class="overview" aria-label="overview">
<ul>
<li style="flex: 1 1 50%">
<li style="flex: 1 1 50%" title="Unknown: 2 targets">
Unknown
<span class="percent">50%</span>
</li>
<li style="flex: 1 1 50%">
<li style="flex: 1 1 50%" title="Healthy: 2 targets">
Healthy
<span class="percent">50%</span>
</li>
Expand Down Expand Up @@ -692,7 +691,7 @@ <h1>
<span class="target" aria-label="incident of 'http://c.example.com'">http://c.example.com</span>
</h1>
<div class="period">
<time aria-label="since 2021-01-02T15:04:09Z">2021-01-02T15:04:09Z</time>
<time aria-label="since 2021-01-02T15:04:09Z" title="[[MASKED_DATA]]">2021-01-02T15:04:09Z</time>
<span aria-hidden="true">-</span>
ongoing
</div>
Expand Down

0 comments on commit 99f1969

Please sign in to comment.