feat: adicionar sistema de backup e badge editável na página inicial
This commit is contained in:
Erik
270
frontend/src/components/admin/BackupManager.tsx
Normal file
270
frontend/src/components/admin/BackupManager.tsx
Normal file
@@ -0,0 +1,270 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useToast } from '@/contexts/ToastContext';
|
||||
|
||||
interface BackupInfo {
|
||||
id: string;
|
||||
timestamp: string;
|
||||
date: string;
|
||||
size: number;
|
||||
filename: string;
|
||||
status: 'success' | 'error';
|
||||
message: string;
|
||||
}
|
||||
|
||||
interface BackupsListResponse {
|
||||
success: boolean;
|
||||
backups: BackupInfo[];
|
||||
count: number;
|
||||
}
|
||||
|
||||
export function BackupManager() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [backups, setBackups] = useState<BackupInfo[]>([]);
|
||||
const [listLoading, setListLoading] = useState(true);
|
||||
const { success, error: showError } = useToast();
|
||||
|
||||
// Buscar lista de backups ao carregar
|
||||
useEffect(() => {
|
||||
fetchBackups();
|
||||
}, []);
|
||||
|
||||
const fetchBackups = async () => {
|
||||
try {
|
||||
setListLoading(true);
|
||||
const token = localStorage.getItem('auth_token') || '';
|
||||
|
||||
const response = await fetch('/api/backup', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data: BackupsListResponse = await response.json();
|
||||
setBackups(data.backups || []);
|
||||
} else {
|
||||
showError('Erro ao carregar backups');
|
||||
}
|
||||
} catch (err) {
|
||||
showError('Erro ao carregar backups: ' + (err as Error).message);
|
||||
} finally {
|
||||
setListLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const createBackup = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const token = localStorage.getItem('auth_token') || '';
|
||||
|
||||
const response = await fetch('/api/backup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok || response.status === 201) {
|
||||
success('Backup criado com sucesso!');
|
||||
// Atualizar lista de backups
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
await fetchBackups();
|
||||
} else {
|
||||
showError(data.error || 'Erro ao criar backup');
|
||||
}
|
||||
} catch (err) {
|
||||
showError('Erro ao criar backup: ' + (err as Error).message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteBackup = async (backupId: string) => {
|
||||
if (!confirm('Tem certeza que deseja remover este backup?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('auth_token') || '';
|
||||
|
||||
const response = await fetch(`/api/backup?id=${backupId}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
success('Backup removido com sucesso!');
|
||||
await fetchBackups();
|
||||
} else {
|
||||
showError(data.error || 'Erro ao remover backup');
|
||||
}
|
||||
} catch (err) {
|
||||
showError('Erro ao remover backup: ' + (err as Error).message);
|
||||
}
|
||||
};
|
||||
|
||||
const downloadBackup = async (filename: string) => {
|
||||
try {
|
||||
const token = localStorage.getItem('auth_token') || '';
|
||||
|
||||
const response = await fetch(`/api/backup/download?file=${filename}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
} else {
|
||||
showError('Erro ao baixar backup');
|
||||
}
|
||||
} catch (err) {
|
||||
showError('Erro ao baixar backup: ' + (err as Error).message);
|
||||
}
|
||||
};
|
||||
|
||||
const formatSize = (bytes: number) => {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
const formatDate = (isoString: string) => {
|
||||
return new Date(isoString).toLocaleString('pt-BR');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Botão de Criar Backup */}
|
||||
<div className="bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border border-blue-200 dark:border-blue-800 rounded-2xl p-6">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
|
||||
<i className="ri-database-backup-line text-blue-600 dark:text-blue-400 text-2xl"></i>
|
||||
Criar Novo Backup
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Realize um backup completo do banco de dados e arquivos MinIO
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={createBackup}
|
||||
disabled={loading}
|
||||
className="px-6 py-3 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors whitespace-nowrap flex items-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<i className="ri-loader-4-line animate-spin"></i>
|
||||
Criando...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="ri-download-cloud-2-line"></i>
|
||||
Criar Backup Agora
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lista de Backups */}
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<i className="ri-archive-line text-primary"></i>
|
||||
Backups Salvos ({backups.length})
|
||||
</h3>
|
||||
|
||||
{listLoading ? (
|
||||
<div className="text-center py-8">
|
||||
<i className="ri-loader-4-line animate-spin text-primary text-3xl"></i>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-2">Carregando backups...</p>
|
||||
</div>
|
||||
) : backups.length === 0 ? (
|
||||
<div className="text-center py-12 bg-gray-50 dark:bg-white/5 rounded-xl border border-gray-200 dark:border-white/10">
|
||||
<i className="ri-file-archive-line text-gray-400 text-4xl mb-3 block"></i>
|
||||
<p className="text-gray-600 dark:text-gray-400">Nenhum backup realizado ainda</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{backups.map((backup) => (
|
||||
<div
|
||||
key={backup.id}
|
||||
className="bg-white dark:bg-secondary p-4 rounded-xl border border-gray-200 dark:border-white/10 hover:shadow-md transition-shadow flex items-center justify-between gap-4"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className={`w-3 h-3 rounded-full ${
|
||||
backup.status === 'success'
|
||||
? 'bg-green-500'
|
||||
: 'bg-red-500'
|
||||
}`}></div>
|
||||
<h4 className="font-bold text-gray-900 dark:text-white truncate">
|
||||
{backup.filename}
|
||||
</h4>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
<i className="ri-calendar-line mr-1"></i>
|
||||
{formatDate(backup.timestamp)}
|
||||
<span className="mx-2">•</span>
|
||||
<i className="ri-hard-drive-line mr-1"></i>
|
||||
{formatSize(backup.size)}
|
||||
</p>
|
||||
{backup.message && (
|
||||
<p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
|
||||
{backup.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<button
|
||||
onClick={() => downloadBackup(backup.filename)}
|
||||
title="Baixar backup"
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors text-blue-600 dark:text-blue-400"
|
||||
>
|
||||
<i className="ri-download-line text-xl"></i>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteBackup(backup.id)}
|
||||
title="Remover backup"
|
||||
className="p-2 hover:bg-red-100 dark:hover:bg-red-900/20 rounded-lg transition-colors text-red-600 dark:text-red-400"
|
||||
>
|
||||
<i className="ri-delete-bin-6-line text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Informações */}
|
||||
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-4">
|
||||
<p className="text-sm text-amber-900 dark:text-amber-200">
|
||||
<i className="ri-information-line mr-2"></i>
|
||||
Os backups incluem banco de dados PostgreSQL e todos os arquivos do MinIO.
|
||||
Armazene-os em local seguro para recuperação em caso de necessidade.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user