#591 - backups

resources/js/components/app-sidebar.tsx

@@ -14,7 +14,7 @@ import {
 } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/react';
-import { BookOpen, CogIcon, Folder, ServerIcon } from 'lucide-react';
+import { BookOpen, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CogIcon, Folder, MinusIcon, PlusIcon, ServerIcon } from 'lucide-react';
 import AppLogo from './app-logo';
 import { Icon } from '@/components/icon';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
@@ -126,8 +126,8 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?
                       return (
                         <Collapsible
                           key={`${item.title}-${item.href}`}
-                          open={isActive || open === item}
-                          onOpenChange={() => setOpen(item)}
+                          defaultOpen={isActive}
+                          onOpenChange={(value) => (value ? setOpen(item) : setOpen(undefined))}
                           className="group/collapsible"
                         >
                           <SidebarMenuItem>
@@ -135,6 +135,7 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?
                               <SidebarMenuButton>
                                 {item.icon && <item.icon />}
                                 <span>{item.title}</span>
+                                <ChevronRightIcon className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
                               </SidebarMenuButton>
                             </CollapsibleTrigger>
                             <CollapsibleContent>

resources/js/layouts/app/layout.tsx

@@ -22,6 +22,8 @@ export default function Layout({
 
   if (page.props.flash && page.props.flash.success) toast.success(page.props.flash.success);
   if (page.props.flash && page.props.flash.error) toast.error(page.props.flash.error);
+  if (page.props.flash && page.props.flash.info) toast.info(page.props.flash.info);
+  if (page.props.flash && page.props.flash.warning) toast.error(page.props.flash.warning);
 
   return (
     <SidebarProvider

resources/js/layouts/server/layout.tsx

@@ -35,7 +35,7 @@ export default function ServerLayout({ server, children }: { server: Server; chi
         },
         {
           title: 'Backups',
-          href: '/backups',
+          href: route('database-backups', { server: server.id }),
           icon: CloudUploadIcon,
         },
       ],

resources/js/pages/database-backups/components/columns.tsx

@@ -0,0 +1,132 @@
+import { ColumnDef } from '@tanstack/react-table';
+import DateTime from '@/components/date-time';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Backup } from '@/types/backup';
+
+function Delete({ backup }: { backup: Backup }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('database-backups.destroy', { server: backup.server_id, backup: backup.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
+          Delete
+        </DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete backup [{backup.database.name}]</DialogTitle>
+          <DialogDescription className="sr-only">Delete backup</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">
+          Are you sure you want to this backup: <strong>{backup.database.name}</strong>? All backup files will be deleted and this action cannot be
+          undone.
+        </p>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button variant="destructive" disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const columns: ColumnDef<Backup>[] = [
+  {
+    accessorKey: 'database_id',
+    header: 'Database',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <span>{row.original.database.name}</span>;
+    },
+  },
+  {
+    accessorKey: 'storage_id',
+    header: 'Storage',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <span>{row.original.storage.name}</span>;
+    },
+  },
+  {
+    accessorKey: 'created_at',
+    header: 'Created at',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <DateTime date={row.original.created_at} />;
+    },
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <Badge variant={row.original.status_color}>{row.original.status}</Badge>;
+    },
+  },
+  {
+    accessorKey: 'last_file',
+    header: 'Last file status',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return row.original.last_file && <Badge variant={row.original.last_file.status_color}>{row.original.last_file.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">
+              <Delete backup={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/database-backups/components/create-backup.tsx

@@ -0,0 +1,181 @@
+import { Server } from '@/types/server';
+import React, { FormEvent, ReactNode, useState } from 'react';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { useForm, usePage } from '@inertiajs/react';
+import { Button } from '@/components/ui/button';
+import { LoaderCircle, WifiIcon } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Database } from '@/types/database';
+import axios from 'axios';
+import InputError from '@/components/ui/input-error';
+import { StorageProvider } from '@/types/storage-provider';
+import ConnectStorageProvider from '@/pages/storage-providers/components/connect-storage-provider';
+import { SharedData } from '@/types';
+import { Input } from '@/components/ui/input';
+
+export default function CreateBackup({ server, children }: { server: Server; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const [databases, setDatabases] = useState<Database[]>([]);
+  const [storageProviders, setStorageProviders] = useState<StorageProvider[]>([]);
+  const page = usePage<SharedData>();
+
+  const form = useForm<{
+    database: string;
+    storage: string;
+    interval: string;
+    custom_interval: string;
+    keep: string;
+  }>({
+    database: '',
+    storage: '',
+    interval: 'daily',
+    custom_interval: '',
+    keep: '10',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(route('database-backups.store', { server: server.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  const onOpenChange = (open: boolean) => {
+    setOpen(open);
+    if (open) {
+      fetchDatabases();
+      fetchStorageProviders();
+    }
+  };
+
+  const fetchDatabases = () => {
+    axios.get(route('databases.json', { server: server.id })).then((response) => {
+      setDatabases(response.data);
+    });
+  };
+
+  const fetchStorageProviders = () => {
+    axios.get(route('storage-providers.json')).then((response) => {
+      setStorageProviders(response.data);
+    });
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetTrigger asChild>{children}</SheetTrigger>
+      <SheetContent className="sm:max-w-3xl">
+        <SheetHeader>
+          <SheetTitle>Create backup</SheetTitle>
+          <SheetDescription className="sr-only">Create a new backup</SheetDescription>
+        </SheetHeader>
+        <Form id="create-backup" onSubmit={submit} className="p-4">
+          <FormFields>
+            {/*database*/}
+            <FormField>
+              <Label htmlFor="database">Database</Label>
+              <Select value={form.data.database} onValueChange={(value) => form.setData('database', value)}>
+                <SelectTrigger id="database">
+                  <SelectValue placeholder="Select a database" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {databases.map((database) => (
+                      <SelectItem key={`db-${database.name}`} value={database.id.toString()}>
+                        {database.name}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.database} />
+            </FormField>
+
+            {/*storage*/}
+            <FormField>
+              <Label htmlFor="storage">Storage</Label>
+              <div className="flex items-center gap-2">
+                <Select value={form.data.storage} onValueChange={(value) => form.setData('storage', value)}>
+                  <SelectTrigger id="storage">
+                    <SelectValue placeholder="Select a storage" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      {storageProviders.map((storageProvider) => (
+                        <SelectItem key={`sp-${storageProvider.name}`} value={storageProvider.id.toString()}>
+                          {storageProvider.name}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+                <ConnectStorageProvider onProviderAdded={() => fetchStorageProviders()}>
+                  <Button variant="outline">
+                    <WifiIcon />
+                  </Button>
+                </ConnectStorageProvider>
+              </div>
+              <InputError message={form.errors.storage} />
+            </FormField>
+
+            {/*interval*/}
+            <FormField>
+              <Label htmlFor="interval">Interval</Label>
+              <Select value={form.data.interval} onValueChange={(value) => form.setData('interval', value)}>
+                <SelectTrigger id="interval">
+                  <SelectValue placeholder="Select an interval" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {Object.entries(page.props.configs.cronjob_intervals).map(([key, value]) => (
+                      <SelectItem key={`interval-${key}`} value={key}>
+                        {value}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.interval} />
+            </FormField>
+
+            {/*custom interval*/}
+            {form.data.interval === 'custom' && (
+              <FormField>
+                <Label htmlFor="custom_interval">Custom interval (crontab)</Label>
+                <Input
+                  id="custom_interval"
+                  name="custom_interval"
+                  value={form.data.custom_interval}
+                  onChange={(e) => form.setData('custom_interval', e.target.value)}
+                  placeholder="* * * * *"
+                />
+                <InputError message={form.errors.custom_interval} />
+              </FormField>
+            )}
+
+            {/*backups to keep*/}
+            <FormField>
+              <Label htmlFor="keep">Backups to keep</Label>
+              <Input id="keep" name="keep" value={form.data.keep} onChange={(e) => form.setData('keep', e.target.value)} />
+              <InputError message={form.errors.keep} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <SheetFooter>
+          <div className="flex items-center gap-2">
+            <Button type="button" onClick={submit} disabled={form.processing}>
+              {form.processing && <LoaderCircle className="animate-spin" />}
+              Create
+            </Button>
+            <SheetClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </SheetClose>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

resources/js/pages/database-backups/index.tsx

@@ -0,0 +1,52 @@
+import { Head, usePage } from '@inertiajs/react';
+import { Server } from '@/types/server';
+import Container from '@/components/container';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import ServerLayout from '@/layouts/server/layout';
+import React from 'react';
+import { BookOpenIcon, PlusIcon } from 'lucide-react';
+import { Backup } from '@/types/backup';
+import { DataTable } from '@/components/data-table';
+import { columns } from '@/pages/database-backups/components/columns';
+import CreateBackup from '@/pages/database-backups/components/create-backup';
+
+type Page = {
+  server: Server;
+  backups: {
+    data: Backup[];
+  };
+};
+
+export default function Backups() {
+  const page = usePage<Page>();
+
+  return (
+    <ServerLayout server={page.props.server}>
+      <Head title={`Backups - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Backups" description="Here you can manage the backups of your database" />
+          <div className="flex items-center gap-2">
+            <a href="https://vitodeploy.com/docs/servers/database" target="_blank">
+              <Button variant="outline">
+                <BookOpenIcon />
+                <span className="hidden lg:block">Docs</span>
+              </Button>
+            </a>
+            <CreateBackup server={page.props.server}>
+              <Button>
+                <PlusIcon />
+                <span className="hidden lg:block">Create</span>
+              </Button>
+            </CreateBackup>
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} data={page.props.backups.data} />
+      </Container>
+    </ServerLayout>
+  );
+}

resources/js/pages/database-users/components/columns.tsx

@@ -67,7 +67,6 @@ function Link({ databaseUser }: { databaseUser: DatabaseUser }) {
                 onValueChange={(value) => form.setData('databases', value)}
                 defaultValue={form.data.databases}
                 placeholder="Select database"
-                variant="default"
                 maxCount={5}
               />
               <InputError className="mt-2" message={form.errors.databases} />

resources/js/pages/database-users/index.tsx

@@ -25,11 +25,11 @@ export default function Databases() {
 
   return (
     <ServerLayout server={page.props.server}>
-      <Head title={`Database users - ${page.props.server.name}`} />
+      <Head title={`Users - ${page.props.server.name}`} />
 
       <Container className="max-w-5xl">
         <HeaderContainer>
-          <Heading title="Database users" description="Here you can manage the databases" />
+          <Heading title="Users" description="Here you can manage the database users and their permissions" />
           <div className="flex items-center gap-2">
             <a href="https://vitodeploy.com/docs/servers/database" target="_blank">
               <Button variant="outline">

resources/js/pages/servers/components/create-server.tsx

@@ -127,7 +127,7 @@ export default function CreateServer({ children }: { children: React.ReactNode }
                   </SelectGroup>
                 </SelectContent>
               </Select>
-              <InputError />
+              <InputError message={form.errors.provider} />
             </FormField>
 
             {form.data.provider && form.data.provider !== 'custom' && (
@@ -160,7 +160,7 @@ export default function CreateServer({ children }: { children: React.ReactNode }
                     </Button>
                   </ConnectServerProvider>
                 </div>
-                <InputError />
+                <InputError message={form.errors.server_provider} />
               </FormField>
             )}
 

resources/js/pages/storage-providers/components/connect-storage-provider.tsx

@@ -27,12 +27,10 @@ type StorageProviderForm = {
 };
 
 export default function ConnectStorageProvider({
-  providers,
   defaultProvider,
   onProviderAdded,
   children,
 }: {
-  providers: string[];
   defaultProvider?: string;
   onProviderAdded?: () => void;
   children: ReactNode;
@@ -83,7 +81,7 @@ export default function ConnectStorageProvider({
                 </SelectTrigger>
                 <SelectContent>
                   <SelectGroup>
-                    {providers.map((provider) => (
+                    {page.props.configs.storage_providers.map((provider) => (
                       <SelectItem key={provider} value={provider}>
                         {provider}
                       </SelectItem>

resources/js/pages/storage-providers/index.tsx

@@ -28,7 +28,7 @@ export default function StorageProviders() {
         <div className="flex items-start justify-between">
           <Heading title="Storage Providers" description="Here you can manage all of the storage provider connectinos" />
           <div className="flex items-center gap-2">
-            <ConnectStorageProvider providers={page.props.configs.storage_providers}>
+            <ConnectStorageProvider>
               <Button>Connect</Button>
             </ConnectStorageProvider>
           </div>

resources/js/types/backup-file.d.ts

@@ -0,0 +1,13 @@
+export interface BackupFile {
+  id: number;
+  backup_id: number;
+  name: string;
+  size: number;
+  restored_to: string;
+  restored_at: string;
+  status: string;
+  status_color: 'gray' | 'success' | 'info' | 'warning' | 'danger';
+  created_at: string;
+  updated_at: string;
+  [key: string]: unknown;
+}

resources/js/types/backup.d.ts

@@ -0,0 +1,22 @@
+import { BackupFile } from '@/types/backup-file';
+import { StorageProvider } from '@/types/storage-provider';
+import { Database } from '@/types/database';
+
+export interface Backup {
+  id: number;
+  server_id: number;
+  storage_id: number;
+  storage: StorageProvider;
+  database_id: number;
+  database: Database;
+  type: string;
+  keep_backups: number;
+  interval: string;
+  files_count: number;
+  status: string;
+  status_color: 'gray' | 'success' | 'info' | 'warning' | 'danger';
+  created_at: string;
+  updated_at: string;
+  last_file?: BackupFile;
+  [key: string]: unknown;
+}

resources/js/types/index.d.ts

@@ -54,6 +54,9 @@ export interface Configs {
   webservers: string[];
   databases: string[];
   php_versions: string[];
+  cronjob_intervals: {
+    [key: string]: string;
+  };
 
   [key: string]: unknown;
 }
@@ -71,6 +74,8 @@ export interface SharedData {
   flash?: {
     success: string;
     error: string;
+    info: string;
+    warning: string;
     data: unknown;
   };