mirror of
https://github.com/tiennm99/coolify.git
synced 2026-08-20 10:23:30 +00:00
Andras Bacsai
9c0908f0fc
Gate public TCP proxy until a port is set, show loading while saving access, and open proxy logs in process-dialog. Compact backup execution actions, add Postgres general section anchors, and tint resource Actions icons with warning color.
264 lines
15 KiB
PHP
264 lines
15 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'),
|
|
s3FileSize: $wire.entangle('s3FileSize'),
|
|
s3StorageId: $wire.entangle('s3StorageId'),
|
|
s3Path: $wire.entangle('s3Path'),
|
|
restoreType: null
|
|
}">
|
|
<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;
|
|
$wire.customLocation = '';
|
|
});
|
|
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
|
|
<div class="application-settings-workspace flex flex-col gap-6">
|
|
<x-callout type="danger" title="Existing data will be replaced">
|
|
Restoring a backup is destructive. Review the source and import command before continuing.
|
|
</x-callout>
|
|
|
|
<x-application.settings-section title="Restore configuration"
|
|
description="Configure how the selected backup is applied to this database.">
|
|
<div class="space-y-4">
|
|
@if ($resourceDbType === 'standalone-postgresql')
|
|
@if ($dumpAll)
|
|
<x-forms.textarea rows="6" readonly label="Import command"
|
|
wire:model="restoreCommandText" canGate="update"
|
|
:canResource="$this->resource" />
|
|
@else
|
|
<x-forms.input label="Import command"
|
|
helper="Add --clean to replace conflicting objects or --verbose for detailed logs."
|
|
wire:model="postgresqlRestoreCommand" canGate="update"
|
|
:canResource="$this->resource" />
|
|
@endif
|
|
@elseif ($resourceDbType === 'standalone-mysql')
|
|
@if ($dumpAll)
|
|
<x-forms.textarea rows="10" readonly label="Import command"
|
|
wire:model="restoreCommandText" canGate="update"
|
|
:canResource="$this->resource" />
|
|
@else
|
|
<x-forms.input label="Import command" wire:model="mysqlRestoreCommand"
|
|
canGate="update" :canResource="$this->resource" />
|
|
@endif
|
|
@elseif ($resourceDbType === 'standalone-mariadb')
|
|
@if ($dumpAll)
|
|
<x-forms.textarea rows="10" readonly label="Import command"
|
|
wire:model="restoreCommandText" canGate="update"
|
|
:canResource="$this->resource" />
|
|
@else
|
|
<x-forms.input label="Import command" wire:model="mariadbRestoreCommand"
|
|
canGate="update" :canResource="$this->resource" />
|
|
@endif
|
|
@endif
|
|
<div class="max-w-sm">
|
|
<x-forms.listbox id="dumpAll" label="Backup contents" live :options="[
|
|
['value' => true, 'label' => 'Backup contains all databases'],
|
|
['value' => false, 'label' => 'Backup contains one database'],
|
|
]" />
|
|
</div>
|
|
</div>
|
|
</x-application.settings-section>
|
|
|
|
<x-application.settings-section title="Backup source"
|
|
description="Choose a local file or an object stored in S3.">
|
|
<div class="grid gap-3 sm:grid-cols-2">
|
|
<button type="button" @click="restoreType = 'file'"
|
|
class="flex min-h-20 items-center gap-3 rounded-[10px] border p-3 text-left transition-colors"
|
|
:class="restoreType === 'file'
|
|
? 'border-coollabs/35 bg-coollabs/[0.06] text-coollabs dark:border-warning/30 dark:bg-warning/[0.08] dark:text-warning'
|
|
: 'border-neutral-200 bg-white hover:border-neutral-300 dark:border-white/[0.08] dark:bg-white/[0.025] dark:hover:border-white/[0.14]'">
|
|
<span
|
|
class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-white/[0.06]">
|
|
<x-reicon name="file" class="size-4" />
|
|
</span>
|
|
<span>
|
|
<span class="block text-[13px] font-semibold">File</span>
|
|
<span class="mt-0.5 block text-[11px] text-neutral-500 dark:text-fg-faint">Upload a
|
|
backup or use a server path.</span>
|
|
</span>
|
|
</button>
|
|
|
|
@if (count($availableS3Storages) > 0)
|
|
<button type="button" @click="restoreType = 's3'"
|
|
class="flex min-h-20 items-center gap-3 rounded-[10px] border p-3 text-left transition-colors"
|
|
:class="restoreType === 's3'
|
|
? 'border-coollabs/35 bg-coollabs/[0.06] text-coollabs dark:border-warning/30 dark:bg-warning/[0.08] dark:text-warning'
|
|
: 'border-neutral-200 bg-white hover:border-neutral-300 dark:border-white/[0.08] dark:bg-white/[0.025] dark:hover:border-white/[0.14]'">
|
|
<span
|
|
class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-white/[0.06]">
|
|
<x-reicon name="storages" class="size-4" />
|
|
</span>
|
|
<span>
|
|
<span class="block text-[13px] font-semibold">S3 storage</span>
|
|
<span class="mt-0.5 block text-[11px] text-neutral-500 dark:text-fg-faint">Download
|
|
a backup from an S3 bucket.</span>
|
|
</span>
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- File Restore Section --}}
|
|
@can('update', $this->resource)
|
|
<div x-cloak x-show="restoreType === 'file'"
|
|
class="mt-4 rounded-[10px] border border-neutral-200 bg-neutral-50 p-4 dark:border-white/[0.08] dark:bg-white/[0.025]">
|
|
<form class="flex flex-col gap-3 sm:flex-row sm:items-end">
|
|
<div class="min-w-0 flex-1">
|
|
<x-forms.input label="File path on the server"
|
|
placeholder="/home/user/backup.sql.gz" wire:model="customLocation"
|
|
x-model="$wire.customLocation" canGate="update"
|
|
:canResource="$this->resource" />
|
|
</div>
|
|
<x-forms.button wire:click="checkFile" x-bind:disabled="!$wire.customLocation"
|
|
canGate="update" :canResource="$this->resource">Check file</x-forms.button>
|
|
</form>
|
|
|
|
<div class="my-4 flex items-center gap-3 text-[10px] font-medium uppercase tracking-wide text-neutral-400 dark:text-fg-faint">
|
|
<span class="h-px flex-1 bg-neutral-200 dark:bg-white/[0.08]"></span>
|
|
or upload
|
|
<span class="h-px flex-1 bg-neutral-200 dark:bg-white/[0.08]"></span>
|
|
</div>
|
|
|
|
<form action="{{ route('upload.backup', ['databaseUuid' => $resourceUuid]) }}"
|
|
class="dropzone rounded-lg! border! border-dashed! border-neutral-300! bg-white! dark:border-white/[0.12]! dark:bg-white/[0.025]!"
|
|
id="my-dropzone" wire:ignore>
|
|
@csrf
|
|
</form>
|
|
<div x-show="isUploading" class="mt-3 h-1.5 overflow-hidden rounded-full bg-neutral-200 dark:bg-white/[0.08]">
|
|
<div class="h-full rounded-full bg-coollabs dark:bg-warning"
|
|
:style="`width: ${progress}%`"></div>
|
|
</div>
|
|
|
|
<div x-cloak x-show="filename && !error"
|
|
class="mt-4 flex flex-col gap-3 rounded-lg border border-neutral-200 bg-white p-3 dark:border-white/[0.08] dark:bg-white/[0.03] sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="min-w-0">
|
|
<p class="truncate text-[12px] font-medium" x-text="filename ?? 'N/A'"></p>
|
|
<p class="mt-0.5 text-[11px] text-neutral-500 dark:text-fg-faint"
|
|
x-show="filesize" x-text="filesize"></p>
|
|
</div>
|
|
<div class="shrink-0">
|
|
<x-modal-confirmation title="Restore Database from File?" buttonTitle="Restore from File"
|
|
submitAction="runImport" isErrorButton>
|
|
<x-slot:button-title>
|
|
Restore from file
|
|
</x-slot:button-title>
|
|
This will:
|
|
<ul class="list-disc list-inside pt-2">
|
|
<li>Copy backup file to database container</li>
|
|
<li>Execute restore command</li>
|
|
</ul>
|
|
<p class="pt-2 font-semibold text-error">All existing data will be replaced.</p>
|
|
</x-modal-confirmation>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endcan
|
|
|
|
{{-- S3 Restore Section --}}
|
|
@if (count($availableS3Storages) > 0)
|
|
@can('update', $this->resource)
|
|
@php
|
|
$s3StorageOptions = collect($availableS3Storages)
|
|
->map(fn ($storage) => [
|
|
'value' => $storage['id'],
|
|
'label' => $storage['name']
|
|
.($storage['description'] ? ' - '.$storage['description'] : ''),
|
|
])
|
|
->values()
|
|
->all();
|
|
@endphp
|
|
<div x-cloak x-show="restoreType === 's3'"
|
|
class="mt-4 rounded-[10px] border border-neutral-200 bg-neutral-50 p-4 dark:border-white/[0.08] dark:bg-white/[0.025]">
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<x-forms.listbox id="s3StorageId" label="S3 storage" :options="$s3StorageOptions"
|
|
placeholder="Select storage" live />
|
|
|
|
<x-forms.input label="File path"
|
|
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.blur="s3Path"
|
|
wire:keydown.enter="checkS3File" canGate="update"
|
|
:canResource="$this->resource" />
|
|
</div>
|
|
|
|
<div class="mt-3 flex justify-end">
|
|
<x-forms.button wire:click="checkS3File" x-bind:disabled="!s3StorageId || !s3Path"
|
|
canGate="update" :canResource="$this->resource">
|
|
Check file
|
|
</x-forms.button>
|
|
</div>
|
|
|
|
@if ($s3FileSize)
|
|
<div
|
|
class="mt-4 flex flex-col gap-3 rounded-lg border border-neutral-200 bg-white p-3 dark:border-white/[0.08] dark:bg-white/[0.03] sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="min-w-0">
|
|
<p class="truncate text-[12px] font-medium">{{ $s3Path }}</p>
|
|
<p class="mt-0.5 text-[11px] text-neutral-500 dark:text-fg-faint">
|
|
{{ formatBytes($s3FileSize ?? 0) }}</p>
|
|
</div>
|
|
<div class="shrink-0">
|
|
<x-modal-confirmation title="Restore Database from S3?" buttonTitle="Restore from S3"
|
|
submitAction="restoreFromS3" isErrorButton>
|
|
<x-slot:button-title>
|
|
Restore from S3
|
|
</x-slot:button-title>
|
|
This will:
|
|
<ul class="list-disc list-inside pt-2">
|
|
<li>Download backup from S3 storage</li>
|
|
<li>Copy file into database container</li>
|
|
<li>Execute restore command</li>
|
|
</ul>
|
|
<p class="pt-2 font-semibold text-error">All existing data will be replaced.</p>
|
|
</x-modal-confirmation>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endcan
|
|
@endif
|
|
</x-application.settings-section>
|
|
</div>
|
|
|
|
<x-process-dialog @databaserestore.window="processDialogOpen = true" closeWithX size="xl">
|
|
<x-slot:title>Database Restore Output</x-slot:title>
|
|
<x-slot:content>
|
|
<div class="flex h-full min-h-0 flex-col" wire:ignore>
|
|
<livewire:activity-monitor wire:key="database-restore-{{ $resourceUuid }}" header="Logs" fullHeight />
|
|
</div>
|
|
</x-slot:content>
|
|
</x-process-dialog>
|
|
</div>
|