Completed scheduled maintenance should appear in timeline #93

public/build/manifest.json

@@ -4,14 +4,14 @@
     "src": "resources/js/cachet.js",
     "isEntry": true
   },
-  "resources/css/cachet.css": {
-    "file": "assets/cachet.30cb9e62.css",
-    "src": "resources/css/cachet.css",
-    "isEntry": true
-  },
   "resources/css/dashboard/theme.css": {
     "file": "assets/theme.8251fad4.css",
     "src": "resources/css/dashboard/theme.css",
     "isEntry": true
+  },
+  "resources/css/cachet.css": {
+    "file": "assets/cachet.30cb9e62.css",
+    "src": "resources/css/cachet.css",
+    "isEntry": true
   }
 }

resources/views/components/incident.blade.php

@@ -4,9 +4,7 @@
     'incidents',
 ])
 
-<div class="relative flex flex-col gap-5" x-data="{ forDate: new Date(@js($date)) }">
-    <h3 class="text-xl font-semibold"><time datetime="{{ $date }}" x-text="forDate.toLocaleDateString()"></time></h3>
-    @forelse($incidents as $incident)
+    @foreach($incidents as $incident)
     <div x-data="{ timestamp: new Date(@js($incident->timestamp)) }" class="bg-white border divide-y rounded-lg ml-9 dark:divide-zinc-700 dark:border-zinc-700 dark:bg-zinc-800">
         <div @class([
             'flex flex-col bg-zinc-50 p-4 dark:bg-zinc-900 gap-2',
@@ -68,13 +66,4 @@
             </div>
         </div>
     </div>
-    @empty
-        <div class="bg-white border divide-y rounded-lg ml-9 dark:divide-zinc-700 dark:border-zinc-700 dark:bg-zinc-800">
-            <div class="flex flex-col p-4 divide-y dark:divide-zinc-700">
-                <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">
-                    {{ __('No incidents reported.') }}
-                </div>
-            </div>
-        </div>
-    @endforelse
-</div>
+    @endforeach

resources/views/components/schedule-timeline.blade.php

@@ -0,0 +1,43 @@
+@use('Cachet\Enums\ScheduleStatusEnum')
+@props([
+    'date',
+    'schedules',
+])
+
+    @foreach($schedules as $schedule)
+    <div x-data="{ timestamp: new Date(@js($schedule->completed_at)) }" class="bg-white border divide-y rounded-lg ml-9 dark:divide-zinc-700 dark:border-zinc-700 dark:bg-zinc-800">
+        <div @class([
+            'flex flex-col bg-zinc-50 p-4 dark:bg-zinc-900 gap-2',
+            'rounded-lg',
+        ])>
+            <div class="flex flex-col sm:flex-row justify-between gap-2 flex-col-reverse items-start sm:items-center">
+                <div class="flex flex-col flex-1">
+                    <div class="flex gap-2 items-center">
+                        <h3 class="max-w-full text-base font-semibold break-words sm:text-xl">
+                            {{ $schedule->name}}
+                        </h3>
+                        @auth
+                            <a href="{{ $schedule->filamentDashboardEditUrl() }}" class="underline text-right text-sm text-zinc-500 hover:text-zinc-400 dark:text-zinc-400 dark:hover:text-zinc-300" title="{{ __('Edit Incident') }}">
+                                <x-heroicon-m-pencil-square class="size-4" />
+                            </a>
+                        @endauth
+                    </div>
+                    <span class="text-xs text-zinc-500 dark:text-zinc-400">
+                        {{ $schedule->completed_at->diffForHumans() }} — <time datetime="{{ $schedule->completed_at->toW3cString() }}" x-text="timestamp.toLocaleString()"></time>
+                    </span>
+                </div>
+                <div class="flex justify-start sm:justify-end">
+                    <x-cachet::badge :status="$schedule->status" />
+                </div>
+            </div>
+        </div>
+
+        <div class="relative">
+            <div class="flex flex-col px-4 divide-y dark:divide-zinc-700">
+                <div class="relative py-4" x-data="{ timestamp: new Date(@js($schedule->completed_at)) }">
+                    <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">{!! $schedule->formattedMessage() !!}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    @endforeach

resources/views/components/schedule.blade.php

@@ -12,6 +12,11 @@
                         {{ $schedule->scheduled_at->diffForHumans() }} — <time datetime="{{ $schedule->scheduled_at->toW3cString() }}" x-text="timestamp.toLocaleString()"></time>
                     </span>
                     </div>
+                    @auth
+                        <a href="{{ $schedule->filamentDashboardEditUrl() }}" class="underline text-right text-sm text-zinc-500 hover:text-zinc-400 dark:text-zinc-400 dark:hover:text-zinc-300" title="{{ __('Edit Incident') }}">
+                            <x-heroicon-m-pencil-square class="size-4" />
+                        </a>
+                    @endauth
                     <div class="flex justify-start sm:justify-end">
                         <x-cachet::badge :status="$schedule->status" />
                     </div>

resources/views/components/incident-timeline.blade.php → resources/views/components/timeline.blade.php

@@ -10,13 +10,22 @@
     </div>
 
     <div class="flex flex-col gap-14 w-full">
-        @forelse ($incidents as $date => $incident)
-        <x-cachet::incident :date="$date" :incidents="$incident" />
-        @empty
-        <div class="text-zinc-500 dark:text-zinc-400 text-center">
-            {{ __('No incidents reported between :from and :to.', ['from' => $from, 'to' => $to]) }}
+            @foreach ($incidents as $date => $incident)
+            <div class="relative flex flex-col gap-5" x-data="{ forDate: new Date(@js($date)) }">
+                <h3 class="text-xl font-semibold"><time datetime="{{ $date }}" x-text="forDate.toLocaleDateString()"></time></h3>
+                <x-cachet::incident :date="$date" :incidents="$incident"  />
+                <x-cachet::schedule-timeline :date="$date" :schedules="$schedules[$date]" />
+                @if(count($incident) === 0 && count($schedules[$date]) === 0)
+                    <div class="bg-white border divide-y rounded-lg ml-9 dark:divide-zinc-700 dark:border-zinc-700 dark:bg-zinc-800">
+                        <div class="flex flex-col p-4 divide-y dark:divide-zinc-700">
+                            <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">
+                                {{ __('No incidents reported.') }}
+                            </div>
+                        </div>
+                    </div>
+                @endif
+            @endforeach
         </div>
-        @endforelse
     </div>
 
     <div class="flex justify-between">

resources/views/status-page/index.blade.php

@@ -18,7 +18,7 @@
         <x-cachet::schedules :schedules="$schedules" />
         @endif
 
-        <x-cachet::incident-timeline />
+        <x-cachet::timeline />
     </div>
 
     <x-cachet::footer />

src/Models/Schedule.php

@@ -3,7 +3,9 @@
 namespace Cachet\Models;
 
 use Cachet\Enums\ScheduleStatusEnum;
+use Cachet\Filament\Resources\ScheduleResource;
 use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
@@ -93,4 +95,17 @@ public function scopeCompletedPreviously(Builder $query): Builder
         return $query->where('status', '=', ScheduleStatusEnum::complete)
             ->where('completed_at', '<=', Carbon::now());
     }
+
+    /**
+     * Get the URL to the schedule page within the dashboard.
+     */
+    public function filamentDashboardEditUrl(): string
+    {
+        return ScheduleResource::getUrl(name: 'edit', parameters: ['record' => $this->id]);
+    }
+
+    public function timestamp(): Attribute
+    {
+        return Attribute::get(fn () => $this->completed_at ?: $this->scheduled_at);
+    }
 }

