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

#591 - sites

Browse Source
This commit is contained in:
Saeed Vaziry
2025-06-04 08:08:20 +02:00
parent efacadba10
commit c3f69f3247
114 changed files with 4032 additions and 765 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
resources/js/pages/application/components/app-with-deployment.tsx Normal file
View File

@ -0,0 +1,77 @@
import { Head, usePage } from '@inertiajs/react';
import { Site } from '@/types/site';
import ServerLayout from '@/layouts/server/layout';
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 { BookOpenIcon, MoreHorizontalIcon, RocketIcon } from 'lucide-react';
import React from 'react';
import { PaginatedData } from '@/types';
import { Deployment } from '@/types/deployment';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import DeploymentScript from '@/pages/application/components/deployment-script';
import Env from '@/pages/application/components/env';
import Deploy from '@/pages/application/components/deploy';
import { DataTable } from '@/components/data-table';
import { columns } from '@/pages/application/components/deployment-columns';
import AutoDeployment from '@/pages/application/components/auto-deployment';
export default function AppWithDeployment() {
const page = usePage<{
server: Server;
site: Site;
deployments: PaginatedData<Deployment>;
deploymentScript: string;
}>();
return (
<ServerLayout>
<Head title={`${page.props.site.domain} - ${page.props.server.name}`} />
<Container className="max-w-5xl">
<HeaderContainer>
<Heading title="Application" description="Here you can manage the deployed application" />
<div className="flex items-center gap-2">
<a href="https://vitodeploy.com/docs/sites/application" target="_blank">
<Button variant="outline">
<BookOpenIcon />
<span className="hidden lg:block">Docs</span>
</Button>
</a>
<Deploy site={page.props.site}>
<Button>
<RocketIcon />
<span className="hidden lg:block">Deploy</span>
</Button>
</Deploy>
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontalIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<AutoDeployment site={page.props.site}>
<DropdownMenuItem onSelect={(e) => e.preventDefault()} disabled={!page.props.site.source_control_id}>
{page.props.site.auto_deploy ? 'Disable' : 'Enable'} auto deploy
</DropdownMenuItem>
</AutoDeployment>
<DeploymentScript site={page.props.site} script={page.props.deploymentScript}>
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>Deployment Script</DropdownMenuItem>
</DeploymentScript>
<Env site={page.props.site}>
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>Update .env</DropdownMenuItem>
</Env>
</DropdownMenuContent>
</DropdownMenu>
</div>
</HeaderContainer>
<DataTable columns={columns} paginatedData={page.props.deployments} />
</Container>
</ServerLayout>
);
}

59
resources/js/pages/application/components/auto-deployment.tsx Normal file
View File

