mirror of
https://github.com/tiennm99/coolify.git
synced 2026-04-17 19:21:36 +00:00
800396b443
This commit introduces functionality for integrating S3 storage into the import process. It allows users to select S3 storage, check for file existence, and download files directly from S3. This enhancement improves the flexibility of the import feature by enabling users to work with files stored in S3, addressing a common use case for teams that utilize cloud storage solutions.
186 lines
9.4 KiB
PHP
186 lines
9.4 KiB
PHP
<div x-data="{
|
|
error: $wire.entangle('error'),
|
|
filesize: $wire.entangle('filesize'),
|
|
filename: $wire.entangle('filename'),
|
|
isUploading: $wire.entangle('isUploading'),
|
|
progress: $wire.entangle('progress'),
|
|
s3DownloadInProgress: $wire.entangle('s3DownloadInProgress'),
|
|
s3DownloadedFile: $wire.entangle('s3DownloadedFile'),
|
|
s3FileSize: $wire.entangle('s3FileSize')
|
|
}">
|
|
<script type="text/javascript" src="{{ URL::asset('js/dropzone.js') }}"></script>
|
|
@script
|
|
<script data-navigate-once>
|
|
Dropzone.options.myDropzone = {
|
|
chunking: true,
|
|
method: "POST",
|
|
maxFilesize: 1000000000,
|
|
chunkSize: 10000000,
|
|
createImageThumbnails: false,
|
|
disablePreviews: true,
|
|
parallelChunkUploads: false,
|
|
init: function() {
|
|
let button = this.element.querySelector('button');
|
|
button.innerText = 'Select or drop a backup file here.'
|
|
this.on('sending', function(file, xhr, formData) {
|
|
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
|
formData.append("_token", token);
|
|
});
|
|
this.on("addedfile", file => {
|
|
$wire.isUploading = true;
|
|
});
|
|
this.on('uploadprogress', function(file, progress, bytesSent) {
|
|
$wire.progress = progress;
|
|
});
|
|
this.on('complete', function(file) {
|
|
$wire.filename = file.name;
|
|
$wire.filesize = Number(file.size / 1024 / 1024).toFixed(2) + ' MB';
|
|
$wire.isUploading = false;
|
|
});
|
|
this.on('error', function(file, message) {
|
|
$wire.error = true;
|
|
$wire.$dispatch('error', message.error)
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
@endscript
|
|
<h2>Import Backup</h2>
|
|
@if ($unsupported)
|
|
<div>Database restore is not supported.</div>
|
|
@else
|
|
<div class="pt-2 rounded-sm alert-error">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
<span>This is a destructive action, existing data will be replaced!</span>
|
|
</div>
|
|
@if (str(data_get($resource, 'status'))->startsWith('running'))
|
|
@if ($resource->type() === 'standalone-postgresql')
|
|
@if ($dumpAll)
|
|
<x-forms.textarea rows="6" readonly label="Custom Import Command"
|
|
wire:model='restoreCommandText'></x-forms.textarea>
|
|
@else
|
|
<x-forms.input label="Custom Import Command" wire:model='postgresqlRestoreCommand'></x-forms.input>
|
|
<div class="flex flex-col gap-1 pt-1">
|
|
<span class="text-xs">You can add "--clean" to drop objects before creating them, avoiding
|
|
conflicts.</span>
|
|
<span class="text-xs">You can add "--verbose" to log more things.</span>
|
|
</div>
|
|
@endif
|
|
<div class="w-64 pt-2">
|
|
<x-forms.checkbox label="Backup includes all databases"
|
|
wire:model.live='dumpAll'></x-forms.checkbox>
|
|
</div>
|
|
@elseif ($resource->type() === 'standalone-mysql')
|
|
@if ($dumpAll)
|
|
<x-forms.textarea rows="14" readonly label="Custom Import Command"
|
|
wire:model='restoreCommandText'></x-forms.textarea>
|
|
@else
|
|
<x-forms.input label="Custom Import Command" wire:model='mysqlRestoreCommand'></x-forms.input>
|
|
@endif
|
|
<div class="w-64 pt-2">
|
|
<x-forms.checkbox label="Backup includes all databases"
|
|
wire:model.live='dumpAll'></x-forms.checkbox>
|
|
</div>
|
|
@elseif ($resource->type() === 'standalone-mariadb')
|
|
@if ($dumpAll)
|
|
<x-forms.textarea rows="14" readonly label="Custom Import Command"
|
|
wire:model='restoreCommandText'></x-forms.textarea>
|
|
@else
|
|
<x-forms.input label="Custom Import Command" wire:model='mariadbRestoreCommand'></x-forms.input>
|
|
@endif
|
|
<div class="w-64 pt-2">
|
|
<x-forms.checkbox label="Backup includes all databases"
|
|
wire:model.live='dumpAll'></x-forms.checkbox>
|
|
</div>
|
|
@endif
|
|
<h3 class="pt-6">Backup File</h3>
|
|
<form class="flex gap-2 items-end">
|
|
<x-forms.input label="Location of the backup file on the server"
|
|
placeholder="e.g. /home/user/backup.sql.gz" wire:model='customLocation'></x-forms.input>
|
|
<x-forms.button class="w-full" wire:click='checkFile'>Check File</x-forms.button>
|
|
</form>
|
|
<div class="pt-2 text-center text-xl font-bold">
|
|
Or
|
|
</div>
|
|
<form action="/upload/backup/{{ $resource->uuid }}" class="dropzone" id="my-dropzone" wire:ignore>
|
|
@csrf
|
|
</form>
|
|
<div x-show="isUploading">
|
|
<progress max="100" x-bind:value="progress" class="progress progress-warning"></progress>
|
|
</div>
|
|
|
|
@if ($availableS3Storages->count() > 0)
|
|
<div class="pt-2 text-center text-xl font-bold">
|
|
Or
|
|
</div>
|
|
<h3 class="pt-4">Restore from S3</h3>
|
|
<div class="flex flex-col gap-2">
|
|
<x-forms.select label="S3 Storage" wire:model="s3StorageId">
|
|
<option value="">Select S3 Storage</option>
|
|
@foreach ($availableS3Storages as $storage)
|
|
<option value="{{ $storage->id }}">{{ $storage->name }}
|
|
@if ($storage->description)
|
|
- {{ $storage->description }}
|
|
@endif
|
|
</option>
|
|
@endforeach
|
|
</x-forms.select>
|
|
|
|
<x-forms.input label="S3 File Path (within bucket)"
|
|
helper="Path to the backup file in your S3 bucket, e.g., /backups/database-2025-01-15.gz"
|
|
placeholder="/backups/database-backup.gz" wire:model='s3Path'></x-forms.input>
|
|
|
|
<div class="flex gap-2">
|
|
<x-forms.button class="w-full" wire:click='checkS3File'
|
|
:disabled="!$s3StorageId || !$s3Path">
|
|
Check File
|
|
</x-forms.button>
|
|
</div>
|
|
|
|
<div x-show="s3FileSize && !s3DownloadedFile" class="pt-2">
|
|
<div class="text-sm">File found in S3 ({{ formatBytes($s3FileSize ?? 0) }})</div>
|
|
<div class="flex gap-2 pt-2">
|
|
<x-forms.button class="w-full" wire:click='downloadFromS3'>
|
|
Download & Prepare for Restore
|
|
</x-forms.button>
|
|
</div>
|
|
</div>
|
|
|
|
<div x-show="s3DownloadInProgress" class="pt-2">
|
|
<div class="text-sm text-warning">Downloading from S3... This may take a few minutes for large
|
|
backups.</div>
|
|
<livewire:activity-monitor header="S3 Download Progress" :showWaiting="false" />
|
|
</div>
|
|
|
|
<div x-show="s3DownloadedFile && !s3DownloadInProgress" class="pt-2">
|
|
<div class="text-sm text-success">File downloaded successfully and ready for restore.</div>
|
|
<div class="flex gap-2 pt-2">
|
|
<x-forms.button class="w-full" wire:click='restoreFromS3'>
|
|
Restore Database from S3
|
|
</x-forms.button>
|
|
<x-forms.button class="w-full" wire:click='cancelS3Download'>
|
|
Cancel
|
|
</x-forms.button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<h3 class="pt-6" x-show="filename && !error && !s3DownloadedFile">File Information</h3>
|
|
<div x-show="filename && !error">
|
|
<div>Location: <span x-text="filename ?? 'N/A'"></span> <span x-text="filesize">/ </span></div>
|
|
<x-forms.button class="w-full my-4" wire:click='runImport'>Restore Backup</x-forms.button>
|
|
</div>
|
|
<div class="container w-full mx-auto" x-show="$wire.importRunning">
|
|
<livewire:activity-monitor header="Database Restore Output" :showWaiting="false" />
|
|
</div>
|
|
@else
|
|
<div>Database must be running to restore a backup.</div>
|
|
@endif
|
|
@endif
|
|
</div>
|