direct-online/vito
2
0
Fork 0
mirror of https://github.com/vitodeploy/vito.git synced 2025-07-03 06:56:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

#591 - backups

Browse Source
This commit is contained in:
Saeed Vaziry
2025-05-23 18:27:24 +02:00
parent a5ce0d33b3
commit ff11fb44e0
36 changed files with 1001 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
resources/js/pages/backups/components/files.tsx Normal file
View File

@ -0,0 +1,193 @@
import { Backup } from '@/types/backup';
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import React, { ReactNode, useState } from 'react';
import { Button } from '@/components/ui/button';
import { LoaderCircle, LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
import { useForm } from '@inertiajs/react';
import { BackupFile } from '@/types/backup-file';
import { ColumnDef } from '@tanstack/react-table';
import DateTime from '@/components/date-time';
import { Badge } from '@/components/ui/badge';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { DataTable } from '@/components/data-table';
import axios from 'axios';
import { useQuery } from '@tanstack/react-query';
import { TableSkeleton } from '@/components/table-skeleton';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import RestoreBackup from '@/pages/backups/components/restore-backup';
function Delete({ file, onDeleted }: { file: BackupFile; onDeleted?: (file: BackupFile) => void }) {
const [open, setOpen] = useState(false);
const form = useForm();
const submit = () => {
form.delete(
route('backup-files.destroy', {
server: file.server_id,
backup: file.backup_id,
backupFile: file.id,
}),
{
onSuccess: () => {
setOpen(false);
if (onDeleted) {
onDeleted(file);
}
},
},
);
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
Delete
</DropdownMenuItem>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete backup file</DialogTitle>
<DialogDescription className="sr-only">Delete backup file</DialogDescription>
</DialogHeader>
<p className="p-4">Are you sure you want to this backup file?</p>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button variant="destructive" disabled={form.processing} onClick={submit}>
{form.processing && <LoaderCircleIcon className="animate-spin" />}
Delete
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
export default function BackupFiles({ backup, children }: { backup: Backup; children: ReactNode }) {
const [open, setOpen] = useState(false);
const fetchFilesQuery = useQuery({
queryKey: ['fetchFiles'],
queryFn: async () => {
const res = await axios.get(
route('backup-files', {
server: backup.server_id,
backup: backup.id,
}),
);
return res.data;
},
enabled: open,
});
const runBackupForm = useForm();
const runBackup = () => {
runBackupForm.post(route('backups.run', { server: backup.server_id, backup: backup.id }), {
onSuccess: () => {
fetchFilesQuery.refetch();
},
});
};
const columns: ColumnDef<BackupFile>[] = [
{
accessorKey: 'name',
header: 'Name',
enableColumnFilter: true,
enableSorting: true,
},
{
accessorKey: 'created_at',
header: 'Created at',
enableColumnFilter: true,
enableSorting: true,
cell: ({ row }) => {
return <DateTime date={row.original.created_at} />;
},
},
{
accessorKey: 'restored_to',
header: 'Restored to',
enableColumnFilter: true,
enableSorting: true,
},
{
accessorKey: 'restored_at',
header: 'Restored at',
enableColumnFilter: true,
enableSorting: true,
cell: ({ row }) => {
return row.original.restored_at ? <DateTime date={row.original.restored_at} /> : '';
},
},
{
accessorKey: 'status',
header: 'Status',
enableColumnFilter: true,
enableSorting: true,
cell: ({ row }) => {
return <Badge variant={row.original.status_color}>{row.original.status}</Badge>;
},
},
{
id: 'actions',
enableColumnFilter: false,
enableSorting: false,
cell: ({ row }) => {
return (
<div className="flex items-center justify-end">
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreVerticalIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<RestoreBackup backup={backup} file={row.original} onBackupRestored={() => fetchFilesQuery.refetch()}>
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>Restore</DropdownMenuItem>
</RestoreBackup>
<Delete file={row.original} onDeleted={() => fetchFilesQuery.refetch()} />
</DropdownMenuContent>
</DropdownMenu>
</div>
);
},
},
];
return (
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger asChild>{children}</SheetTrigger>
<SheetContent className="sm:max-w-4xl">
<SheetHeader>
<SheetTitle>Backup files of [{backup.database.name}]</SheetTitle>
<SheetDescription className="sr-only">Backup files</SheetDescription>
</SheetHeader>
{fetchFilesQuery.isLoading && <TableSkeleton modal />}
{fetchFilesQuery.isSuccess && !fetchFilesQuery.isLoading && <DataTable columns={columns} data={fetchFilesQuery.data.data} modal />}
<SheetFooter>
<div className="flex items-center gap-2">
<Button type="button" onClick={runBackup} disabled={runBackupForm.processing}>
{runBackupForm.processing && <LoaderCircle className="animate-spin" />}
Run backup
</Button>
<SheetClose asChild>
<Button variant="outline">Close</Button>
</SheetClose>
</div>
</SheetFooter>
</SheetContent>
</Sheet>
);
}