#591 - databases

resources/js/pages/databases/components/columns.tsx

@@ -0,0 +1,120 @@
+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 { DatabaseIcon, LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { useState } from 'react';
+import { Database } from '@/types/database';
+
+function Delete({ database }: { database: Database }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('databases.destroy', { server: database.server_id, database: database }), {
+      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 database [{database.name}]</DialogTitle>
+          <DialogDescription className="sr-only">Delete database</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">
+          Are you sure you want to delete database <strong>{database.name}</strong>? 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<Database>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center gap-1">
+          <DatabaseIcon className="size-3" />
+          {row.getValue('name')}
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: 'charset',
+    header: 'Charset',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'collation',
+    header: 'Collation',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'created_at',
+    header: 'Created at',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <DateTime date={row.original.created_at} />;
+    },
+  },
+  {
+    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 database={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/databases/components/create-database.tsx

@@ -0,0 +1,192 @@
+import { Server } from '@/types/server';
+import React, { FormEvent, ReactNode, useState } from 'react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { useForm } from '@inertiajs/react';
+import { Button } from '@/components/ui/button';
+import { LoaderCircle } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import InputError from '@/components/ui/input-error';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import axios from 'axios';
+import { Checkbox } from '@/components/ui/checkbox';
+
+type CreateForm = {
+  name: string;
+  charset: string;
+  collation: string;
+  user: boolean;
+  username: string;
+  password: string;
+  remote: boolean;
+  host: string;
+};
+
+export default function CreateDatabase({ server, children }: { server: Server; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const [charsets, setCharsets] = useState<string[]>([]);
+  const [collations, setCollations] = useState<string[]>([]);
+
+  const fetchCharsets = async () => {
+    axios.get(route('databases.charsets', server.id)).then((response) => {
+      setCharsets(response.data);
+    });
+  };
+
+  const form = useForm<CreateForm>({
+    name: '',
+    charset: '',
+    collation: '',
+    user: false,
+    username: '',
+    password: '',
+    remote: false,
+    host: '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(route('databases.store', server.id), {
+      onSuccess: () => {
+        form.reset();
+        setOpen(false);
+      },
+    });
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open);
+    if (open && charsets.length === 0) {
+      fetchCharsets();
+    }
+  };
+
+  const handleCharsetChange = (value: string) => {
+    form.setData('collation', '');
+    form.setData('charset', value);
+    axios.get(route('databases.collations', { server: server.id, charset: value })).then((response) => {
+      setCollations(response.data);
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Create database</DialogTitle>
+          <DialogDescription className="sr-only">Create new database</DialogDescription>
+        </DialogHeader>
+        <Form className="p-4" id="create-database-form" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input type="text" id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
+              <InputError message={form.errors.name} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="charset">Charset</Label>
+              <Select onValueChange={handleCharsetChange} defaultValue={form.data.charset}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select charset" />
+                </SelectTrigger>
+                <SelectContent>
+                  {charsets.map((charset) => (
+                    <SelectItem key={charset} value={charset}>
+                      {charset}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.charset} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="collation">Collation</Label>
+              <Select onValueChange={(value) => form.setData('collation', value)} defaultValue={form.data.collation}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select collation" />
+                </SelectTrigger>
+                <SelectContent>
+                  {collations.map((collation) => (
+                    <SelectItem key={collation} value={collation}>
+                      {collation}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.collation} />
+            </FormField>
+            <FormField>
+              <div className="flex items-center space-x-3">
+                <Checkbox id="user" name="user" checked={form.data.user} onClick={() => form.setData('user', !form.data.user)} />
+                <Label htmlFor="user">Create user</Label>
+              </div>
+              <InputError message={form.errors.user} />
+            </FormField>
+            {form.data.user && (
+              <>
+                <FormField>
+                  <Label htmlFor="username">Username</Label>
+                  <Input
+                    type="text"
+                    id="username"
+                    name="username"
+                    value={form.data.username}
+                    onChange={(e) => form.setData('username', e.target.value)}
+                  />
+                  <InputError message={form.errors.username} />
+                </FormField>
+                <FormField>
+                  <Label htmlFor="password">Password</Label>
+                  <Input
+                    type="password"
+                    id="password"
+                    name="password"
+                    value={form.data.password}
+                    onChange={(e) => form.setData('password', e.target.value)}
+                  />
+                  <InputError message={form.errors.password} />
+                </FormField>
+                <FormField>
+                  <div className="flex items-center space-x-3">
+                    <Checkbox id="remote" name="remote" checked={form.data.remote} onClick={() => form.setData('remote', !form.data.remote)} />
+                    <Label htmlFor="remote">Allow remote access</Label>
+                  </div>
+                  <InputError message={form.errors.remote} />
+                </FormField>
+                {form.data.remote && (
+                  <FormField>
+                    <Label htmlFor="host">Host</Label>
+                    <Input type="text" id="host" name="host" value={form.data.host} onChange={(e) => form.setData('host', e.target.value)} />
+                    <InputError message={form.errors.host} />
+                  </FormField>
+                )}
+              </>
+            )}
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline">
+              Cancel
+            </Button>
+          </DialogClose>
+          <Button type="button" onClick={submit} disabled={form.processing}>
+            {form.processing && <LoaderCircle className="animate-spin" />}
+            Create
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/databases/components/sync-databases.tsx

@@ -0,0 +1,45 @@
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Server } from '@/types/server';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon, RefreshCwIcon } from 'lucide-react';
+import { useForm } from '@inertiajs/react';
+import { useState } from 'react';
+
+export default function SyncDatabases({ server }: { server: Server }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.patch(route('databases.sync', server.id), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <RefreshCwIcon />
+          <span className="hidden lg:block">Sync</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Sync Databases</DialogTitle>
+          <DialogDescription className="sr-only">Sync databases from the server to Vito.</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">Are you sure you want to sync the databases from the server to Vito?</p>
+        <DialogFooter>
+          <DialogTrigger asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogTrigger>
+          <Button disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Sync
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/databases/index.tsx

@@ -0,0 +1,54 @@
+import { Head, usePage } from '@inertiajs/react';
+import { Server } from '@/types/server';
+import type { Database } from '@/types/database';
+import Container from '@/components/container';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import CreateDatabase from '@/pages/databases/components/create-database';
+import { Button } from '@/components/ui/button';
+import ServerLayout from '@/layouts/server/layout';
+import { DataTable } from '@/components/data-table';
+import { columns } from '@/pages/databases/components/columns';
+import React from 'react';
+import { BookOpenIcon, PlusIcon } from 'lucide-react';
+import SyncDatabases from '@/pages/databases/components/sync-databases';
+
+type Page = {
+  server: Server;
+  databases: {
+    data: Database[];
+  };
+};
+
+export default function Databases() {
+  const page = usePage<Page>();
+
+  return (
+    <ServerLayout server={page.props.server}>
+      <Head title={`Databases - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Databases" description="Here you can manage the databases" />
+          <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>
+            <SyncDatabases server={page.props.server} />
+            <CreateDatabase server={page.props.server}>
+              <Button>
+                <PlusIcon />
+                <span className="hidden lg:block">Create</span>
+              </Button>
+            </CreateDatabase>
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} data={page.props.databases.data} />
+      </Container>
+    </ServerLayout>
+  );
+}

resources/js/pages/notification-channels/components/connect-notification-channel.tsx

@@ -11,7 +11,7 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { useForm, usePage } from '@inertiajs/react';
-import { FormEventHandler, ReactNode, useEffect, useState } from 'react';
+import { FormEventHandler, ReactNode, useState } from 'react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import InputError from '@/components/ui/input-error';
@@ -42,7 +42,7 @@ export default function ConnectNotificationChannel({
   const page = usePage<SharedData>();
 
   const form = useForm<Required<NotificationChannelForm>>({
-    provider: 'email',
+    provider: defaultProvider || 'email',
     name: '',
     global: false,
   });
@@ -59,10 +59,6 @@ export default function ConnectNotificationChannel({
     });
   };
 
-  useEffect(() => {
-    form.setData('provider', defaultProvider ?? 'email');
-  }, [defaultProvider]);
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>

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

@@ -11,7 +11,7 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { useForm, usePage } from '@inertiajs/react';
-import { FormEventHandler, ReactNode, useEffect, useState } from 'react';
+import { FormEventHandler, ReactNode, useState } from 'react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import InputError from '@/components/ui/input-error';
@@ -42,7 +42,7 @@ export default function ConnectServerProvider({
   const page = usePage<SharedData>();
 
   const form = useForm<Required<ServerProviderForm>>({
-    provider: 'aws',
+    provider: defaultProvider || 'aws',
     name: '',
     global: false,
   });
@@ -59,10 +59,6 @@ export default function ConnectServerProvider({
     });
   };
 
-  useEffect(() => {
-    form.setData('provider', defaultProvider ?? 'aws');
-  }, [defaultProvider]);
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
@@ -87,11 +83,14 @@ export default function ConnectServerProvider({
                 </SelectTrigger>
                 <SelectContent>
                   <SelectGroup>
-                    {providers.map((provider) => (
-                      <SelectItem key={provider} value={provider}>
-                        {provider}
-                      </SelectItem>
-                    ))}
+                    {providers.map(
+                      (provider) =>
+                        provider !== 'custom' && (
+                          <SelectItem key={provider} value={provider}>
+                            {provider}
+                          </SelectItem>
+                        ),
+                    )}
                   </SelectGroup>
                 </SelectContent>
               </Select>

resources/js/pages/servers/components/header.tsx

@@ -31,8 +31,10 @@ export default function ServerHeader({ server }: { server: Server }) {
               </div>
             </TooltipTrigger>
             <TooltipContent>
-              <span className="lg:hidden">{server.provider}</span>
-              <span className="hidden lg:inline-flex">Server Provider</span>
+              <div>
+                <span className="lg:hidden">{server.provider}</span>
+                <span className="hidden lg:inline-flex">Server Provider</span>
+              </div>
             </TooltipContent>
           </Tooltip>
           <SlashIcon className="size-3" />
@@ -55,7 +57,7 @@ export default function ServerHeader({ server }: { server: Server }) {
                 <TooltipTrigger asChild>
                   <div className="flex items-center space-x-1">
                     <LoaderCircleIcon className={cn('size-4', server.status === 'installing' ? 'animate-spin' : '')} />
-                    <div>%{server.progress}</div>
+                    <div>%{parseInt(server.progress || '0')}</div>
                   </div>
                 </TooltipTrigger>
                 <TooltipContent>Installation Progress</TooltipContent>

resources/js/pages/servers/index.tsx

@@ -11,6 +11,7 @@ import Container from '@/components/container';
 import { Button } from '@/components/ui/button';
 import React from 'react';
 import Layout from '@/layouts/app/layout';
+import { PlusIcon } from 'lucide-react';
 
 type Response = {
   servers: {
@@ -31,7 +32,10 @@ export default function Servers() {
           <Heading title="Servers" description="All of the servers of your project listed here" />
           <div className="flex items-center gap-2">
             <CreateServer>
-              <Button>Create server</Button>
+              <Button>
+                <PlusIcon />
+                Create server
+              </Button>
             </CreateServer>
           </div>
         </div>

resources/js/pages/servers/installing.tsx

@@ -4,6 +4,7 @@ import Container from '@/components/container';
 import { DataTable } from '@/components/data-table';
 import { columns } from '@/pages/server-logs/components/columns';
 import { usePage } from '@inertiajs/react';
+import Heading from '@/components/heading';
 
 export default function InstallingServer() {
   const page = usePage<{
@@ -15,6 +16,7 @@ export default function InstallingServer() {
 
   return (
     <Container className="max-w-5xl">
+      <Heading title="Installing" description="Here you can see the installation logs" />
       <DataTable columns={columns} data={page.props.logs.data} />{' '}
     </Container>
   );

resources/js/pages/servers/show.tsx

@@ -24,7 +24,7 @@ export default function ShowServer() {
   const page = usePage<Response>();
   return (
     <ServerLayout server={page.props.server}>
-      <Head title={page.props.server.name} />
+      <Head title={`Overview - ${page.props.server.name}`} />
 
       {['installing', 'installation_failed'].includes(page.props.server.status) ? <InstallingServer /> : <ServerOverview />}
     </ServerLayout>

resources/js/pages/source-controls/components/connect-source-control.tsx

@@ -11,7 +11,7 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { useForm, usePage } from '@inertiajs/react';
-import { FormEventHandler, ReactNode, useEffect, useState } from 'react';
+import { FormEventHandler, ReactNode, useState } from 'react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import InputError from '@/components/ui/input-error';
@@ -42,7 +42,7 @@ export default function ConnectSourceControl({
   const page = usePage<SharedData>();
 
   const form = useForm<Required<SourceControlForm>>({
-    provider: 'github',
+    provider: defaultProvider || 'github',
     name: '',
     global: false,
   });
@@ -59,10 +59,6 @@ export default function ConnectSourceControl({
     });
   };
 
-  useEffect(() => {
-    form.setData('provider', defaultProvider ?? 'github');
-  }, [defaultProvider]);
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>

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

@@ -11,7 +11,7 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { useForm, usePage } from '@inertiajs/react';
-import { FormEventHandler, ReactNode, useEffect, useState } from 'react';
+import { FormEventHandler, ReactNode, useState } from 'react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import InputError from '@/components/ui/input-error';
@@ -42,7 +42,7 @@ export default function ConnectStorageProvider({
   const page = usePage<SharedData>();
 
   const form = useForm<Required<StorageProviderForm>>({
-    provider: 's3',
+    provider: defaultProvider || 's3',
     name: '',
     global: false,
   });
@@ -59,10 +59,6 @@ export default function ConnectStorageProvider({
     });
   };
 
-  useEffect(() => {
-    form.setData('provider', defaultProvider ?? 's3');
-  }, [defaultProvider]);
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>