Incident Pagination (#55)

Author: jbrooksuk

resources/lang/en.json

@@ -1,4 +1,5 @@
 {
+    ":incidents Incidents": ":incidents Incidents",
     "Admin": "Admin",
     "Always Hidden": "Always Hidden",
     "Always collapsed": "Always collapsed",
@@ -14,7 +15,6 @@
     "Custom Header HTML": "Custom Header HTML",
     "Fixed": "Fixed",
     "Guests": "Guests",
-    ":incidents Incidents": ":incidents Incidents",
     "Identified": "Identified",
     "In Progress": "In Progress",
     "Investigating": "Investigating",
@@ -23,16 +23,21 @@
     "Major Outage": "Major Outage",
     "Metric Type": "Metric Type",
     "Month": "Month",
+    "Newer Incidents": "Newer Incidents",
     "No incidents reported.": "No incidents reported.",
+    "No incidents reported between :from and :to": "No incidents reported between :from and :to",
     "Notified Subscribers": "Notified Subscribers",
     "Operational": "Operational",
     "Partial Outage": "Partial Outage",
+    "Past Incidents": "Past Incidents",
     "Performance Issues": "Performance Issues",
+    "Previous Incidents": "Previous Incidents",
     "Record Update": "Record Update",
     "Resources": "Resources",
     "Send notifications to subscribers.": "Send notifications to subscribers.",
     "Settings": "Settings",
     "Setup Cachet": "Setup Cachet",
+    "Showing :from - :to": "Showing :from - :to",
     "Status Page": "Status Page",
     "Subscriber": "Subscriber",
     "Sum": "Sum",

resources/views/components/incidents.blade.php

@@ -1,11 +1,32 @@
-<div class="flex flex-col gap-6">
-    <div class="border-b py-2 dark:border-zinc-700">
-        <h2 class="text-2xl font-semibold">Past Incidents</h2>
+<div class="flex flex-col gap-8">
+    <div class="border-b py-2 dark:border-zinc-700 flex justify-between flex-col md:flex-row md:items-center">
+        <div>
+            <h2 class="text-2xl font-semibold">{{ __('Past Incidents') }}</h2>
+        </div>
+        <div class="text-sm text-zinc-500 dark:text-zinc-400">
+            {{ __('Showing :from - :to', ['from' => $from, 'to' => $to]) }}
+        </div>
     </div>
 
     <div class="flex flex-col gap-14 w-full">
-        @foreach ($incidents as $date => $incident)
+        @forelse ($incidents as $date => $incident)
         <x-cachet::incident :date="$date" :incidents="$incident" />
-        @endforeach
+        @empty
+        <div class="text-zinc-500 dark:text-zinc-400 text-center">
+            {{ __('No incidents reported between :from and :to.', ['from' => $from, 'to' => $to]) }}
+        </div>
+        @endforelse
+    </div>
+
+    <div class="flex justify-between">
+        <a href="{{ route('cachet.status-page', ['from' => $nextPeriodFrom]) }}" class="text-zinc-500 dark:text-zinc-400 hover:underline text-sm">
+            {{ __('Previous Incidents') }}
+        </a>
+
+        @if($canPageForward)
+        <a href="{{ route('cachet.status-page', ['from' => $nextPeriodTo]) }}" class="text-zinc-500 dark:text-zinc-400 hover:underline text-sm">
+            {{ __('Newer Incidents') }}
+        </a>
+        @endif
     </div>
 </div>

src/View/Components/Incidents.php

@@ -5,6 +5,7 @@
 use Cachet\Models\Incident;
 use Cachet\Settings\AppSettings;
 use Illuminate\Contracts\View\View;
+use Illuminate\Support\Carbon;
 use Illuminate\Support\Collection;
 use Illuminate\View\Component;
 
@@ -17,33 +18,46 @@ public function __construct(private AppSettings $appSettings)
 
     public function render(): View
     {
+        $incidentDays = $this->appSettings->incident_days - 1;
+        $startDate = Carbon::createFromFormat('Y-m-d', request('from', now()->toDateString()));
+        $endDate = $startDate->clone()->subDays($incidentDays);
+
         return view('cachet::components.incidents', [
-            'incidents' => $this->incidents(),
+            'incidents' => $this->incidents(
+                $startDate,
+                $endDate,
+                $this->appSettings->only_disrupted_days
+            ),
+            'from' => $startDate->toDateString(),
+            'to' => $endDate->toDateString(),
+            'nextPeriodFrom' => $startDate->clone()->subDays($incidentDays + 1)->toDateString(),
+            'nextPeriodTo' => $startDate->clone()->addDays($incidentDays + 1)->toDateString(),
+            'canPageForward' => $startDate->clone()->isBefore(now()),
         ]);
     }
 
-    private function incidents(): Collection
+    private function incidents(Carbon $startDate, Carbon $endDate, bool $onlyDisruptedDays = false): Collection
     {
-        $startDate = now()->subDays($this->appSettings->incident_days - 1)->startOfDay();
-        $endDate = now()->endOfDay();
-
         return Incident::query()
             ->with([
                 'components',
                 'incidentUpdates' => fn ($query) => $query->orderByDesc('created_at'),
             ])
             ->where('visible', '>=', ! auth()->check())
-            ->whereBetween('occurred_at', [$startDate->toDateTimeString(), $endDate->toDateTimeString()])
+            ->whereBetween('occurred_at', [
+                $endDate->startOfDay()->toDateTimeString(),
+                $startDate->endofDay()->toDateTimeString(),
+            ])
             ->orderBy('occurred_at', 'desc')
             ->get()
             ->groupBy(fn (Incident $incident) => $incident->occurred_at?->toDateString())
             ->union(
                 // Back-fill any missing dates...
-                collect($startDate->toPeriod($endDate))
+                collect($endDate->toPeriod($startDate))
                     ->keyBy(fn ($period) => $period->toDateString())
                     ->map(fn ($period) => collect())
             )
-            ->when($this->appSettings->only_disrupted_days, fn ($collection) => $collection->filter(fn ($incidents) => $incidents->isNotEmpty()))
+            ->when($onlyDisruptedDays, fn ($collection) => $collection->filter(fn ($incidents) => $incidents->isNotEmpty()))
             ->sortKeysDesc();
     }
 }