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

#591 - databases

Browse Source
This commit is contained in:
Saeed Vaziry
2025-05-20 17:35:20 +02:00
parent eb86204069
commit 2850c1fa59
30 changed files with 940 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/Actions/Database/CreateDatabase.php
View File

@ -6,6 +6,7 @@
use App\Models\Database;
use App\Models\Server;
use App\Models\Service;
use Illuminate\Support\Facades\Validator;
use Illuminate\Validation\Rule;
use Illuminate\Validation\ValidationException;
@ -16,6 +17,8 @@ class CreateDatabase
*/
public function create(Server $server, array $input): Database
{
Validator::make($input, self::rules($server, $input))->validate();
$database = new Database([
'server_id' => $server->id,
'charset' => $input['charset'],

2
app/Http/Controllers/API/DatabaseController.php
View File

@ -50,8 +50,6 @@ public function create(Request $request, Project $project, Server $server): Data
$this->validateRoute($project, $server);
$this->validate($request, CreateDatabase::rules($server, $request->input()));
$database = app(CreateDatabase::class)->create($server, $request->all());
return new DatabaseResource($database);

4
app/Http/Controllers/API/ProjectController.php
View File

@ -87,7 +87,9 @@ public function delete(Project $project): Response
/** @var User $user */
$user = auth()->user();
app(DeleteProject::class)->delete($user, $project);
app(DeleteProject::class)->delete($user, $project, [
'name' => $project->name,
]);
return response()->noContent();
}

96
app/Http/Controllers/DatabaseController.php Normal file
View File

@ -0,0 +1,96 @@
<?php
namespace App\Http\Controllers;
use App\Actions\Database\CreateDatabase;
use App\Actions\Database\DeleteDatabase;
use App\Actions\Database\SyncDatabases;
use App\Http\Resources\DatabaseResource;
use App\Models\Database;
use App\Models\Server;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Inertia\Inertia;
use Inertia\Response;
use Spatie\RouteAttributes\Attributes\Delete;
use Spatie\RouteAttributes\Attributes\Get;
use Spatie\RouteAttributes\Attributes\Middleware;
use Spatie\RouteAttributes\Attributes\Patch;
use Spatie\RouteAttributes\Attributes\Post;
use Spatie\RouteAttributes\Attributes\Prefix;
#[Prefix('servers/{server}/database')]
#[Middleware(['auth', 'has-project'])]
class DatabaseController extends Controller
{
#[Get('/', name: 'databases')]
public function index(Server $server): Response
{
$this->authorize('viewAny', [Database::class, $server]);
return Inertia::render('databases/index', [
'databases' => DatabaseResource::collection($server->databases()->simplePaginate(config('web.pagination_size'))),
]);
}
#[Get('/charsets', name: 'databases.charsets')]
public function charsets(Server $server): JsonResponse
{
$this->authorize('view', $server);
$charsets = [];
foreach ($server->database()->type_data['charsets'] as $charset => $value) {
$charsets[] = $charset;
}
return response()->json($charsets);
}
#[Get('/collations/{charset?}', name: 'databases.collations')]
public function collations(Server $server, ?string $charset = null): JsonResponse
{
$this->authorize('view', $server);
if (! $charset) {
$charset = $server->database()->type_data['defaultCharset'] ?? null;
}
$charsets = $server->database()->type_data['charsets'] ?? [];
return response()->json(data_get($charsets, $charset.'.list', data_get($charsets, $charset.'.default', [])));
}
#[Post('/', name: 'databases.store')]
public function store(Request $request, Server $server): RedirectResponse
{
$this->authorize('create', [Database::class, $server]);
app(CreateDatabase::class)->create($server, $request->all());
return back()
->with('success', 'Database created successfully.');
}
#[Patch('/sync', name: 'databases.sync')]
public function sync(Server $server): RedirectResponse
{
$this->authorize('create', [Database::class, $server]);
app(SyncDatabases::class)->sync($server);
return back()
->with('success', 'Databases synced successfully.');
}
#[Delete('/{database}', name: 'databases.destroy')]
public function destroy(Server $server, Database $database): RedirectResponse
{
$this->authorize('delete', [$database, $server]);
app(DeleteDatabase::class)->delete($server, $database);
return back()
->with('success', 'Database deleted successfully.');
}
}

16
app/Http/Controllers/ServerController.php
View File

@ -10,6 +10,7 @@
use App\Models\ServerProvider;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\URL;
use Illuminate\Validation\Rule;
use Inertia\Inertia;
use Inertia\Response;
@ -57,8 +58,7 @@ public function show(Server $server): Response
$this->authorize('view', $server);
return Inertia::render('servers/show', [
'server' => ServerResource::make($server),
'logs' => ServerLogResource::collection($server->logs()->latest()->paginate(config('web.pagination_size'))),
'logs' => ServerLogResource::collection($server->logs()->latest()->simplePaginate(config('web.pagination_size'))),
]);
}
@ -67,6 +67,18 @@ public function switch(Server $server): RedirectResponse
{
$this->authorize('view', $server);
$previousUrl = URL::previous();
$previousRequest = Request::create($previousUrl);
$previousRoute = app('router')->getRoutes()->match($previousRequest);
if ($previousRoute->hasParameter('server')) {
if (count($previousRoute->parameters()) > 1) {
return redirect()->route('servers.show', ['server' => $server->id]);
}
return redirect()->route($previousRoute->getName(), ['server' => $server]);
}
return redirect()->route('servers.show', ['server' => $server->id]);
}

6
app/Http/Middleware/HandleInertiaRequests.php
View File

@ -51,8 +51,14 @@ public function share(Request $request): array
$servers = ServerResource::collection($user->currentProject?->servers);
}
$data = [];
if ($request->route('server')) {
$data['server'] = ServerResource::make($request->route('server'));
}
return [
...parent::share($request),
...$data,
'name' => config('app.name'),
'quote' => ['message' => trim($message), 'author' => trim($author)],
'auth' => [

3
app/Http/Resources/DatabaseResource.php
View File

@ -18,7 +18,10 @@ public function toArray(Request $request): array
'id' => $this->id,
'server_id' => $this->server_id,
'name' => $this->name,
'collation' => $this->collation,
'charset' => $this->charset,
'status' => $this->status,
'status_color' => $this::$statusColors[$this->status] ?? 'gray',
'created_at' => $this->created_at,
'updated_at' => $this->updated_at,
];

3
app/Models/Database.php
View File

@ -4,6 +4,7 @@
use App\Enums\DatabaseStatus;
use Carbon\Carbon;
use Database\Factories\DatabaseFactory;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\Relations\HasMany;
@ -21,7 +22,7 @@
*/
class Database extends AbstractModel
{
/** @use HasFactory<\Database\Factories\DatabaseFactory> */
/** @use HasFactory<DatabaseFactory> */
use HasFactory;
use SoftDeletes;

2
config/web.php
View File

@ -1,7 +1,7 @@
<?php
return [
'pagination_size' => 20,
'pagination_size' => 10,
'controllers' => [
'servers' => \App\Http\Controllers\ServerController::class,

64
resources/js/components/app-sidebar.tsx
View File

@ -9,12 +9,16 @@ import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubItem,
} from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { Link } from '@inertiajs/react';
import { BookOpen, CogIcon, Folder, ServerIcon } from 'lucide-react';
import AppLogo from './app-logo';
import { Icon } from '@/components/icon';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { useState } from 'react';
const mainNavItems: NavItem[] = [
{
@ -43,6 +47,8 @@ const footerNavItems: NavItem[] = [
];
export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?: NavItem[]; secondNavTitle?: string }) {
const [open, setOpen] = useState<NavItem>();
return (
<Sidebar collapsible="icon" className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row">
{/* This is the first sidebar */}
@ -65,10 +71,10 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?
<SidebarGroupContent className="md:px-0">
<SidebarMenu>
{mainNavItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuItem key={`${item.title}-${item.href}`}>
<SidebarMenuButton
asChild
isActive={window.location.href.startsWith(item.href)}
isActive={item.onlyActivePath ? window.location.href === item.href : window.location.href.startsWith(item.href)}
tooltip={{ children: item.title, hidden: false }}
>
<Link href={item.href} prefetch>
@ -85,7 +91,7 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?
<SidebarFooter className="hidden md:flex">
<SidebarMenu>
{footerNavItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuItem key={`${item.title}-${item.href}`}>
<SidebarMenuButton asChild tooltip={{ children: item.title, hidden: false }}>
<a href={item.href} target="_blank" rel="noopener noreferrer">
{item.icon && <Icon iconNode={item.icon} />}
@ -113,16 +119,60 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
{secondNavItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild isActive={window.location.href.startsWith(item.href)}>
{secondNavItems.map((item) => {
const isActive = item.onlyActivePath ? window.location.href === item.href : window.location.href.startsWith(item.href);
if (item.children && item.children.length > 0) {
return (
<Collapsible
key={`${item.title}-${item.href}`}
open={isActive || open === item}
onOpenChange={() => setOpen(item)}
className="group/collapsible"
>
<SidebarMenuItem>
<CollapsibleTrigger asChild>
<SidebarMenuButton>
{item.icon && <item.icon />}
<span>{item.title}</span>
</SidebarMenuButton>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
{item.children.map((childItem) => (
<SidebarMenuSubItem key={`${childItem.title}-${childItem.href}`}>
<SidebarMenuButton
asChild
isActive={
childItem.onlyActivePath
? window.location.href === childItem.href
: window.location.href.startsWith(childItem.href)
}
>
<Link href={childItem.href} prefetch>
<span>{childItem.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuSubItem>
))}
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible>
);
}
return (
<SidebarMenuItem key={`${item.title}-${item.href}`}>
<SidebarMenuButton asChild isActive={isActive}>
<Link href={item.href} prefetch>
{item.icon && <item.icon />}
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
);
})}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>

5
resources/js/components/header-container.tsx Normal file
View File

@ -0,0 +1,5 @@
import { ReactNode } from 'react';
export default function HeaderContainer({ children }: { children: ReactNode }) {
return <div className="flex items-center justify-between">{children}</div>;
}

15
resources/js/components/user-select.tsx
View File

@ -1,5 +1,5 @@
import { User } from '@/types/user';
import { useEffect, useState } from 'react';
import { useState } from 'react';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Button } from '@/components/ui/button';
import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
@ -13,6 +13,13 @@ export default function UserSelect({ onChange }: { onChange: (selectedUser: User
const [open, setOpen] = useState(false);
const [value, setValue] = useState<string>();
const onOpenChange = (open: boolean) => {
setOpen(open);
if (open) {
fetchUsers();
}
};
const fetchUsers = async () => {
const response = await axios.get(route('users.json', { query: query }));
@ -24,12 +31,8 @@ export default function UserSelect({ onChange }: { onChange: (selectedUser: User
setUsers([]);
};
useEffect(() => {
fetchUsers();
}, [query]);
return (
<Popover open={open} onOpenChange={setOpen}>
<Popover open={open} onOpenChange={onOpenChange}>
<PopoverTrigger asChild>
<Button variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between">
{value ? users.find((user) => user.id === parseInt(value))?.name : 'Select user...'}

59
resources/js/layouts/database/layout.tsx Normal file
View File

@ -0,0 +1,59 @@
import { Server } from '@/types/server';
import { ReactNode } from 'react';
import ServerLayout from '@/layouts/server/layout';
import Container from '@/components/container';
import { NavigationMenu, NavigationMenuLink, NavigationMenuList } from '@/components/ui/navigation-menu';
import type { NavItem } from '@/types';
import { CloudUploadIcon, DatabaseIcon, UsersIcon } from 'lucide-react';
import { Link } from '@inertiajs/react';
export default function DatabaseLayout({ server, children }: { server: Server; children: ReactNode }) {
const navItems: NavItem[] = [
{
title: 'Databases',
href: route('databases', { server: server.id }),
icon: DatabaseIcon,
},
{
title: 'Users',
href: '/database-users',
icon: UsersIcon,
},
{
title: 'Backups',
href: '/backups',
icon: CloudUploadIcon,
},
];
return (
<ServerLayout server={server}>
<Container className="max-w-5xl">
<div className="bg-muted/10 inline-flex rounded-md border">
<NavigationMenu className="flex">
<NavigationMenuList>
{navItems.map((item: NavItem) => (
<NavigationMenuLink
key={item.title}
asChild
className={
(item.onlyActivePath ? window.location.href === item.href : window.location.href.startsWith(item.href)) ? 'bg-muted' : ''
}
>
<Link href={item.href}>
<div className="flex items-center gap-2">
{item.icon && <item.icon />}
{item.title}
</div>
</Link>
</NavigationMenuLink>
))}
</NavigationMenuList>
</NavigationMenu>
</div>
</Container>
{children}
</ServerLayout>
);
}

131
resources/js/layouts/server/layout.tsx
View File

@ -1,19 +1,5 @@
import { type NavItem } from '@/types';
import {
ChartPieIcon,
ClockIcon,
CogIcon,
DatabaseIcon,
FlameIcon,
FolderOpenIcon,
HomeIcon,
KeyIcon,
ListEndIcon,
LogsIcon,
MousePointerClickIcon,
Settings2Icon,
TerminalSquareIcon,
} from 'lucide-react';
import { CloudUploadIcon, DatabaseIcon, HomeIcon, UsersIcon } from 'lucide-react';
import { ReactNode } from 'react';
import { Server } from '@/types/server';
import ServerHeader from '@/pages/servers/components/header';
@ -28,68 +14,81 @@ export default function ServerLayout({ server, children }: { server: Server; chi
{
title: 'Overview',
href: route('servers.show', { server: server.id }),
onlyActivePath: route('servers.show', { server: server.id }),
icon: HomeIcon,
},
{
title: 'Database',
href: route('databases', { server: server.id }),
icon: DatabaseIcon,
children: [
{
title: 'Databases',
href: '#',
href: route('databases', { server: server.id }),
icon: DatabaseIcon,
},
{
title: 'Sites',
href: '#',
icon: MousePointerClickIcon,
title: 'Users',
href: '/users',
icon: UsersIcon,
},
{
title: 'File Manager',
href: '#',
icon: FolderOpenIcon,
title: 'Backups',
href: '/backups',
icon: CloudUploadIcon,
},
{
title: 'Firewall',
href: '#',
icon: FlameIcon,
},
{
title: 'CronJobs',
href: '#',
icon: ClockIcon,
},
{
title: 'Workers',
href: '#',
icon: ListEndIcon,
},
{
title: 'SSH Keys',
href: '#',
icon: KeyIcon,
},
{
title: 'Services',
href: '#',
icon: CogIcon,
},
{
title: 'Metrics',
href: '#',
icon: ChartPieIcon,
},
{
title: 'Console',
href: '#',
icon: TerminalSquareIcon,
},
{
title: 'Logs',
href: '#',
icon: LogsIcon,
},
{
title: 'Settings',
href: '#',
icon: Settings2Icon,
],
},
// {
// title: 'Sites',
// href: '#',
// icon: MousePointerClickIcon,
// },
// {
// title: 'Firewall',
// href: '#',
// icon: FlameIcon,
// },
// {
// title: 'CronJobs',
// href: '#',
// icon: ClockIcon,
// },
// {
// title: 'Workers',
// href: '#',
// icon: ListEndIcon,
// },
// {
// title: 'SSH Keys',
// href: '#',
// icon: KeyIcon,
// },
// {
// title: 'Services',
// href: '#',
// icon: CogIcon,
// },
// {
// title: 'Metrics',
// href: '#',
// icon: ChartPieIcon,
// },
// {
// title: 'Console',
// href: '#',
// icon: TerminalSquareIcon,
// },
// {
// title: 'Logs',
// href: '#',
// icon: LogsIcon,
// },
// {
// title: 'Settings',
// href: '#',
// icon: Settings2Icon,
// },
];
return (

120
resources/js/pages/databases/components/columns.tsx Normal file
View File

@ -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>
);
},
},
];

192
resources/js/pages/databases/components/create-database.tsx Normal file
View File

@ -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>
);
}

45
resources/js/pages/databases/components/sync-databases.tsx Normal file
View File

@ -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>
);
}

54
resources/js/pages/databases/index.tsx Normal file
View File

@ -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>
);
}

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

@ -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>

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

@ -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) => (
{providers.map(
(provider) =>
provider !== 'custom' && (
<SelectItem key={provider} value={provider}>
{provider}
</SelectItem>
))}
),
)}
</SelectGroup>
</SelectContent>
</Select>

4
resources/js/pages/servers/components/header.tsx
View File

@ -31,8 +31,10 @@ export default function ServerHeader({ server }: { server: Server }) {
</div>
</TooltipTrigger>
<TooltipContent>
<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>

6
resources/js/pages/servers/index.tsx
View File

@ -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>

2
resources/js/pages/servers/installing.tsx
View File

@ -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>
);

2
resources/js/pages/servers/show.tsx
View File

@ -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>

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

@ -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>

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

@ -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>

13
resources/js/types/database.d.ts vendored Normal file
View File

@ -0,0 +1,13 @@
export interface Database {
id: number;
server_id: number;
name: string;
collation: string;
charset: string;
status: string;
status_color: string;
created_at: string;
updated_at: string;
[key: string]: unknown;
}

3
resources/js/types/index.d.ts vendored
View File

@ -23,9 +23,10 @@ export interface NavGroup {
export interface NavItem {
title: string;
href: string;
activePath?: string;
onlyActivePath?: string;
icon?: LucideIcon | null;
isActive?: boolean;
children?: NavItem[];
}
export interface Configs {

41
tests/Feature/DatabaseTest.php
View File

@ -6,10 +6,8 @@
use App\Enums\DatabaseUserStatus;
use App\Facades\SSH;
use App\Models\Database;
use App\Web\Pages\Servers\Databases\Index;
use App\Web\Pages\Servers\Databases\Widgets\DatabasesList;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Livewire\Livewire;
use Inertia\Testing\AssertableInertia;
use Tests\TestCase;
class DatabaseTest extends TestCase
@ -22,15 +20,11 @@ public function test_create_database(): void
SSH::fake();
Livewire::test(Index::class, [
'server' => $this->server,
])
->callAction('create', [
$this->post(route('databases.store', $this->server), [
'name' => 'database',
'charset' => 'utf8mb4',
'collation' => 'utf8mb4_unicode_ci',
])
->assertSuccessful();
])->assertSessionDoesntHaveErrors();
$this->assertDatabaseHas('databases', [
'name' => 'database',
@ -44,10 +38,7 @@ public function test_create_database_with_user(): void
SSH::fake();
Livewire::test(Index::class, [
'server' => $this->server,
])
->callAction('create', [
$this->post(route('databases.store', $this->server), [
'name' => 'database',
'charset' => 'utf8mb4',
'collation' => 'utf8mb4_unicode_ci',
@ -56,8 +47,7 @@ public function test_create_database_with_user(): void
'password' => 'password',
'remote' => true,
'host' => '%',
])
->assertSuccessful();
])->assertSessionDoesntHaveErrors();
$this->assertDatabaseHas('databases', [
'name' => 'database',
@ -76,14 +66,13 @@ public function test_see_databases_list(): void
{
$this->actingAs($this->user);
/** @var Database $database */
$database = Database::factory()->create([
Database::factory()->create([
'server_id' => $this->server,
]);
$this->get(Index::getUrl(['server' => $this->server]))
$this->get(route('databases', $this->server))
->assertSuccessful()
->assertSee($database->name);
->assertInertia(fn (AssertableInertia $page) => $page->component('databases/index'));
}
public function test_delete_database(): void
@ -97,11 +86,10 @@ public function test_delete_database(): void
'server_id' => $this->server,
]);
Livewire::test(DatabasesList::class, [
$this->delete(route('databases.destroy', [
'server' => $this->server,
])
->callTableAction('delete', $database->id)
->assertSuccessful();
'database' => $database,
]))->assertSessionDoesntHaveErrors();
$this->assertSoftDeleted('databases', [
'id' => $database->id,
@ -114,10 +102,7 @@ public function test_sync_databases(): void
SSH::fake();
Livewire::test(Index::class, [
'server' => $this->server,
])
->callAction('sync')
->assertSuccessful();
$this->patch(route('databases.sync', $this->server))
->assertSessionDoesntHaveErrors();
}
}

46
tsconfig.json
View File

@ -11,7 +11,8 @@
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
/* Language and Environment */
"target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
"target": "ESNext"
/* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
// "jsx": "preserve", /* Specify what JSX code is generated. */
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
@ -25,9 +26,11 @@
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
/* Modules */
"module": "ESNext" /* Specify what module code is generated. */,
"module": "ESNext"
/* Specify what module code is generated. */,
// "rootDir": "./", /* Specify the root folder within your source files. */
"moduleResolution": "bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
"moduleResolution": "bundler"
/* Specify how TypeScript looks up a file from a given module specifier. */,
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
@ -46,7 +49,8 @@
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
/* JavaScript Support */
"allowJs": true /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
"allowJs": true
/* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
@ -56,7 +60,8 @@
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
"noEmit": true /* Disable emitting files from a compilation. */,
"noEmit": true
/* Disable emitting files from a compilation. */,
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
// "outDir": "./", /* Specify an output folder for all emitted files. */
// "removeComments": true, /* Disable emitting comments. */
@ -74,17 +79,21 @@
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
/* Interop Constraints */
"isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
"isolatedModules": true
/* Ensure that each file can be safely transpiled without relying on other imports. */,
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
// "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
"esModuleInterop": true
/* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
"forceConsistentCasingInFileNames": true
/* Ensure that casing is correct in imports. */,
/* Type Checking */
"strict": true /* Enable all strict type-checking options. */,
"noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
"strict": true
/* Enable all strict type-checking options. */,
"noImplicitAny": true
/* Enable error reporting for expressions and declarations with an implied 'any' type. */,
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
@ -106,17 +115,22 @@
/* Completeness */
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */,
"skipLibCheck": true
/* Skip type checking all .d.ts files. */,
"baseUrl": ".",
"paths": {
"@/*": ["./resources/js/*"],
"ziggy-js": ["./vendor/tightenco/ziggy"]
"@/*": [
"./resources/js/*"
],
"ziggy-js": [
"./vendor/tightenco/ziggy"
]
},
"jsx": "react-jsx",
"jsx": "react-jsx"
},
"include": [
"resources/js/**/*.ts",
"resources/js/**/*.d.ts",
"resources/js/**/*.tsx",
"resources/js/**/*.tsx"
]
}