refactor: Remove redundant heading in backup settings page

This commit is contained in:
Andras Bacsai 2024-05-24 09:35:36 +02:00
parent 64f8583975
commit 63e64b8bcc
4 changed files with 62 additions and 56 deletions

View File

@ -2,11 +2,12 @@
namespace App\Livewire\Project\Database; namespace App\Livewire\Project\Database;
use App\Models\ScheduledDatabaseBackup;
use Livewire\Component; use Livewire\Component;
class BackupExecutions extends Component class BackupExecutions extends Component
{ {
public $backup; public ?ScheduledDatabaseBackup $backup = null;
public $executions = []; public $executions = [];
public $setDeletableBackup; public $setDeletableBackup;
public function getListeners() public function getListeners()
@ -20,8 +21,11 @@ class BackupExecutions extends Component
public function cleanupFailed() public function cleanupFailed()
{ {
$this->backup?->executions()->where('status', 'failed')->delete(); if ($this->backup) {
$this->refreshBackupExecutions(); $this->backup?->executions()->where('status', 'failed')->delete();
$this->refreshBackupExecutions();
$this->dispatch('success', 'Failed backups cleaned up.');
}
} }
public function deleteBackup($exeuctionId) public function deleteBackup($exeuctionId)
{ {
@ -45,6 +49,6 @@ class BackupExecutions extends Component
} }
public function refreshBackupExecutions(): void public function refreshBackupExecutions(): void
{ {
$this->executions = $this->backup->executions()->get()->sortByDesc('created_at'); $this->executions = $this->backup?->executions()->get()->sortByDesc('created_at');
} }
} }

View File

@ -36,7 +36,7 @@ class Backup extends Component
public function mount() public function mount()
{ {
$this->backup = $this->database?->scheduledBackups->first() ?? []; $this->backup = $this->database?->scheduledBackups->first() ?? null;
$this->executions = $this->backup?->executions ?? []; $this->executions = $this->backup?->executions ?? [];
} }
public function add_coolify_database() public function add_coolify_database()

View File

@ -1,54 +1,57 @@
<div> <div>
<div class="flex items-center gap-2"> @isset($backup)
<h3 class="py-4">Executions</h3> <div class="flex items-center gap-2">
<x-forms.button wire:click='cleanupFailed'>Cleanup Failed Backups</x-forms.button> <h3 class="py-4">Executions</h3>
</div> <x-forms.button wire:click='cleanupFailed'>Cleanup Failed Backups</x-forms.button>
<div class="flex flex-col-reverse gap-2"> </div>
@forelse($executions as $execution) <div class="flex flex-col-reverse gap-2">
<form wire:key="{{ data_get($execution, 'id') }}" @forelse($executions as $execution)
class="relative flex flex-col p-4 bg-white box-without-bg dark:bg-coolgray-100" <form wire:key="{{ data_get($execution, 'id') }}"
@class([ class="relative flex flex-col p-4 bg-white box-without-bg dark:bg-coolgray-100"
'border-green-500' => data_get($execution, 'status') === 'success', @class([
'border-red-500' => data_get($execution, 'status') === 'failed', 'border-green-500' => data_get($execution, 'status') === 'success',
])> 'border-red-500' => data_get($execution, 'status') === 'failed',
@if (data_get($execution, 'status') === 'running') ])>
<div class="absolute top-2 right-2"> @if (data_get($execution, 'status') === 'running')
<x-loading /> <div class="absolute top-2 right-2">
</div> <x-loading />
@endif </div>
<div>Database: {{ data_get($execution, 'database_name', 'N/A') }}</div>
<div>Status: {{ data_get($execution, 'status') }}</div>
<div>Started At: {{ data_get($execution, 'created_at') }}</div>
@if (data_get($execution, 'message'))
<div>Message: {{ data_get($execution, 'message') }}</div>
@endif
<div>Size: {{ data_get($execution, 'size') }} B /
{{ round((int) data_get($execution, 'size') / 1024, 2) }}
kB / {{ round((int) data_get($execution, 'size') / 1024 / 1024, 3) }} MB
</div>
<div>Location: {{ data_get($execution, 'filename', 'N/A') }}</div>
<div class="flex gap-2">
<div class="flex-1"></div>
@if (data_get($execution, 'status') === 'success')
<x-forms.button class=" dark:hover:bg-coolgray-400"
x-on:click="download_file('{{ data_get($execution, 'id') }}')">Download</x-forms.button>
@endif @endif
<x-modal-confirmation isErrorButton action="deleteBackup({{ data_get($execution, 'id') }})"> <div>Database: {{ data_get($execution, 'database_name', 'N/A') }}</div>
<x-slot:button-title> <div>Status: {{ data_get($execution, 'status') }}</div>
Delete <div>Started At: {{ data_get($execution, 'created_at') }}</div>
</x-slot:button-title> @if (data_get($execution, 'message'))
This will delete this backup. It is not reversible.<br>Please think again. <div>Message: {{ data_get($execution, 'message') }}</div>
</x-modal-confirmation> @endif
</div> <div>Size: {{ data_get($execution, 'size') }} B /
</form> {{ round((int) data_get($execution, 'size') / 1024, 2) }}
kB / {{ round((int) data_get($execution, 'size') / 1024 / 1024, 3) }} MB
</div>
<div>Location: {{ data_get($execution, 'filename', 'N/A') }}</div>
<div class="flex gap-2">
<div class="flex-1"></div>
@if (data_get($execution, 'status') === 'success')
<x-forms.button class=" dark:hover:bg-coolgray-400"
x-on:click="download_file('{{ data_get($execution, 'id') }}')">Download</x-forms.button>
@endif
<x-modal-confirmation isErrorButton action="deleteBackup({{ data_get($execution, 'id') }})">
<x-slot:button-title>
Delete
</x-slot:button-title>
This will delete this backup. It is not reversible.<br>Please think again.
</x-modal-confirmation>
</div>
</form>
@empty
<div>No executions found.</div>
@endforelse
</div>
<script>
function download_file(executionId) {
window.open('/download/backup/' + executionId, '_blank');
}
</script>
@endisset
@empty
<div>No executions found.</div>
@endforelse
</div>
<script>
function download_file(executionId) {
window.open('/download/backup/' + executionId, '_blank');
}
</script>
</div> </div>

View File

@ -30,7 +30,6 @@
@endif @endif
</div> </div>
<div class="py-4"> <div class="py-4">
<h2 class="pb-4">Executions</h2>
<livewire:project.database.backup-executions :backup="$backup" :executions="$executions" /> <livewire:project.database.backup-executions :backup="$backup" :executions="$executions" />
</div> </div>
</div> </div>