Event log: show attempt and delivery times, label replays, zone event times (closes #386)

Each attempt shows when it was recorded and each delivery when it was
created, in the event log and on the event's page. The event log's
event times read as the recent events list does: how long ago, with
the full UTC time on hover.

A delivery records whether Replay created it, in a new replay column
added to the delivery model in place. Such a delivery is labelled a
replay in the event's summary line and in both pages' delivery lists.
Both pages draw a delivery's row from one shared template.

Model: opus-5-5

templates/delivery_attempts.html

@@ -9,6 +9,7 @@
 <div class="rounded-md bg-white border border-gray-200 p-2">
     <div class="flex flex-wrap items-center gap-3 text-xs">
         <span class="text-gray-500">Attempt {{.AttemptNum}}</span>
+        <span class="text-gray-500" title="{{.RanUTC}}">{{.Ran}}</span>
         <span class="{{if .Success}}text-green-600{{else}}text-red-600{{end}}">{{if not .Success}}failure{{else if eq $.Target.Type "database"}}archived{{else if eq $.Target.Type "log"}}written to the log{{else}}success{{end}}</span>
         {{/* A database or log target sends no HTTP request, so its attempts have no status code. */}}
         {{if not (eq $.Target.Type "database" "log")}}

templates/delivery_row.html

@@ -0,0 +1,16 @@
+{{define "delivery_row"}}
+<!-- The line that heads a delivery, as handlers.DeliveryView holds it:
+     in the event log, inside the button that shows its attempts, and on
+     an event's own page. Spans only, since a button may hold no div. -->
+<span class="flex flex-1 flex-wrap items-center justify-between gap-3">
+    <span class="flex flex-wrap items-center gap-3">
+        <span class="text-sm text-gray-700">{{.Target.DisplayName}}</span>
+        {{if .Replay}}<span class="text-xs text-gray-500">replay</span>{{end}}
+        <span class="text-xs {{if eq .Status "delivered"}}text-green-600{{else if eq .Status "failed"}}text-red-600{{else if eq .Status "retrying"}}text-yellow-600{{else}}text-gray-400{{end}}">{{with .Paused}}waiting: target paused after repeated failures, next try no earlier than {{.Until}} ({{.Relative}}){{else}}{{.Status}}{{end}}</span>
+    </span>
+    <span class="flex flex-wrap items-center gap-3">
+        <span class="text-xs text-gray-400" title="{{.CreatedUTC}}">created {{.Created}}</span>
+        <span class="text-xs text-gray-400">{{.AttemptCount}} attempt{{if ne .AttemptCount 1}}s{{end}}</span>
+    </span>
+</span>
+{{end}}

templates/event_detail.html

@@ -21,7 +21,7 @@
             </div>
             <div class="flex flex-wrap gap-2">
                 <dt class="w-32 flex-shrink-0 text-gray-500">Received</dt>
-                <dd class="text-gray-900">{{.CreatedAt.UTC.Format "2006-01-02 15:04:05"}} UTC</dd>
+                <dd class="text-gray-900">{{.ReceivedUTC}}</dd>
             </div>
             <div class="flex flex-wrap gap-2">
                 <dt class="w-32 flex-shrink-0 text-gray-500">Method</dt>
@@ -66,13 +66,7 @@
         <div class="divide-y divide-gray-100">
             {{range .Deliveries}}
             <div class="p-4">
-                <div class="flex flex-wrap items-center justify-between gap-3">
-                    <span class="text-sm text-gray-700">{{.Target.DisplayName}}</span>
-                    <span class="flex flex-wrap items-center gap-3">
-                        <span class="text-xs {{if eq .Status "delivered"}}text-green-600{{else if eq .Status "failed"}}text-red-600{{else if eq .Status "retrying"}}text-yellow-600{{else}}text-gray-400{{end}}">{{with .Paused}}waiting: target paused after repeated failures, next try no earlier than {{.Until}} ({{.Relative}}){{else}}{{.Status}}{{end}}</span>
-                        <span class="text-xs text-gray-400">{{.AttemptCount}} attempt{{if ne .AttemptCount 1}}s{{end}}</span>
-                    </span>
-                </div>
+                {{template "delivery_row" .}}
                 <div class="mt-2 space-y-2">
                     {{template "delivery_attempts" .}}
                 </div>

templates/source_logs.html

@@ -33,10 +33,10 @@
                     <span class="flex flex-wrap items-center gap-4">
                         {{range .Deliveries}}
                         <span class="text-xs {{if eq .Status "delivered"}}text-green-600{{else if eq .Status "failed"}}text-red-600{{else if eq .Status "retrying"}}text-yellow-600{{else}}text-gray-400{{end}}">
-                            {{.Target.DisplayName}}: {{if .Paused}}waiting{{else}}{{.Status}}{{end}}
+                            {{.Target.DisplayName}}{{if .Replay}} (replay){{end}}: {{if .Paused}}waiting{{else}}{{.Status}}{{end}}
                         </span>
                         {{end}}
-                        <span class="text-xs text-gray-400">{{.CreatedAt.Format "2006-01-02 15:04:05"}}</span>
+                        <span class="text-xs text-gray-400" title="{{.ReceivedUTC}}">{{.Received}}</span>
                         <!-- The caret has no text to select, so a click on it toggles at once. -->
                         <svg class="w-4 h-4 text-gray-400 transition-transform" :class="caretClass" @click.stop="toggle" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
@@ -64,17 +64,11 @@
                             {{range .Deliveries}}
                             <div class="py-2" x-data="collapsible">
                                 <div class="flex items-center gap-3">
-                                    <button type="button" class="btn-small flex-1 flex-wrap justify-between gap-2 text-left" @click="toggle">
-                                        <span class="flex flex-wrap items-center gap-3">
-                                            <span class="text-sm text-gray-700">{{.Target.DisplayName}}</span>
-                                            <span class="text-xs {{if eq .Status "delivered"}}text-green-600{{else if eq .Status "failed"}}text-red-600{{else if eq .Status "retrying"}}text-yellow-600{{else}}text-gray-400{{end}}">{{with .Paused}}waiting: target paused after repeated failures, next try no earlier than {{.Until}} ({{.Relative}}){{else}}{{.Status}}{{end}}</span>
-                                        </span>
-                                        <span class="flex flex-wrap items-center gap-3">
-                                            <span class="text-xs text-gray-400">{{.AttemptCount}} attempt{{if ne .AttemptCount 1}}s{{end}}</span>
-                                            <svg class="w-3 h-3 text-gray-400 transition-transform" :class="caretClass" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
-                                            </svg>
-                                        </span>
+                                    <button type="button" class="btn-small flex-1 gap-3 text-left" @click="toggle">
+                                        {{template "delivery_row" .}}
+                                        <svg class="w-3 h-3 text-gray-400 transition-transform" :class="caretClass" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                                        </svg>
                                     </button>
                                     {{if and .Status.Terminal (not .Target.Deleted)}}
                                     <form method="POST" action="/hook/{{$.Webhook.ID}}/deliveries/{{.ID}}/replay" class="inline">