LathanDevers
59 lines
3.1 KiB
TypeScript
59 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
|
import BackButton from '@/components/ui/BackButton';
|
|
|
|
// On pourrait extraire ces données dans un Custom Hook plus tard
|
|
const BACKUP_HISTORY = [
|
|
{ date: 'Aujourd\'hui, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '12 GB' },
|
|
{ date: 'Hier, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '8.4 GB' },
|
|
{ date: 'Dimanche, 01:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Totale (Full)', size: '240 GB' },
|
|
{ date: 'Samedi, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '4.1 GB' },
|
|
];
|
|
|
|
export const Backups: React.FC = () => {
|
|
|
|
return (
|
|
<div className="max-w-5xl mx-auto py-8 px-8">
|
|
<BackButton to="/dashboard" label="Retour au tableau de bord" className="mb-6" />
|
|
|
|
<Card>
|
|
<CardHeader className="bg-slate-50">
|
|
<h3 className="text-xl font-bold text-slate-900">Historique des Sauvegardes PRA</h3>
|
|
<p className="text-sm text-slate-500">Journal d'exécution de la règle 3-2-1-1-0</p>
|
|
</CardHeader>
|
|
|
|
{/* On retire le padding sur le content pour que le tableau touche les bords */}
|
|
<CardContent className="p-0 overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-slate-200">
|
|
<thead className="bg-white">
|
|
<tr>
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Date d'exécution</th>
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Cible (Nœud)</th>
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Type</th>
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Volume</th>
|
|
<th className="px-6 py-4 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">Statut</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-slate-100">
|
|
{BACKUP_HISTORY.map((bkp, i) => (
|
|
<tr key={i} className="hover:bg-slate-50 transition-colors">
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-900">{bkp.date}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.node}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.type}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.size}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-right">
|
|
<span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-200/60">
|
|
Succès (Chiffré)
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Backups; |