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

In the event log and on an event's page, attempts and deliveries showed no time, event times had no zone, and a replay looked like the original it repeated. Each attempt now shows when its result was recorded and each delivery when it was created, as how long ago with the full UTC time on hover, and the event log's event times read the same way. A delivery created by Replay records it in a new `replay` column and is labelled a replay in the event's summary line and its delivery list; replays made before this change are not labelled. A delivery's row is now drawn by one template, `delivery_row`, that both pages share.

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">