feat: configuration backup management with manual and auto backup
Add backup/restore functionality for the SQLite database. Users can trigger manual backups, configure automatic backups on an interval with retention policies, list/download/delete backups, and restore from any backup. - Backup engine using VACUUM INTO (safe with WAL mode) - Backup metadata tracked in DB, files stored in DATA_DIR/backups/ - Settings: backup_enabled, backup_interval_hours, backup_retention_count - API: POST/GET/DELETE /api/backups, download, restore endpoints - Autobackup via cron scheduler with configurable interval - Retention: prune on startup, after each backup (manual and auto) - Orphan cleanup: removes backup files without metadata on startup - Restore: replaces DB and triggers graceful server shutdown - Settings UI: /settings/backup with toggle, interval, retention config - Backup list with download, delete, restore actions - i18n: English and Russian translations
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
import type { Snippet } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { t } from '$lib/i18n';
|
||||
import { IconSettings, IconDatabase, IconKey, IconShield } from '$lib/components/icons';
|
||||
import { IconSettings, IconDatabase, IconKey, IconShield, IconHardDrive } from '$lib/components/icons';
|
||||
|
||||
interface Props {
|
||||
children: Snippet;
|
||||
@@ -14,7 +14,8 @@
|
||||
{ href: '/settings', labelKey: 'settings.general', icon: 'general' },
|
||||
{ href: '/settings/registries', labelKey: 'settings.registries', icon: 'registries' },
|
||||
{ href: '/settings/credentials', labelKey: 'settings.credentials', icon: 'credentials' },
|
||||
{ href: '/settings/auth', labelKey: 'settings.authentication', icon: 'auth' }
|
||||
{ href: '/settings/auth', labelKey: 'settings.authentication', icon: 'auth' },
|
||||
{ href: '/settings/backup', labelKey: 'settings.backup', icon: 'backup' }
|
||||
];
|
||||
|
||||
let currentPath = $derived($page.url.pathname);
|
||||
@@ -49,6 +50,8 @@
|
||||
<IconKey size={16} class="{isActive(item.href) ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)]'}" />
|
||||
{:else if item.icon === 'auth'}
|
||||
<IconShield size={16} class="{isActive(item.href) ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)]'}" />
|
||||
{:else if item.icon === 'backup'}
|
||||
<IconHardDrive size={16} class="{isActive(item.href) ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)]'}" />
|
||||
{/if}
|
||||
{$t(item.labelKey)}
|
||||
</a>
|
||||
|
||||
@@ -0,0 +1,274 @@
|
||||
<script lang="ts">
|
||||
import { getSettings, updateSettings, listBackups, triggerBackup, deleteBackup, restoreBackup, backupDownloadUrl } from '$lib/api';
|
||||
import type { BackupInfo } from '$lib/types';
|
||||
import FormField from '$lib/components/FormField.svelte';
|
||||
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
|
||||
import { toasts } from '$lib/stores/toast';
|
||||
import { t } from '$lib/i18n';
|
||||
import { IconLoader, IconTrash, IconRefresh } from '$lib/components/icons';
|
||||
import Skeleton from '$lib/components/Skeleton.svelte';
|
||||
import { getAuthToken } from '$lib/auth';
|
||||
|
||||
let loading = $state(true);
|
||||
let saving = $state(false);
|
||||
let creatingBackup = $state(false);
|
||||
|
||||
let backupEnabled = $state(false);
|
||||
let backupIntervalHours = $state('24');
|
||||
let backupRetentionCount = $state('10');
|
||||
let backups = $state<BackupInfo[]>([]);
|
||||
|
||||
let confirmDeleteId = $state('');
|
||||
let confirmRestoreId = $state('');
|
||||
|
||||
async function loadData() {
|
||||
loading = true;
|
||||
try {
|
||||
const [settings, backupList] = await Promise.all([
|
||||
getSettings(),
|
||||
listBackups()
|
||||
]);
|
||||
backupEnabled = settings.backup_enabled ?? false;
|
||||
backupIntervalHours = String(settings.backup_interval_hours ?? 24);
|
||||
backupRetentionCount = String(settings.backup_retention_count ?? 10);
|
||||
backups = backupList ?? [];
|
||||
} catch (err) {
|
||||
toasts.error(err instanceof Error ? err.message : 'Failed to load backup settings');
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
saving = true;
|
||||
try {
|
||||
await updateSettings({
|
||||
backup_enabled: backupEnabled,
|
||||
backup_interval_hours: Math.max(1, parseInt(backupIntervalHours, 10) || 24),
|
||||
backup_retention_count: Math.max(1, parseInt(backupRetentionCount, 10) || 10)
|
||||
} as any);
|
||||
toasts.success($t('settingsBackup.saved'));
|
||||
} catch (err) {
|
||||
toasts.error(err instanceof Error ? err.message : $t('settingsBackup.saveFailed'));
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleBackupNow() {
|
||||
creatingBackup = true;
|
||||
try {
|
||||
const backup = await triggerBackup();
|
||||
backups = [backup, ...backups];
|
||||
toasts.success($t('settingsBackup.backupCreated'));
|
||||
} catch (err) {
|
||||
toasts.error(err instanceof Error ? err.message : $t('settingsBackup.backupFailed'));
|
||||
} finally {
|
||||
creatingBackup = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
const id = confirmDeleteId;
|
||||
confirmDeleteId = '';
|
||||
try {
|
||||
await deleteBackup(id);
|
||||
backups = backups.filter(b => b.id !== id);
|
||||
toasts.success($t('settingsBackup.deleted'));
|
||||
} catch (err) {
|
||||
toasts.error(err instanceof Error ? err.message : $t('settingsBackup.deleteFailed'));
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRestore() {
|
||||
const id = confirmRestoreId;
|
||||
confirmRestoreId = '';
|
||||
try {
|
||||
await restoreBackup(id);
|
||||
toasts.success($t('settingsBackup.restored'));
|
||||
} catch (err) {
|
||||
toasts.error(err instanceof Error ? err.message : $t('settingsBackup.restoreFailed'));
|
||||
}
|
||||
}
|
||||
|
||||
function handleDownload(id: string) {
|
||||
const token = getAuthToken();
|
||||
const url = backupDownloadUrl(id);
|
||||
// Open download in new tab with auth header via fetch+blob
|
||||
fetch(url, { headers: { Authorization: `Bearer ${token}` } })
|
||||
.then(r => {
|
||||
if (!r.ok) throw new Error('Download failed');
|
||||
return r.blob();
|
||||
})
|
||||
.then(blob => {
|
||||
const a = document.createElement('a');
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = '';
|
||||
a.click();
|
||||
URL.revokeObjectURL(a.href);
|
||||
})
|
||||
.catch(err => toasts.error(err instanceof Error ? err.message : 'Download failed'));
|
||||
}
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
if (!dateStr) return '';
|
||||
const d = new Date(dateStr + 'Z');
|
||||
return d.toLocaleString();
|
||||
}
|
||||
|
||||
$effect(() => { loadData(); });
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$t('settingsBackup.title')} - {$t('app.name')}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="space-y-6">
|
||||
{#if loading}
|
||||
<div class="space-y-4">
|
||||
<Skeleton height="2rem" width="12rem" />
|
||||
<Skeleton height="10rem" />
|
||||
<Skeleton height="15rem" />
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Backup Settings -->
|
||||
<div class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-6 shadow-[var(--shadow-sm)]">
|
||||
<h2 class="mb-1 text-lg font-semibold text-[var(--text-primary)]">{$t('settingsBackup.title')}</h2>
|
||||
<p class="mb-4 text-sm text-[var(--text-secondary)]">{$t('settingsBackup.description')}</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Auto backup toggle -->
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
<input type="checkbox" bind:checked={backupEnabled}
|
||||
class="h-4 w-4 rounded border-[var(--border-primary)] text-[var(--color-brand-600)] focus:ring-[var(--color-brand-500)]" />
|
||||
<div>
|
||||
<span class="text-sm font-medium text-[var(--text-primary)]">{$t('settingsBackup.autoBackup')}</span>
|
||||
<p class="text-xs text-[var(--text-tertiary)]">{$t('settingsBackup.autoBackupHelp')}</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{#if backupEnabled}
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 ml-7">
|
||||
<FormField
|
||||
label={$t('settingsBackup.interval')}
|
||||
name="backupIntervalHours"
|
||||
type="number"
|
||||
bind:value={backupIntervalHours}
|
||||
placeholder="24"
|
||||
helpText={$t('settingsBackup.intervalHelp')}
|
||||
/>
|
||||
<FormField
|
||||
label={$t('settingsBackup.retention')}
|
||||
name="backupRetentionCount"
|
||||
type="number"
|
||||
bind:value={backupRetentionCount}
|
||||
placeholder="10"
|
||||
helpText={$t('settingsBackup.retentionHelp')}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button onclick={handleSave} disabled={saving}
|
||||
class="inline-flex items-center gap-2 rounded-lg bg-[var(--color-brand-600)] px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-150 hover:bg-[var(--color-brand-700)] disabled:opacity-50 active:animate-press">
|
||||
{#if saving}<IconLoader size={16} />{/if}
|
||||
{saving ? $t('settingsBackup.saving') : $t('settingsBackup.save')}
|
||||
</button>
|
||||
<button onclick={handleBackupNow} disabled={creatingBackup}
|
||||
class="inline-flex items-center gap-2 rounded-lg border border-[var(--color-brand-600)] px-4 py-2.5 text-sm font-medium text-[var(--color-brand-600)] hover:bg-[var(--color-brand-50)] disabled:opacity-50 transition-colors active:animate-press">
|
||||
{#if creatingBackup}<IconLoader size={16} />{/if}
|
||||
{creatingBackup ? $t('settingsBackup.creatingBackup') : $t('settingsBackup.backupNow')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backup List -->
|
||||
<div class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] shadow-[var(--shadow-sm)] overflow-hidden">
|
||||
<div class="flex items-center justify-between px-6 py-4 border-b border-[var(--border-primary)]">
|
||||
<h2 class="text-lg font-semibold text-[var(--text-primary)]">{$t('settingsBackup.backupList')}</h2>
|
||||
<button onclick={() => loadData()}
|
||||
class="inline-flex items-center gap-1.5 rounded-lg border border-[var(--border-primary)] px-3 py-1.5 text-sm text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] transition-colors">
|
||||
<IconRefresh size={14} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if backups.length === 0}
|
||||
<div class="p-8 text-center text-sm text-[var(--text-tertiary)]">
|
||||
{$t('settingsBackup.noBackups')}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-[var(--border-primary)] bg-[var(--surface-card-hover)]">
|
||||
<th class="px-4 py-3 text-left font-medium text-[var(--text-secondary)]">{$t('settingsBackup.columnFilename')}</th>
|
||||
<th class="px-4 py-3 text-left font-medium text-[var(--text-secondary)]">{$t('settingsBackup.columnSize')}</th>
|
||||
<th class="px-4 py-3 text-left font-medium text-[var(--text-secondary)]">{$t('settingsBackup.columnType')}</th>
|
||||
<th class="px-4 py-3 text-left font-medium text-[var(--text-secondary)]">{$t('settingsBackup.columnDate')}</th>
|
||||
<th class="px-4 py-3 text-right font-medium text-[var(--text-secondary)]">{$t('settingsBackup.columnActions')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each backups as backup}
|
||||
<tr class="border-b border-[var(--border-primary)] last:border-b-0 hover:bg-[var(--surface-card-hover)] transition-colors">
|
||||
<td class="px-4 py-3 font-mono text-xs text-[var(--text-primary)]">{backup.filename}</td>
|
||||
<td class="px-4 py-3 text-[var(--text-secondary)]">{formatSize(backup.size_bytes)}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium
|
||||
{backup.backup_type === 'auto'
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
|
||||
: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'}">
|
||||
{backup.backup_type === 'auto' ? $t('settingsBackup.typeAuto') : $t('settingsBackup.typeManual')}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-[var(--text-secondary)]">{formatDate(backup.created_at)}</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<button onclick={() => handleDownload(backup.id)}
|
||||
class="rounded-lg px-2 py-1 text-xs text-[var(--color-brand-600)] hover:bg-[var(--color-brand-50)] transition-colors">
|
||||
{$t('settingsBackup.download')}
|
||||
</button>
|
||||
<button onclick={() => { confirmRestoreId = backup.id; }}
|
||||
class="rounded-lg px-2 py-1 text-xs text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] transition-colors">
|
||||
{$t('settingsBackup.restore')}
|
||||
</button>
|
||||
<button onclick={() => { confirmDeleteId = backup.id; }}
|
||||
class="rounded-lg px-2 py-1 text-xs text-[var(--color-danger)] hover:bg-[var(--color-danger-light)] transition-colors">
|
||||
<IconTrash size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Delete confirmation -->
|
||||
<ConfirmDialog
|
||||
open={confirmDeleteId !== ''}
|
||||
title={$t('settingsBackup.delete')}
|
||||
message={$t('settingsBackup.deleteConfirm')}
|
||||
onconfirm={handleDelete}
|
||||
oncancel={() => { confirmDeleteId = ''; }}
|
||||
/>
|
||||
|
||||
<!-- Restore confirmation -->
|
||||
<ConfirmDialog
|
||||
open={confirmRestoreId !== ''}
|
||||
title={$t('settingsBackup.restore')}
|
||||
message={$t('settingsBackup.restoreConfirm') + '\n\n' + $t('settingsBackup.restoreWarning')}
|
||||
onconfirm={handleRestore}
|
||||
oncancel={() => { confirmRestoreId = ''; }}
|
||||
/>
|
||||
Reference in New Issue
Block a user