src/View/Components/IncidentTimeline.php → src/View/Components/Timeline.php

@@ -3,14 +3,15 @@
 namespace Cachet\View\Components;
 
 use Cachet\Models\Incident;
+use Cachet\Models\Schedule;
 use Cachet\Settings\AppSettings;
 use Illuminate\Contracts\View\View;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Support\Carbon;
 use Illuminate\Support\Collection;
 use Illuminate\View\Component;
 
-class IncidentTimeline extends Component
+class Timeline extends Component
 {
     public function __construct(private AppSettings $appSettings)
     {
@@ -23,12 +24,17 @@ public function render(): View
         $startDate = Carbon::createFromFormat('Y-m-d', request('from', now()->toDateString()));
         $endDate = $startDate->clone()->subDays($incidentDays);
 
-        return view('cachet::components.incident-timeline', [
+        return view('cachet::components.timeline', [
             'incidents' => $this->incidents(
                 $startDate,
                 $endDate,
                 $this->appSettings->only_disrupted_days
             ),
+            'schedules' => $this->schedules(
+                $startDate,
+                $endDate,
+                $this->appSettings->only_disrupted_days
+            ),
             'from' => $startDate->toDateString(),
             'to' => $endDate->toDateString(),
             'nextPeriodFrom' => $startDate->clone()->subDays($incidentDays + 1)->toDateString(),
@@ -73,4 +79,33 @@ private function incidents(Carbon $startDate, Carbon $endDate, bool $onlyDisrupt
             ->when($onlyDisruptedDays, fn ($collection) => $collection->filter(fn ($incidents) => $incidents->isNotEmpty()))
             ->sortKeysDesc();
     }
+
+    /**
+     * Fetch the schedules that occurred between the given start and end date.
+     * Schedules will be grouped by days.
+     */
+    private function schedules(Carbon $startDate, Carbon $endDate, bool $onlyDisruptedDays = false): Collection
+    {
+        return Schedule::query()
+            ->with([
+                'components',
+            ])
+            ->where(function (Builder $query) use ($endDate, $startDate) {
+                $query->whereBetween('completed_at', [
+                    $endDate->startOfDay()->toDateTimeString(),
+                    $startDate->endofDay()->toDateTimeString(),
+                ]);
+            })
+            ->orderBy('completed_at', 'desc')
+            ->get()
+            ->groupBy(fn (Schedule $schedule) => $schedule->completed_at->toDateString())
+            ->union(
+            // Back-fill any missing dates...
+                collect($endDate->toPeriod($startDate))
+                    ->keyBy(fn ($period) => $period->toDateString())
+                    ->map(fn ($period) => collect())
+            )
+            ->when($onlyDisruptedDays, fn ($collection) => $collection->filter(fn ($schedules) => $schedules->isNotEmpty()))
+            ->sortKeysDesc();
+    }
 }