@ -0,0 +1,59 @@
import React, { ReactNode, useState } from 'react';
import { useForm } from '@inertiajs/react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { LoaderCircleIcon } from 'lucide-react';
import FormSuccessful from '@/components/form-successful';
import { Site } from '@/types/site';
export default function AutoDeployment({ site, children }: { site: Site; children: ReactNode }) {
const [open, setOpen] = useState(false);
const form = useForm();
const submit = () => {
const url = site.auto_deploy
? route('application.disable-auto-deployment', {
server: site.server_id,
site: site.id,
})
: route('application.enable-auto-deployment', { server: site.server_id, site: site.id });
form.post(url, {
onSuccess: () => {
setOpen(false);
},
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{site.auto_deploy ? 'Disable' : 'Enable'} auto deployment</DialogTitle>
<DialogDescription className="sr-only">{site.auto_deploy ? 'Disable' : 'Enable'} auto deployment</DialogDescription>
</DialogHeader>
<div className="space-y-2 p-4">
<p>Are you sure you want to {site.auto_deploy ? 'disable' : 'enable'} auto deployment?</p>
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button disabled={form.processing} onClick={submit}>
{form.processing && <LoaderCircleIcon className="animate-spin" />}
<FormSuccessful successful={form.recentlySuccessful} />
Yes
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

53
resources/js/pages/application/components/deploy.tsx Normal file
View File

@ -0,0 +1,53 @@
import React, { ReactNode, useState } from 'react';
import { useForm } from '@inertiajs/react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { LoaderCircleIcon } from 'lucide-react';
import FormSuccessful from '@/components/form-successful';
import { Site } from '@/types/site';
export default function Deploy({ site, children }: { site: Site; children: ReactNode }) {
const [open, setOpen] = useState(false);
const form = useForm();
const submit = () => {
form.post(route('application.deploy', { server: site.server_id, site: site.id }), {
onSuccess: () => {
setOpen(false);
},
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Deploy</DialogTitle>
<DialogDescription className="sr-only">Deploy application</DialogDescription>
</DialogHeader>
<div className="space-y-2 p-4">
<p>Are you sure you want to deploy this site?</p>
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button disabled={form.processing} onClick={submit}>
{form.processing && <LoaderCircleIcon className="animate-spin" />}
<FormSuccessful successful={form.recentlySuccessful} />
Deploy
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

61
resources/js/pages/application/components/deployment-columns.tsx Normal file
View File

@ -0,0 +1,61 @@
import { ColumnDef } from '@tanstack/react-table';
import { Button } from '@/components/ui/button';
import { MoreVerticalIcon } from 'lucide-react';
import DateTime from '@/components/date-time';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Deployment } from '@/types/deployment';
import { Badge } from '@/components/ui/badge';
import { Download, View } from '@/pages/server-logs/components/columns';
export const columns: ColumnDef<Deployment>[] = [
{
accessorKey: 'commit_id',
header: 'Commit',
enableColumnFilter: true,
cell: ({ row }) => {
return row.original.commit_data?.message ?? 'No commit message';
},
},
{
accessorKey: 'created_at',
header: 'Deployed At',
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>;
},
},
{
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">
<View serverLog={row.original.log} />
<Download serverLog={row.original.log}>
<DropdownMenuItem>Download</DropdownMenuItem>
</Download>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
},
},
];

69
resources/js/pages/application/components/deployment-script.tsx Normal file
View File

@ -0,0 +1,69 @@
import React, { FormEvent, ReactNode, useState } from 'react';
import { useForm } from '@inertiajs/react';
import { Editor, useMonaco } from '@monaco-editor/react';
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import { Form } from '@/components/ui/form';
import { Button } from '@/components/ui/button';
import { LoaderCircleIcon } from 'lucide-react';
import { Site } from '@/types/site';
import { registerBashLanguage } from '@/lib/editor';
import InputError from '@/components/ui/input-error';
import { useAppearance } from '@/hooks/use-appearance';
export default function DeploymentScript({ site, script, children }: { site: Site; script: string; children: ReactNode }) {
const { getActualAppearance } = useAppearance();
const [open, setOpen] = useState(false);
const form = useForm<{
script: string;
}>({
script: script,
});
const submit = (e: FormEvent) => {
e.preventDefault();
form.put(route('application.update-deployment-script', { server: site.server_id, site: site.id }), {
onSuccess: () => {
setOpen(false);
},
});
};
registerBashLanguage(useMonaco());
return (
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger asChild>{children}</SheetTrigger>
<SheetContent className="sm:max-w-5xl">
<SheetHeader>
<SheetTitle>Deployment script</SheetTitle>
<SheetDescription className="sr-only">Update deployment script</SheetDescription>
</SheetHeader>
<Form id="update-script-form" className="h-full" onSubmit={submit}>
<Editor
defaultLanguage="bash"
defaultValue={form.data.script}
theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
className="h-full"
onChange={(value) => form.setData('script', value ?? '')}
options={{
fontSize: 15,
}}
/>
</Form>
<SheetFooter>
<div className="flex items-center gap-2">
<Button form="update-script-form" disabled={form.processing} onClick={submit} className="ml-2">
{form.processing && <LoaderCircleIcon className="animate-spin" />}
Save
</Button>
<SheetClose asChild>
<Button variant="outline">Cancel</Button>
</SheetClose>
<InputError message={form.errors.script} />
</div>
</SheetFooter>
</SheetContent>
</Sheet>
);
}

91
resources/js/pages/application/components/env.tsx Normal file
View File

@ -0,0 +1,91 @@
import React, { FormEvent, ReactNode, useState } from 'react';
import { useForm } from '@inertiajs/react';
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
import { Editor, useMonaco } from '@monaco-editor/react';
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import { Form } from '@/components/ui/form';
import { Skeleton } from '@/components/ui/skeleton';
import { Button } from '@/components/ui/button';
import { LoaderCircleIcon } from 'lucide-react';
import { registerDotEnvLanguage } from '@/lib/editor';
import { Site } from '@/types/site';
import { useAppearance } from '@/hooks/use-appearance';
export default function Env({ site, children }: { site: Site; children: ReactNode }) {
const { getActualAppearance } = useAppearance();
const [open, setOpen] = useState(false);
const form = useForm<{
env: string;
}>({
env: '',
});
const submit = (e: FormEvent) => {
e.preventDefault();
form.put(route('application.update-env', { server: site.server_id, site: site.id }), {
onSuccess: () => {
setOpen(false);
},
});
};
const query = useQuery({
queryKey: ['application.env', site.server_id, site.id],
queryFn: async () => {
const response = await axios.get(
route('application.env', {
server: site.server_id,
site: site.id,
}),
);
if (response.data?.env) {
form.setData('env', response.data.env);
}
return response.data;
},
retry: false,
enabled: open,
});
registerDotEnvLanguage(useMonaco());
return (
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger asChild>{children}</SheetTrigger>
<SheetContent className="sm:max-w-5xl">
<SheetHeader>
<SheetTitle>Edit .env</SheetTitle>
<SheetDescription className="sr-only">Edit .env file</SheetDescription>
</SheetHeader>
<Form id="update-env-form" className="h-full" onSubmit={submit}>
{query.isSuccess ? (
<Editor
defaultLanguage="dotenv"
defaultValue={query.data.env}
theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
className="h-full"
onChange={(value) => form.setData('env', value ?? '')}
options={{
fontSize: 15,
}}
/>
) : (
<Skeleton className="h-full w-full rounded-none" />
)}
</Form>
<SheetFooter>
<div className="flex items-center gap-2">
<Button form="update-env-form" disabled={form.processing || query.isLoading} onClick={submit} className="ml-2">
{(form.processing || query.isLoading) && <LoaderCircleIcon className="animate-spin" />}
Save
</Button>
<SheetClose asChild>
<Button variant="outline">Cancel</Button>
</SheetClose>
</div>
</SheetFooter>
</SheetContent>
</Sheet>
);
}

108
resources/js/pages/application/components/load-balancer.tsx Normal file
View File

@ -0,0 +1,108 @@
import { Head, useForm, usePage } from '@inertiajs/react';
import { Site } from '@/types/site';
import ServerLayout from '@/layouts/server/layout';
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 { BookOpenIcon, LoaderCircleIcon } from 'lucide-react';
import React, { FormEvent } from 'react';
import { LoadBalancerServer } from '@/types/load-balancer-server';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Form, FormField, FormFields } from '@/components/ui/form';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import type { Project } from '@/types/project';
import InputError from '@/components/ui/input-error';
import FormSuccessful from '@/components/form-successful';
export default function LoadBalancer() {
const page = usePage<{
server: Server;
site: Site;
loadBalancerServers: LoadBalancerServer[];
}>();
const form = useForm<{
method: 'round-robin' | 'least-connections' | 'ip-hash';
servers: {
server: string;
port: string;
weight: string;
backup: boolean;
}[];
}>({
method: 'round-robin',
servers: [],
});
const submit = (e: FormEvent) => {
e.preventDefault();
form.post(route('application.update-load-balancer', { server: page.props.server.id, site: page.props.site.id }), {
onSuccess: () => {
form.reset();
},
preserveScroll: true,
});
};
return (
<ServerLayout>
<Head title={`${page.props.site.domain} - ${page.props.server.name}`} />
<Container className="max-w-5xl">
<HeaderContainer>
<Heading title="Load balancer" description="Here you can manage the load balancer configs" />
<div className="flex items-center gap-2">
<a href="https://vitodeploy.com/docs/sites/load-balancer" target="_blank">
<Button variant="outline">
<BookOpenIcon />
<span className="hidden lg:block">Docs</span>
</Button>
</a>
</div>
</HeaderContainer>
<Card>
<CardHeader>
<CardTitle>Configs</CardTitle>
<CardDescription>Modify load balancer configs</CardDescription>
</CardHeader>
<CardContent className="p-4">
<Form>
<FormFields>
<FormField>
<Label htmlFor="method">Method</Label>
<Select
value={form.data.method}
onValueChange={(value) => form.setData('method', value as 'round-robin' | 'least-connections' | 'ip-hash')}
>
<SelectTrigger id="method">
<SelectValue placeholder="Select a method" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="round-robin">round-robin</SelectItem>
<SelectItem value="least-connections">least-connections</SelectItem>
<SelectItem value="ip-hash">ip-hash</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<InputError message={form.errors.method} />
</FormField>
</FormFields>
</Form>
</CardContent>
<CardFooter>
<Button disabled={form.processing} onClick={submit}>
{form.processing && <LoaderCircleIcon className="animate-spin" />}
<FormSuccessful successful={form.recentlySuccessful} />
Save and Deploy
</Button>
</CardFooter>
</Card>
</Container>
</ServerLayout>
);
}

20
resources/js/pages/application/index.tsx Normal file
View File

@ -0,0 +1,20 @@
import { usePage } from '@inertiajs/react';
import { Site } from '@/types/site';
import React from 'react';
import AppWithDeployment from '@/pages/application/components/app-with-deployment';
import LoadBalancer from '@/pages/application/components/load-balancer';
import siteHelper from '@/lib/site-helper';
export default function Application() {
const page = usePage<{
site: Site;
}>();
siteHelper.storeSite(page.props.site);
if (page.props.site.type === 'load-balancer') {
return <LoadBalancer />;
}
return <AppWithDeployment />;
}

8
resources/js/pages/backups/components/edit-backup.tsx
View File

@ -48,10 +48,10 @@ export default function EditBackup({ backup, children }: { backup: Backup; child
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Create backup</DialogTitle>
<DialogDescription className="sr-only">Create a new backup</DialogDescription>
<DialogTitle>Edit backup</DialogTitle>
<DialogDescription className="sr-only">Edit backup</DialogDescription>
</DialogHeader>
<Form id="create-backup-form" onSubmit={submit} className="p-4">
<Form id="edit-backup-form" onSubmit={submit} className="p-4">
<FormFields>
{/*interval*/}
<FormField>
@ -101,7 +101,7 @@ export default function EditBackup({ backup, children }: { backup: Backup; child
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button form="create-backup-form" type="button" onClick={submit} disabled={form.processing}>
<Button form="edit-backup-form" type="button" onClick={submit} disabled={form.processing}>
{form.processing && <LoaderCircle className="animate-spin" />}
Save
</Button>

118
resources/js/pages/commands/components/columns.tsx Normal file
View File

@ -0,0 +1,118 @@
import { ColumnDef } from '@tanstack/react-table';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { Link, useForm } from '@inertiajs/react';
import { LoaderCircleIcon, MoreVerticalIcon, PlayIcon } from 'lucide-react';
import FormSuccessful from '@/components/form-successful';
import { useState } from 'react';
import { Command } from '@/types/command';
import EditCommand from '@/pages/commands/components/edit-command';
import CopyableBadge from '@/components/copyable-badge';
import Execute from '@/pages/commands/components/execute';
function Delete({ command }: { command: Command }) {
const [open, setOpen] = useState(false);
const form = useForm();
const submit = () => {
form.delete(route('commands.destroy', { server: command.server_id, site: command.site_id, command: command.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 command</DialogTitle>
<DialogDescription className="sr-only">Delete command</DialogDescription>
</DialogHeader>
<p className="p-4">Are you sure you want to this command?</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<Command>[] = [
{
accessorKey: 'name',
header: 'Name',
enableColumnFilter: true,
enableSorting: true,
},
{
accessorKey: 'command',
header: 'Command',
enableColumnFilter: true,
enableSorting: true,
cell: ({ row }) => {
return <CopyableBadge text={row.original.command} />;
},
},
{
id: 'actions',
enableColumnFilter: false,
enableSorting: false,
cell: ({ row }) => {
return (
<div className="flex items-center justify-end gap-1">
<Execute command={row.original}>
<Button variant="outline" className="size-8">
<PlayIcon className="size-3" />
</Button>
</Execute>
<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">
<EditCommand command={row.original}>
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
</EditCommand>
<Link
href={route('commands.show', {
server: row.original.server_id,
site: row.original.site_id,
command: row.original.id,
})}
>
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>Executions</DropdownMenuItem>
</Link>
<DropdownMenuSeparator />
<Delete command={row.original} />
</DropdownMenuContent>
</DropdownMenu>
</div>
);
},
},
];

87
resources/js/pages/commands/components/create-command.tsx Normal file
View File

@ -0,0 +1,87 @@
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, usePage } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { LoaderCircle } from 'lucide-react';
import { Label } from '@/components/ui/label';
import InputError from '@/components/ui/input-error';
import { Input } from '@/components/ui/input';
import { Site } from '@/types/site';
import { Textarea } from '@/components/ui/textarea';
export default function CreateCommand({ children }: { children: ReactNode }) {
const [open, setOpen] = useState(false);
const page = usePage<{
server: Server;
site: Site;
}>();
const form = useForm<{
name: string;
command: string;
}>({
name: '',
command: '',
});
const submit = (e: FormEvent) => {
e.preventDefault();
form.post(route('commands.store', { server: page.props.server.id, site: page.props.site.id }), {
onSuccess: () => {
setOpen(false);
},
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Create command</DialogTitle>
<DialogDescription className="sr-only">Create a new command</DialogDescription>
</DialogHeader>
<Form id="create-command-form" onSubmit={submit} className="p-4">
<FormFields>
<FormField>
<Label htmlFor="name">Name</Label>
<Input 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="command">Command</Label>
<Textarea id="command" name="command" value={form.data.command} onChange={(e) => form.setData('command', e.target.value)} />
<p className="text-muted-foreground text-sm">
You can use variables like {'${VARIABLE_NAME}'} in the command. The variables will be asked when executing the command
</p>
<InputError message={form.errors.command} />
</FormField>
</FormFields>
</Form>
<DialogFooter>
<div className="flex items-center gap-2">
<Button form="create-command-form" type="button" onClick={submit} disabled={form.processing}>
{form.processing && <LoaderCircle className="animate-spin" />}
Create
</Button>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
</div>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

81
resources/js/pages/commands/components/edit-command.tsx Normal file
View File

@ -0,0 +1,81 @@
import React, { FormEvent, ReactNode, useState } from 'react';
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 InputError from '@/components/ui/input-error';
import { Input } from '@/components/ui/input';
import { Command } from '@/types/command';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Textarea } from '@/components/ui/textarea';
export default function EditCommand({ command, children }: { command: Command; children: ReactNode }) {
const [open, setOpen] = useState(false);
const form = useForm<{
name: string;
command: string;
}>({
name: command.name,
command: command.command,
});
const submit = (e: FormEvent) => {
e.preventDefault();
form.put(route('commands.update', { server: command.server_id, site: command.site_id, command: command.id }), {
onSuccess: () => {
setOpen(false);
},
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Edit command</DialogTitle>
<DialogDescription className="sr-only">Create a new command</DialogDescription>
</DialogHeader>
<Form id="create-command-form" onSubmit={submit} className="p-4">
<FormFields>
<FormField>
<Label htmlFor="name">Name</Label>
<Input 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="command">Command</Label>
<Textarea id="command" name="command" value={form.data.command} onChange={(e) => form.setData('command', e.target.value)} />
<p className="text-muted-foreground text-sm">
You can use variables like {'${VARIABLE_NAME}'} in the command. The variables will be asked when executing the command
</p>
<InputError message={form.errors.command} />
</FormField>
</FormFields>
</Form>
<DialogFooter>
<div className="flex items-center gap-2">
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button form="create-command-form" type="button" onClick={submit} disabled={form.processing}>
{form.processing && <LoaderCircle className="animate-spin" />}
Save
</Button>
</div>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

69
resources/js/pages/commands/components/execute.tsx Normal file
View File

@ -0,0 +1,69 @@
import React, { ReactNode, useState } from 'react';
import { useForm } from '@inertiajs/react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { LoaderCircleIcon } from 'lucide-react';
import FormSuccessful from '@/components/form-successful';
import { Command } from '@/types/command';
import { Form, FormField, FormFields } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import InputError from '@/components/ui/input-error';
export default function Execute({ command, children }: { command: Command; children: ReactNode }) {
const [open, setOpen] = useState(false);
const form = useForm<Record<string, string>>({});
const submit = () => {
form.post(route('commands.execute', { server: command.server_id, site: command.site_id, command: command.id }), {
onSuccess: () => {
setOpen(false);
},
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Execute</DialogTitle>
<DialogDescription className="sr-only">Execute command</DialogDescription>
</DialogHeader>
<div className="space-y-2 p-4">
<p>Are you sure you want to run this command?</p>
<Form id="execute-command-form" onSubmit={submit}>
<FormFields>
{command.variables.map((variable: string) => (
<FormField key={`variable-${variable}`}>
<Label htmlFor={variable}>{variable}</Label>
<Input id={variable} name={variable} value={form.data[variable] || ''} onChange={(e) => form.setData(variable, e.target.value)} />
<InputError message={form.errors[variable as keyof typeof form.errors]} />
</FormField>
))}
</FormFields>
</Form>
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button disabled={form.processing} onClick={submit}>
{form.processing && <LoaderCircleIcon className="animate-spin" />}
<FormSuccessful successful={form.recentlySuccessful} />
Execute
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

53
resources/js/pages/commands/components/execution-columns.tsx Normal file
View File

@ -0,0 +1,53 @@
import { ColumnDef } from '@tanstack/react-table';
import { Button } from '@/components/ui/button';
import { MoreVerticalIcon } from 'lucide-react';
import DateTime from '@/components/date-time';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { CommandExecution } from '@/types/command-execution';
import { Badge } from '@/components/ui/badge';
import { Download, View } from '@/pages/server-logs/components/columns';
export const columns: ColumnDef<CommandExecution>[] = [
{
accessorKey: 'created_at',
header: 'Deployed At',
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>;
},
},
{
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">
<View serverLog={row.original.log} />
<Download serverLog={row.original.log}>
<DropdownMenuItem>Download</DropdownMenuItem>
</Download>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
},
},
];

44
resources/js/pages/commands/index.tsx Normal file
View File

@ -0,0 +1,44 @@
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 { PlusIcon } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import { columns } from '@/pages/commands/components/columns';
import CreateCommand from '@/pages/commands/components/create-command';
import { PaginatedData } from '@/types';
import { Command } from '@/types/command';
import { Site } from '@/types/site';
export default function Commands() {
const page = usePage<{
server: Server;
site: Site;
commands: PaginatedData<Command>;
}>();
return (
<ServerLayout>
<Head title={`Commands - ${page.props.site.domain} - ${page.props.server.name}`} />
<Container className="max-w-5xl">
<HeaderContainer>
<Heading title="Commands" description="These are the commands that you can run on your site's location" />
<div className="flex items-center gap-2">
<CreateCommand>
<Button>
<PlusIcon />
<span className="hidden lg:block">Create</span>
</Button>
</CreateCommand>
</div>
</HeaderContainer>
<DataTable columns={columns} paginatedData={page.props.commands} />
</Container>
</ServerLayout>
);
}

35
resources/js/pages/commands/show.tsx Normal file
View File

@ -0,0 +1,35 @@
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 ServerLayout from '@/layouts/server/layout';
import { DataTable } from '@/components/data-table';
import { PaginatedData } from '@/types';
import { columns } from '@/pages/commands/components/execution-columns';
import { Site } from '@/types/site';
import { CommandExecution } from '@/types/command-execution';
type Page = {
server: Server;
site: Site;
executions: PaginatedData<CommandExecution>;
};
export default function Show() {
const page = usePage<Page>();
return (
<ServerLayout>
<Head title={`Executions - ${page.props.site.domain} - ${page.props.server.name}`} />
<Container className="max-w-5xl">
<HeaderContainer>
<Heading title={`Command executions`} description="Here you can see the command executions" />
</HeaderContainer>
<DataTable columns={columns} paginatedData={page.props.executions} />
</Container>
</ServerLayout>
);
}

19
resources/js/pages/php/components/ini.tsx
View File

@ -10,8 +10,11 @@ import { Form } from '@/components/ui/form';
import { Skeleton } from '@/components/ui/skeleton';
import { Button } from '@/components/ui/button';
import { LoaderCircleIcon } from 'lucide-react';
import { registerIniLanguage } from '@/lib/editor';
import { useAppearance } from '@/hooks/use-appearance';
export default function PHPIni({ service, type }: { service: Service; type: 'fpm' | 'cli' }) {
const { getActualAppearance } = useAppearance();
const [open, setOpen] = useState(false);
const form = useForm<{
ini: string;
@ -52,17 +55,7 @@ export default function PHPIni({ service, type }: { service: Service; type: 'fpm
enabled: open,
});
const monaco = useMonaco();
monaco?.languages.register({ id: 'ini' });
monaco?.languages.setMonarchTokensProvider('ini', {
tokenizer: {
root: [
[/^\[.*]$/, 'keyword'],
[/^[^=]+(?==)/, 'attribute.name'],
[/=.+$/, 'attribute.value'],
],
},
});
registerIniLanguage(useMonaco());
return (
<Sheet open={open} onOpenChange={setOpen}>
@ -79,7 +72,7 @@ export default function PHPIni({ service, type }: { service: Service; type: 'fpm
<Editor
defaultLanguage="ini"
defaultValue={query.data.ini}
theme="vs-dark"
theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
className="h-full"
onChange={(value) => form.setData('ini', value ?? '')}
options={{
@ -87,7 +80,7 @@ export default function PHPIni({ service, type }: { service: Service; type: 'fpm
}}
/>
) : (
<Skeleton className="h-full w-full" />
<Skeleton className="h-full w-full rounded-none" />
)}
</Form>
<SheetFooter>

129
resources/js/pages/redirects/components/columns.tsx Normal file
View File

@ -0,0 +1,129 @@
import { ColumnDef } from '@tanstack/react-table';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
import React, { useState } from 'react';
import { Badge } from '@/components/ui/badge';
import DateTime from '@/components/date-time';
import { Redirect } from '@/types/redirect';
import { useForm } from '@inertiajs/react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import FormSuccessful from '@/components/form-successful';
function Delete({ redirect }: { redirect: Redirect }) {
const [open, setOpen] = useState(false);
const form = useForm();
const submit = () => {
form.delete(
route('redirects.destroy', {
server: redirect.server_id,
site: redirect.site_id,
redirect: redirect.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 Redirect</DialogTitle>
<DialogDescription className="sr-only">Delete Redirect</DialogDescription>
</DialogHeader>
<div className="space-y-2 p-4">
<p>Are you sure you want to delete this redirect?</p>
</div>
<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<Redirect>[] = [
{
accessorKey: 'from',
header: 'From',
enableColumnFilter: true,
enableSorting: true,
},
{
accessorKey: 'to',
header: 'To',
enableColumnFilter: true,
enableSorting: true,
},
{
accessorKey: 'mode',
header: 'Mode',
enableColumnFilter: true,
enableSorting: true,
},
{
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>;
},
},
{
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 redirect={row.original} />
</DropdownMenuContent>
</DropdownMenu>
</div>
);
},
},
];

112
resources/js/pages/redirects/components/create-redirect.tsx Normal file
View File

@ -0,0 +1,112 @@
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 { Site } from '@/types/site';
type CreateForm = {
mode: string;
from: string;
to: string;
};
export default function CreateRedirect({ site, children }: { site: Site; children: ReactNode }) {
const [open, setOpen] = useState(false);
const form = useForm<CreateForm>({
mode: '',
from: '',
to: '',
});
const submit = (e: FormEvent) => {
e.preventDefault();
form.post(route('redirects.store', { server: site.server_id, site: site.id }), {
onSuccess: () => {
form.reset();
setOpen(false);
},
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Create Redirect</DialogTitle>
<DialogDescription className="sr-only">Create new Redirect</DialogDescription>
</DialogHeader>
<Form className="p-4" id="create-redirect-form" onSubmit={submit}>
<FormFields>
<FormField>
<Label htmlFor="mode">Mode</Label>
<Select onValueChange={(value) => form.setData('mode', value)} defaultValue={form.data.mode}>
<SelectTrigger id="mode">
<SelectValue placeholder="Select mode" />
</SelectTrigger>
<SelectContent>
<SelectItem value="301">301 - Moved Permanently</SelectItem>
<SelectItem value="302">302 - Found</SelectItem>
<SelectItem value="307">307 - Temporary Redirect</SelectItem>
<SelectItem value="308">308 - Permanent Redirect</SelectItem>
</SelectContent>
</Select>
<InputError message={form.errors.mode} />
</FormField>
<FormField>
<Label htmlFor="from">From</Label>
<Input
type="text"
id="from"
name="from"
value={form.data.from}
onChange={(e) => form.setData('from', e.target.value)}
placeholder="/path/to/redirect"
/>
<InputError message={form.errors.from} />
</FormField>
<FormField>
<Label htmlFor="to">To</Label>
<Input
type="text"
id="to"
name="to"
value={form.data.to}
onChange={(e) => form.setData('to', e.target.value)}
placeholder="https://new-url"
/>
<InputError message={form.errors.to} />
</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>
);
}

50
resources/js/pages/redirects/index.tsx Normal file
View File

@ -0,0 +1,50 @@
import ServerLayout from '@/layouts/server/layout';
import { Head, usePage } from '@inertiajs/react';
import { Server } from '@/types/server';
import { PaginatedData } from '@/types';
import Container from '@/components/container';
import HeaderContainer from '@/components/header-container';
import Heading from '@/components/heading';
import { Button } from '@/components/ui/button';
import { BookOpenIcon, PlusIcon } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import { columns } from '@/pages/redirects/components/columns';
import { Redirect } from '@/types/redirect';
import CreateRedirect from '@/pages/redirects/components/create-redirect';
import { Site } from '@/types/site';
export default function Redirects() {
const page = usePage<{
server: Server;
site: Site;
redirects: PaginatedData<Redirect>;
}>();
return (
<ServerLayout>
<Head title={`Redirect - ${page.props.server.name}`} />
<Container className="max-w-5xl">
<HeaderContainer>
<Heading title="Redirect" description="Here you can Redirect certificates" />
<div className="flex items-center gap-2">
<a href="https://vitodeploy.com/docs/sites/redirects" target="_blank">
<Button variant="outline">
<BookOpenIcon />
<span className="hidden lg:block">Docs</span>
</Button>
</a>
<CreateRedirect site={page.props.site}>
<Button>
<PlusIcon />
<span className="hidden lg:block">Create redirect</span>
</Button>
</CreateRedirect>
</div>
</HeaderContainer>
<DataTable columns={columns} paginatedData={page.props.redirects} />
</Container>
</ServerLayout>
);
}

8
resources/js/pages/server-logs/components/columns.tsx
View File

@ -21,7 +21,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSepara
import { useForm } from '@inertiajs/react';
import FormSuccessful from '@/components/form-successful';
function View({ serverLog }: { serverLog: ServerLog }) {
export function View({ serverLog, children }: { serverLog: ServerLog; children?: ReactNode }) {
const [open, setOpen] = useState(false);
const query = useQuery({
@ -47,9 +47,7 @@ function View({ serverLog }: { serverLog: ServerLog }) {
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>View</DropdownMenuItem>
</DialogTrigger>
<DialogTrigger asChild>{children ? children : <DropdownMenuItem onSelect={(e) => e.preventDefault()}>View</DropdownMenuItem>}</DialogTrigger>
<DialogContent className="sm:max-w-5xl">
<DialogHeader>
<DialogTitle>View Log</DialogTitle>
@ -72,7 +70,7 @@ function View({ serverLog }: { serverLog: ServerLog }) {
);
}
function Download({ serverLog, children }: { serverLog: ServerLog; children: ReactNode }) {
export function Download({ serverLog, children }: { serverLog: ServerLog; children: ReactNode }) {
return (
<a href={route('logs.download', { server: serverLog.server_id, log: serverLog.id })} target="_blank">
{children}

17
resources/js/pages/server-settings/index.tsx
View File

@ -13,6 +13,7 @@ import DateTime from '@/components/date-time';
import CopyableBadge from '@/components/copyable-badge';
import { Input } from '@/components/ui/input';
import React, { useState } from 'react';
import DeleteServer from '@/pages/servers/components/delete-server';
export default function Databases() {
const page = usePage<{
@ -208,6 +209,22 @@ export default function Databases() {
</div>
</CardContent>
</Card>
<Card className="border-destructive/50">
<CardHeader>
<CardTitle>Delete server</CardTitle>
<CardDescription>Here you can delete the server.</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-2 p-4">
<p>please note that this action is irreversible and will delete all data associated with the server.</p>
<DeleteServer server={page.props.server}>
<Button variant="destructive">Delete server</Button>
</DeleteServer>
</div>
</CardContent>
</Card>
</Container>
</ServerLayout>
);

9
resources/js/pages/servers/components/actions.tsx
View File

@ -1,8 +1,7 @@
import { Server } from '@/types/server';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
import DeleteServer from '@/pages/servers/components/delete-server';
import RebootServer from '@/pages/servers/components/reboot-server';
import { useForm } from '@inertiajs/react';
import UpdateServer from '@/pages/servers/components/update-server';
@ -69,12 +68,6 @@ export default function ServerActions({ server }: { server: Server }) {
Update
</DropdownMenuItem>
</UpdateServer>
<DropdownMenuSeparator />
<DeleteServer server={server}>
<DropdownMenuItem onSelect={(e) => e.preventDefault()} variant="destructive">
Delete Server
</DropdownMenuItem>
</DeleteServer>
</DropdownMenuContent>
</DropdownMenu>
);

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

@ -80,7 +80,7 @@ export default function ServerHeader({ server, site }: { server: Server; site?:
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center space-x-1">
<LoaderCircleIcon className={cn('size-4', server.status === 'installing' ? 'animate-spin' : '')} />
<LoaderCircleIcon className={cn('size-4', server.status === 'installing' ? 'text-brand animate-spin' : '')} />
<div>%{parseInt(server.progress || '0')}</div>
{server.status === 'installation_failed' && (
<Badge className="ml-1" variant={server.status_color}>
@ -115,7 +115,7 @@ export default function ServerHeader({ server, site }: { server: Server; site?:
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center space-x-1">
<LoaderCircleIcon className={cn('size-4', site.status === 'installing' ? 'animate-spin' : '')} />
<LoaderCircleIcon className={cn('size-4', site.status === 'installing' ? 'text-brand animate-spin' : '')} />
<div>%{parseInt(site.progress.toString() || '0')}</div>
{site.status === 'installation_failed' && (
<Badge className="ml-1" variant={site.status_color}>

70
resources/js/pages/site-settings/components/branch.tsx Normal file
View File

@ -0,0 +1,70 @@
import { FormEvent, ReactNode, useState } from 'react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { useForm } from '@inertiajs/react';
import { Form, FormField, FormFields } from '@/components/ui/form';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import InputError from '@/components/ui/input-error';
import { LoaderCircleIcon } from 'lucide-react';
import { Site } from '@/types/site';
export default function ChangeBranch({ site, children }: { site: Site; children: ReactNode }) {
const [open, setOpen] = useState(false);
const form = useForm<{
branch: string;
}>({
branch: site.branch || '',
});
const submit = (e: FormEvent) => {
e.preventDefault();
form.patch(route('site-settings.update-branch', { server: site.server_id, site: site.id }), {
onSuccess: () => {
setOpen(false);
},
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Change branch</DialogTitle>
<DialogDescription className="sr-only">Change site's source control branch.</DialogDescription>
</DialogHeader>
<Form id="change-branch-form" onSubmit={submit} className="p-4">
<FormFields>
<FormField>
<Label htmlFor="branch">Branch</Label>
<Input id="branch" value={form.data.branch} onChange={(e) => form.setData('branch', e.target.value)} placeholder="main" />
<InputError message={form.errors.branch} />
</FormField>
</FormFields>
</Form>
<DialogFooter className="gap-2">
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button form="change-branch-form" disabled={form.processing}>
{form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
Save
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

73
resources/js/pages/site-settings/components/delete-site.tsx Normal file
View File

@ -0,0 +1,73 @@
import { FormEvent, ReactNode } from 'react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { useForm } from '@inertiajs/react';
import { Form, FormField, FormFields } from '@/components/ui/form';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import InputError from '@/components/ui/input-error';
import { LoaderCircleIcon } from 'lucide-react';
import { Site } from '@/types/site';
import siteHelper from '@/lib/site-helper';
export default function DeleteSite({ site, children }: { site: Site; children: ReactNode }) {
const form = useForm({
domain: '',
});
const submit = (e: FormEvent) => {
e.preventDefault();
form.delete(route('site-settings.destroy', { server: site.server_id, site: site.id }), {
onSuccess: () => {
siteHelper.storeSite();
},
});
};
return (
<Dialog>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete {site.domain}</DialogTitle>
<DialogDescription className="sr-only">Delete site and its resources.</DialogDescription>
</DialogHeader>
<p className="p-4">
Are you sure you want to delete this site: <strong>{site.domain}</strong>? All resources associated with this site will be deleted and this
action cannot be undone.
</p>
<Form id="delete-site-form" onSubmit={submit} className="p-4">
<FormFields>
<FormField>
<Label htmlFor="domain">Domain</Label>
<Input id="domain" value={form.data.domain} onChange={(e) => form.setData('domain', e.target.value)} />
<InputError message={form.errors.domain} />
</FormField>
</FormFields>
</Form>
<DialogFooter className="gap-2">
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button form="delete-site-form" variant="destructive" disabled={form.processing}>
{form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
Delete site
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

75
resources/js/pages/site-settings/components/php-version.tsx Normal file
View File

@ -0,0 +1,75 @@
import { FormEvent, ReactNode, useState } from 'react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { useForm } from '@inertiajs/react';
import { Form, FormField, FormFields } from '@/components/ui/form';
import { Label } from '@/components/ui/label';
import InputError from '@/components/ui/input-error';
import { LoaderCircleIcon } from 'lucide-react';
import { Site } from '@/types/site';
import ServiceVersionSelect from '@/pages/services/components/service-version-select';
export default function ChangePHPVersion({ site, children }: { site: Site; children: ReactNode }) {
const [open, setOpen] = useState(false);
const form = useForm<{
version: string;
}>({
version: site.php_version || '',
});
const submit = (e: FormEvent) => {
e.preventDefault();
form.patch(route('site-settings.update-php-version', { server: site.server_id, site: site.id }), {
onSuccess: () => {
setOpen(false);
},
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Change PHP version</DialogTitle>
<DialogDescription className="sr-only">Change site's php version.</DialogDescription>
</DialogHeader>
<Form id="change-php-version-form" onSubmit={submit} className="p-4">
<FormFields>
<FormField>
<Label htmlFor="versino">PHP version</Label>
<ServiceVersionSelect
serverId={site.server_id}
service="php"
value={form.data.version}
onValueChange={(value) => form.setData('version', value)}
/>
<InputError message={form.errors.version} />
</FormField>
</FormFields>
</Form>
<DialogFooter className="gap-2">
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button form="change-php-version-form" disabled={form.processing}>
{form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
Save
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

70
resources/js/pages/site-settings/components/source-control.tsx Normal file
View File

@ -0,0 +1,70 @@
import { FormEvent, ReactNode, useState } from 'react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { useForm } from '@inertiajs/react';
import { Form, FormField, FormFields } from '@/components/ui/form';
import { Label } from '@/components/ui/label';
import InputError from '@/components/ui/input-error';
import { LoaderCircleIcon } from 'lucide-react';
import { Site } from '@/types/site';
import SourceControlSelect from '@/pages/source-controls/components/source-control-select';
export default function ChangeSourceControl({ site, children }: { site: Site; children: ReactNode }) {
const [open, setOpen] = useState(false);
const form = useForm<{
source_control: string;
}>({
source_control: site.source_control_id.toString() || '',
});
const submit = (e: FormEvent) => {
e.preventDefault();
form.patch(route('site-settings.update-source-control', { server: site.server_id, site: site.id }), {
onSuccess: () => {
setOpen(false);
},
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Change source control</DialogTitle>
<DialogDescription className="sr-only">Change site's source control.</DialogDescription>
</DialogHeader>
<Form id="change-php-version-form" onSubmit={submit} className="p-4">
<FormFields>
<FormField>
<Label htmlFor="versino">PHP version</Label>
<SourceControlSelect value={form.data.source_control} onValueChange={(value) => form.setData('source_control', value)} />
<InputError message={form.errors.source_control} />
</FormField>
</FormFields>
</Form>
<DialogFooter className="gap-2">
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button form="change-php-version-form" disabled={form.processing}>
{form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
Save
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

104
resources/js/pages/site-settings/components/vhost.tsx Normal file
View File

@ -0,0 +1,104 @@
import React, { FormEvent, ReactNode, useState } from 'react';
import { useForm } from '@inertiajs/react';
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
import { Editor, useMonaco } from '@monaco-editor/react';
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import { Form } from '@/components/ui/form';
import { Skeleton } from '@/components/ui/skeleton';
import { Button } from '@/components/ui/button';
import { LoaderCircleIcon } from 'lucide-react';
import { registerCaddyLanguage, registerNginxLanguage } from '@/lib/editor';
import { useAppearance } from '@/hooks/use-appearance';
import { Site } from '@/types/site';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { StatusRipple } from '@/components/status-ripple';
export default function VHost({ site, children }: { site: Site; children: ReactNode }) {
const { getActualAppearance } = useAppearance();
const [open, setOpen] = useState(false);
const form = useForm<{
vhost: string;
}>({
vhost: '',
});
const submit = (e: FormEvent) => {
e.preventDefault();
form.patch(route('site-settings.update-vhost', { server: site.server_id, site: site.id }), {
onSuccess: () => {
setOpen(false);
},
});
};
const query = useQuery({
queryKey: ['site-settings.vhost', site.server_id, site.id],
queryFn: async () => {
const response = await axios.get(
route('site-settings.vhost', {
server: site.server_id,
site: site.id,
}),
);
if (response.data?.vhost) {
form.setData('vhost', response.data.vhost);
}
return response.data;
},
retry: false,
enabled: open,
});
const monaco = useMonaco();
registerNginxLanguage(monaco);
registerCaddyLanguage(monaco);
return (
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger asChild>{children}</SheetTrigger>
<SheetContent className="sm:max-w-5xl">
<SheetHeader>
<SheetTitle>Edit virtual host file</SheetTitle>
<SheetDescription className="sr-only">Edit virtual host file.</SheetDescription>
</SheetHeader>
<Form id="update-vhost-form" className="h-full" onSubmit={submit}>
{query.isSuccess ? (
<Editor
defaultLanguage={site.webserver}
defaultValue={query.data.vhost}
theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
className="h-full"
onChange={(value) => form.setData('vhost', value ?? '')}
options={{
fontSize: 15,
}}
/>
) : (
<Skeleton className="h-full w-full rounded-none" />
)}
{/*make alert center with absolute position*/}
<div className="absolute! right-0 bottom-[80px] left-0 z-10 mx-auto max-w-5xl px-6">
<Alert variant="destructive">
<AlertDescription className="flex items-center gap-2">
<StatusRipple variant="destructive" />
<p>Nginx vhost file will get reset if you generate or modify SSLs, Aliases, or create/delete site redirects.</p>
</AlertDescription>
</Alert>
</div>
</Form>
<SheetFooter>
<div className="flex items-center gap-2">
<Button form="update-vhost-form" disabled={form.processing || query.isLoading} onClick={submit} className="ml-2">
{(form.processing || query.isLoading) && <LoaderCircleIcon className="animate-spin" />}
Save
</Button>
<SheetClose asChild>
<Button variant="outline">Cancel</Button>
</SheetClose>
</div>
</SheetFooter>
</SheetContent>
</Sheet>
);
}

167
resources/js/pages/site-settings/index.tsx Normal file
View File

@ -0,0 +1,167 @@
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 { BookOpenIcon } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import DateTime from '@/components/date-time';
import React from 'react';
import { Site } from '@/types/site';
import { Badge } from '@/components/ui/badge';
import ChangeBranch from '@/pages/site-settings/components/branch';
import { SourceControl } from '@/types/source-control';
import CopyableBadge from '@/components/copyable-badge';
import ChangePHPVersion from '@/pages/site-settings/components/php-version';
import DeleteSite from '@/pages/site-settings/components/delete-site';
import VHost from '@/pages/site-settings/components/vhost';
import ChangeSourceControl from '@/pages/site-settings/components/source-control';
export default function Databases() {
const page = usePage<{
server: Server;
site: Site;
sourceControl?: SourceControl;
}>();
return (
<ServerLayout>
<Head title={`Settings - ${page.props.site.domain}`} />
<Container className="max-w-5xl">
<HeaderContainer>
<Heading title="Settings" description="Here you can manage your server's settings" />
<div className="flex items-center gap-2">
<a href="https://vitodeploy.com/docs/sites/settings" target="_blank">
<Button variant="outline">
<BookOpenIcon />
<span className="hidden lg:block">Docs</span>
</Button>
</a>
</div>
</HeaderContainer>
<Card>
<CardHeader className="flex-row items-center justify-between gap-2">
<div className="space-y-2">
<CardTitle>Site details</CardTitle>
<CardDescription>Update site details</CardDescription>
</div>
</CardHeader>
<CardContent>
<div className="flex items-center justify-between p-4">
<span>ID</span>
<span className="text-muted-foreground">{page.props.site.id}</span>
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Domain</span>
<a href={page.props.site.url} target="_blank" className="text-muted-foreground hover:underline">
{page.props.site.domain}
</a>
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Type</span>
<span className="text-muted-foreground">{page.props.site.type}</span>
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Source control</span>
{page.props.site.source_control_id ? (
<ChangeSourceControl site={page.props.site}>
<Button variant="outline" className="h-6">
{page.props.sourceControl?.provider}
</Button>
</ChangeSourceControl>
) : (
<span className="text-muted-foreground">-</span>
)}
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Repository</span>
<span className="text-muted-foreground">{page.props.site.repository || '-'}</span>
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Branch</span>
{page.props.site.source_control_id ? (
<ChangeBranch site={page.props.site}>
<Button variant="outline" className="h-6">
{page.props.site.branch}
</Button>
</ChangeBranch>
) : (
'-'
)}
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>VHost</span>
<VHost site={page.props.site}>
<Button variant="outline" className="h-6">
Edit VHost
</Button>
</VHost>
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Web directory</span>
<span className="text-muted-foreground">{page.props.site.web_directory || '-'}</span>
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Path</span>
<CopyableBadge text={page.props.site.path} />
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>PHP version</span>
{page.props.site.php_version ? (
<ChangePHPVersion site={page.props.site}>
<Button variant="outline" className="h-6">
{page.props.site.php_version}
</Button>
</ChangePHPVersion>
) : (
<span className="text-muted-foreground">-</span>
)}
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Status</span>
<Badge variant={page.props.site.status_color}>{page.props.site.status}</Badge>
</div>
<Separator />
<div className="flex items-center justify-between p-4">
<span>Created at</span>
<span className="text-muted-foreground">
<DateTime date={page.props.site.created_at} />
</span>
</div>
</CardContent>
</Card>
<Card className="border-destructive/50">
<CardHeader>
<CardTitle>Delete site</CardTitle>
<CardDescription>Here you can delete the site.</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-2 p-4">
<p>please note that this action is irreversible and will delete all data associated with the site.</p>
<DeleteSite site={page.props.site}>
<Button variant="destructive">Delete site</Button>
</DeleteSite>
</div>
</CardContent>
</Card>
</Container>
</ServerLayout>
);
}

2
resources/js/pages/sites/components/columns.tsx
View File

@ -56,7 +56,7 @@ export default function getColumns(server?: Server): ColumnDef<Site>[] {
cell: ({ row }) => {
return (
<div className="flex items-center justify-end">
<Link href={route('sites.show', { server: row.original.server_id, site: row.original.id })} prefetch>
<Link href={route('application', { server: row.original.server_id, site: row.original.id })} prefetch>
<Button variant="outline" size="sm">
<EyeIcon />
</Button>

36
resources/js/pages/sites/logs.tsx Normal file
View File

@ -0,0 +1,36 @@
import { Head, usePage } from '@inertiajs/react';
import { Site } from '@/types/site';
import ServerLayout from '@/layouts/server/layout';
import { Server } from '@/types/server';
import Container from '@/components/container';
import HeaderContainer from '@/components/header-container';
import Heading from '@/components/heading';
import React from 'react';
import { PaginatedData } from '@/types';
import { ServerLog } from '@/types/server-log';
import { DataTable } from '@/components/data-table';
import { columns } from '@/pages/server-logs/components/columns';
type Page = {
server: Server;
site: Site;
logs: PaginatedData<ServerLog>;
};
export default function ShowSite() {
const page = usePage<Page>();
return (
<ServerLayout>
<Head title={`${page.props.site.domain} - ${page.props.server.name}`} />
<Container className="max-w-5xl">
<HeaderContainer>
<Heading title="Logs" description="Here you can see your site's logs" />
</HeaderContainer>
<DataTable columns={columns} paginatedData={page.props.logs} />
</Container>
</ServerLayout>
);
}

189
resources/js/pages/ssls/components/columns.tsx Normal file
View File

@ -0,0 +1,189 @@
import { ColumnDef } from '@tanstack/react-table';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { LoaderCircleIcon, LockIcon, LockOpenIcon, MoreVerticalIcon } from 'lucide-react';
import React, { useState } from 'react';
import { Badge } from '@/components/ui/badge';
import DateTime from '@/components/date-time';
import { SSL } from '@/types/ssl';
import moment from 'moment';
import { View } from '@/pages/server-logs/components/columns';
import { useForm } from '@inertiajs/react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import FormSuccessful from '@/components/form-successful';
function Delete({ ssl }: { ssl: SSL }) {
const [open, setOpen] = useState(false);
const form = useForm();
const submit = () => {
form.delete(route('ssls.destroy', { server: ssl.server_id, site: ssl.site_id, ssl: ssl.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 SSL</DialogTitle>
<DialogDescription className="sr-only">Delete SSL</DialogDescription>
</DialogHeader>
<div className="space-y-2 p-4">
<p>Are you sure you want to delete this certificate?</p>
</div>
<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>
);
}
function ToggleActivate({ ssl }: { ssl: SSL }) {
const [open, setOpen] = useState(false);
const form = useForm();
const submit = () => {
const url = ssl.is_active
? route('ssls.deactivate', { server: ssl.server_id, site: ssl.site_id, ssl: ssl.id })
: route('ssls.activate', { server: ssl.server_id, site: ssl.site_id, ssl: ssl.id });
form.post(url, {
onSuccess: () => {
setOpen(false);
},
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>{ssl.is_active ? 'Deactivate' : 'Activate'}</DropdownMenuItem>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{ssl.is_active ? 'Deactivate' : 'Activate'} SSL</DialogTitle>
<DialogDescription className="sr-only">{ssl.is_active ? 'Deactivate' : 'Activate'} SSL</DialogDescription>
</DialogHeader>
<div className="space-y-2 p-4">
<p>Are you sure you want to {ssl.is_active ? 'deactivate' : 'activate'} this certificate?</p>
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button variant={ssl.is_active ? 'destructive' : 'default'} disabled={form.processing} onClick={submit}>
{form.processing && <LoaderCircleIcon className="animate-spin" />}
<FormSuccessful successful={form.recentlySuccessful} />
{ssl.is_active ? 'Deactivate' : 'Activate'}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
export const columns: ColumnDef<SSL>[] = [
{
accessorKey: 'id',
header: 'Is active',
enableColumnFilter: true,
enableSorting: true,
cell: ({ row }) => {
return row.original.is_active ? <LockIcon className="text-success" /> : <LockOpenIcon />;
},
},
{
accessorKey: 'type',
header: 'Type',
enableColumnFilter: true,
enableSorting: true,
},
{
accessorKey: 'created_at',
header: 'Created at',
enableColumnFilter: true,
enableSorting: true,
cell: ({ row }) => {
return <DateTime date={row.original.created_at} />;
},
},
{
accessorKey: 'expires_at',
header: 'Expires at',
enableColumnFilter: true,
enableSorting: true,
cell: ({ row }) => {
const targetDate = moment(row.original.expires_at);
const today = moment();
const daysRemaining = targetDate.diff(today, 'days');
return (
<div className="flex items-center gap-2">
<DateTime date={row.original.expires_at} /> ({daysRemaining} days remaining)
</div>
);
},
},
{
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">
<ToggleActivate ssl={row.original} />
{row.original.log && (
<>
<View serverLog={row.original.log}>
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>View Log</DropdownMenuItem>
</View>
<DropdownMenuSeparator />
</>
)}
<Delete ssl={row.original} />
</DropdownMenuContent>
</DropdownMenu>
</div>
);
},
},
];

141
resources/js/pages/ssls/components/create-ssl.tsx Normal file
View File

@ -0,0 +1,141 @@
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 { Checkbox } from '@/components/ui/checkbox';
import { Site } from '@/types/site';
import { Textarea } from '@/components/ui/textarea';
import { Alert, AlertDescription } from '@/components/ui/alert';
type CreateForm = {
type: string;
email: string;
certificate: string;
private: string;
expires_at: string;
aliases: boolean;
};
export default function CreateSSL({ site, children }: { site: Site; children: ReactNode }) {
const [open, setOpen] = useState(false);
const form = useForm<CreateForm>({
type: '',
email: '',
certificate: '',
private: '',
expires_at: '',
aliases: false,
});
const submit = (e: FormEvent) => {
e.preventDefault();
form.post(route('ssls.store', { server: site.server_id, site: site.id }), {
onSuccess: () => {
form.reset();
setOpen(false);
},
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Create SSL</DialogTitle>
<DialogDescription className="sr-only">Create new SSL</DialogDescription>
</DialogHeader>
<Form className="p-4" id="create-ssl-form" onSubmit={submit}>
<FormFields>
<FormField>
<Label htmlFor="type">Type</Label>
<Select onValueChange={(value) => form.setData('type', value)} defaultValue={form.data.type}>
<SelectTrigger id="type">
<SelectValue placeholder="Select type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="letsencrypt">Let's Encrypt</SelectItem>
<SelectItem value="custom">Custom</SelectItem>
</SelectContent>
</Select>
<InputError message={form.errors.type} />
</FormField>
{form.data.type === 'letsencrypt' && (
<>
<Alert>
<AlertDescription>
<p>
Let's Encrypt has rate limits. Read more about them{' '}
<a href="https://letsencrypt.org/docs/rate-limits/" target="_blank" className="underline">
here
</a>
.
</p>
</AlertDescription>
</Alert>
<FormField>
<Label htmlFor="email">Email</Label>
<Input type="text" id="email" name="email" value={form.data.email} onChange={(e) => form.setData('email', e.target.value)} />
<InputError message={form.errors.email} />
</FormField>
</>
)}
{form.data.type === 'custom' && (
<>
<FormField>
<Label htmlFor="certificate">Certificate</Label>
<Textarea
id="certificate"
name="certificate"
value={form.data.certificate}
onChange={(e) => form.setData('certificate', e.target.value)}
/>
<InputError message={form.errors.certificate} />
</FormField>
<FormField>
<Label htmlFor="private">Private key</Label>
<Textarea id="private" name="private" value={form.data.private} onChange={(e) => form.setData('private', e.target.value)} />
<InputError message={form.errors.private} />
</FormField>
</>
)}
<FormField>
<div className="flex items-center space-x-3">
<Checkbox id="aliases" name="aliases" checked={form.data.aliases} onClick={() => form.setData('aliases', !form.data.aliases)} />
<Label htmlFor="aliases">Set SSL for site's aliases as well</Label>
</div>
<InputError message={form.errors.aliases} />
</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>
);
}

59
resources/js/pages/ssls/components/force-ssl.tsx Normal file
View File

@ -0,0 +1,59 @@
import React, { useState } from 'react';
import { useForm } from '@inertiajs/react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { LoaderCircleIcon } from 'lucide-react';
import FormSuccessful from '@/components/form-successful';
import { Site } from '@/types/site';
export default function ToggleForceSSL({ site }: { site: Site }) {
const [open, setOpen] = useState(false);
const form = useForm();
const submit = () => {
const url = site.force_ssl
? route('ssls.disable-force-ssl', { server: site.server_id, site: site.id })
: route('ssls.enable-force-ssl', { server: site.server_id, site: site.id });
form.post(url, {
onSuccess: () => {
setOpen(false);
},
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>{site.force_ssl ? 'Disable' : 'Enable'} Force-SSL</DropdownMenuItem>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{site.force_ssl ? 'Disable' : 'Enable'} Force-SSL</DialogTitle>
<DialogDescription className="sr-only">{site.force_ssl ? 'Disable' : 'Enable'} Force-SSL</DialogDescription>
</DialogHeader>
<div className="space-y-2 p-4">
<p>Are you sure you want to {site.force_ssl ? 'disable' : 'enable'} force-ssl?</p>
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button variant={site.force_ssl ? 'destructive' : 'default'} disabled={form.processing} onClick={submit}>
{form.processing && <LoaderCircleIcon className="animate-spin" />}
<FormSuccessful successful={form.recentlySuccessful} />
{site.force_ssl ? 'Disable' : 'Enable'}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

64
resources/js/pages/ssls/index.tsx Normal file
View File

@ -0,0 +1,64 @@
import ServerLayout from '@/layouts/server/layout';
import { Head, usePage } from '@inertiajs/react';
import { Server } from '@/types/server';
import { PaginatedData } from '@/types';
import Container from '@/components/container';
import HeaderContainer from '@/components/header-container';
import Heading from '@/components/heading';
import { Button } from '@/components/ui/button';
import { BookOpenIcon, MoreHorizontalIcon, PlusIcon } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import { columns } from '@/pages/ssls/components/columns';
import { SSL } from '@/types/ssl';
import CreateSSL from '@/pages/ssls/components/create-ssl';
import { Site } from '@/types/site';
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import React from 'react';
import ToggleForceSSL from '@/pages/ssls/components/force-ssl';
export default function Ssls() {
const page = usePage<{
server: Server;
site: Site;
ssls: PaginatedData<SSL>;
}>();
return (
<ServerLayout>
<Head title={`SSL - ${page.props.server.name}`} />
<Container className="max-w-5xl">
<HeaderContainer>
<Heading title="SSL" description="Here you can SSL certificates" />
<div className="flex items-center gap-2">
<a href="https://vitodeploy.com/docs/sites/ssl" target="_blank">
<Button variant="outline">
<BookOpenIcon />
<span className="hidden lg:block">Docs</span>
</Button>
</a>
<CreateSSL site={page.props.site}>
<Button>
<PlusIcon />
<span className="hidden lg:block">New SSL</span>
</Button>
</CreateSSL>
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
<Button variant="outline">
<span className="sr-only">Open menu</span>
<MoreHorizontalIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<ToggleForceSSL site={page.props.site} />
</DropdownMenuContent>
</DropdownMenu>
</div>
</HeaderContainer>
<DataTable columns={columns} paginatedData={page.props.ssls} />
</Container>
</ServerLayout>
);
}

5
resources/js/pages/workers/components/form.tsx
View File

@ -21,8 +21,9 @@ import { Worker } from '@/types/worker';
import { SharedData } from '@/types';
import { Server } from '@/types/server';
import { Switch } from '@/components/ui/switch';
import { Site } from '@/types/site';
export default function WorkerForm({ serverId, worker, children }: { serverId: number; worker?: Worker; children: ReactNode }) {
export default function WorkerForm({ serverId, site, worker, children }: { serverId: number; site?: Site; worker?: Worker; children: ReactNode }) {
const page = usePage<SharedData & { server: Server }>();
const [open, setOpen] = useState(false);
const form = useForm<{
@ -51,7 +52,7 @@ export default function WorkerForm({ serverId, worker, children }: { serverId: n
return;
}
form.post(route('workers.store', { server: serverId }), {
form.post(route('workers.store', { server: serverId, site: site?.id }), {
onSuccess: () => {
setOpen(false);
form.reset();

4
resources/js/pages/workers/index.tsx
View File

@ -11,11 +11,13 @@ import { DataTable } from '@/components/data-table';
import { Worker } from '@/types/worker';
import { columns } from '@/pages/workers/components/columns';
import WorkerForm from '@/pages/workers/components/form';
import { Site } from '@/types/site';
export default function WorkerIndex() {
const page = usePage<{
server: Server;
workers: PaginatedData<Worker>;
site?: Site;
}>();
return (
@ -32,7 +34,7 @@ export default function WorkerIndex() {
<span className="hidden lg:block">Docs</span>
</Button>
</a>
<WorkerForm serverId={page.props.server.id}>
<WorkerForm serverId={page.props.server.id} site={page.props.site}>
<Button>
<PlusIcon />
<span className="hidden lg:block">Create</span>