feat(storage): group backups by database and filter by s3 status

Group backup schedules by their parent database (type + ID) for better
organization in the UI. Filter to only display backups with save_s3
enabled. Restructure the template to show database name as a header with
nested backups underneath, allowing clearer visualization of which
backups belong to each database. Add key binding to livewire component
to ensure proper re-rendering when resources change.

app/Livewire/Storage/Resources.php

@@ -13,11 +13,13 @@ class Resources extends Component
     public function render()
     {
         $backups = ScheduledDatabaseBackup::where('s3_storage_id', $this->storage->id)
+            ->where('save_s3', true)
             ->with('database')
-            ->get();
+            ->get()
+            ->groupBy(fn ($backup) => $backup->database_type.'-'.$backup->database_id);
 
         return view('livewire.storage.resources', [
-            'backups' => $backups,
+            'groupedBackups' => $backups,
         ]);
     }
 }

resources/views/livewire/storage/resources.blade.php

@@ -1,17 +1,18 @@
 <div>
-    <div class="grid gap-4 lg:grid-cols-2">
+    @forelse ($groupedBackups as $backups)
-        @forelse ($backups as $backup)
         @php
-                $database = $backup->database;
+            $firstBackup = $backups->first();
+            $database = $firstBackup->database;
             $databaseName = $database?->name ?? 'Deleted database';
-                $link = null;
+            $resourceLink = null;
+            $backupParams = null;
             if ($database && $database instanceof \App\Models\ServiceDatabase) {
                 $service = $database->service;
                 if ($service) {
                     $environment = $service->environment;
                     $project = $environment?->project;
                     if ($project && $environment) {
-                            $link = route('project.service.configuration', [
+                        $resourceLink = route('project.service.configuration', [
                             'project_uuid' => $project->uuid,
                             'environment_uuid' => $environment->uuid,
                             'service_uuid' => $service->uuid,
@@ -22,41 +23,59 @@
                 $environment = $database->environment;
                 $project = $environment?->project;
                 if ($project && $environment) {
-                        $link = route('project.database.backup.index', [
+                    $resourceLink = route('project.database.backup.index', [
                         'project_uuid' => $project->uuid,
                         'environment_uuid' => $environment->uuid,
                         'database_uuid' => $database->uuid,
                     ]);
+                    $backupParams = [
+                        'project_uuid' => $project->uuid,
+                        'environment_uuid' => $environment->uuid,
+                        'database_uuid' => $database->uuid,
+                    ];
                 }
             }
         @endphp
-            @if ($link)
+        <div class="pb-6">
-                <a {{ wireNavigate() }} href="{{ $link }}" @class(['gap-2 border cursor-pointer coolbox group'])>
+            <div class="flex items-center gap-2 pb-2">
+                @if ($resourceLink)
+                    <a {{ wireNavigate() }} href="{{ $resourceLink }}" class="text-lg font-bold dark:text-white hover:underline">{{ $databaseName }}</a>
+                @else
+                    <span class="text-lg font-bold dark:text-white">{{ $databaseName }}</span>
+                @endif
+            </div>
+            <div class="grid gap-4 lg:grid-cols-2">
+                @foreach ($backups as $backup)
+                    @php
+                        $backupLink = null;
+                        if ($backupParams) {
+                            $backupLink = route('project.database.backup.execution', array_merge($backupParams, [
+                                'backup_uuid' => $backup->uuid,
+                            ]));
+                        }
+                    @endphp
+                    @if ($backupLink)
+                        <a {{ wireNavigate() }} href="{{ $backupLink }}" @class(['gap-2 border cursor-pointer coolbox group'])>
                     @else
                         <div @class(['gap-2 border coolbox'])>
                     @endif
                         <div class="flex flex-col justify-center mx-6">
-                    <div class="box-title">
+                            <div class="box-title">{{ $backup->frequency }}</div>
-                        {{ $databaseName }}
-                    </div>
-                    <div class="box-description">
-                        Frequency: {{ $backup->frequency }}
-                    </div>
                             @if (!$backup->enabled)
                                 <span class="px-2 py-1 text-xs font-semibold text-yellow-800 bg-yellow-100 rounded dark:text-yellow-100 dark:bg-yellow-800 w-fit">
                                     Disabled
                                 </span>
                             @endif
                         </div>
-            @if ($link)
+                    @if ($backupLink)
                         </a>
                     @else
                         </div>
                     @endif
-        @empty
+                @endforeach
-            <div>
-                <div>No backup schedules are using this storage.</div>
             </div>
+        </div>
+    @empty
+        <div>No backup schedules are using this storage.</div>
     @endforelse
 </div>
-</div>

resources/views/livewire/storage/show.blade.php

@@ -46,7 +46,7 @@
     @if ($currentRoute === 'storage.show')
         <livewire:storage.form :storage="$storage" />
     @elseif ($currentRoute === 'storage.resources')
-        <livewire:storage.resources :storage="$storage" />
+        <livewire:storage.resources :storage="$storage" :key="'resources-'.uniqid()" />
     @endif
     </div>
 </div>