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

2
resources/js/components/app-sidebar-nested.tsx
View File

@ -103,7 +103,7 @@ export function AppSidebar() {
},
{
title: 'Application',
href: route('sites.show', { server: page.props.server?.id || 0, site: page.props.site?.id || 0 }),
href: route('application', { server: page.props.server?.id || 0, site: page.props.site?.id || 0 }),
icon: RocketIcon,
},
]

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

@ -129,7 +129,7 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?
<Collapsible key={`${item.title}-${item.href}`} defaultOpen={isActive} className="group/collapsible">
<SidebarMenuItem>
<CollapsibleTrigger asChild>
<SidebarMenuButton disabled={item.isDisabled || false}>
<SidebarMenuButton disabled={item.isDisabled || false} hidden={item.hidden}>
{item.icon && <item.icon />}
<span>{item.title}</span>
<ChevronRightIcon className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
@ -162,7 +162,7 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?
}
return (
<SidebarMenuItem key={`${item.title}-${item.href}`}>
<SidebarMenuItem key={`${item.title}-${item.href}`} hidden={item.hidden}>
<SidebarMenuButton onClick={() => router.visit(item.href)} isActive={isActive} disabled={item.isDisabled || false}>
{item.icon && <item.icon />}
<span>{item.title}</span>

2
resources/js/components/copyable-badge.tsx
View File

@ -17,7 +17,7 @@ export default function CopyableBadge({ text }: { text: string }) {
<Tooltip>
<TooltipTrigger asChild>
<div className="inline-flex cursor-pointer justify-start space-x-2 truncate" onClick={copyToClipboard}>
<Badge variant={copySuccess ? 'success' : 'outline'} className="block max-w-[150px] overflow-ellipsis">
<Badge variant={copySuccess ? 'success' : 'outline'} className="block max-w-[200px] overflow-ellipsis">
{text}
</Badge>
</div>

13
resources/js/components/site-switch.tsx
View File

@ -15,15 +15,26 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { type Site } from '@/types/site';
import type { SharedData } from '@/types';
import CreateSite from '@/pages/sites/components/create-site';
import siteHelper from '@/lib/site-helper';
export function SiteSwitch() {
const page = usePage<SharedData>();
const [selectedSite, setSelectedSite] = useState(page.props.site || null);
const storedSite = siteHelper.getStoredSite();
const [selectedSite, setSelectedSite] = useState(page.props.site || storedSite || null);
const initials = useInitials();
const form = useForm();
if (storedSite && page.props.site && storedSite.id !== page.props.site.id) {
siteHelper.storeSite(page.props.site);
}
if (storedSite && page.props.serverSites && !page.props.serverSites.find((site) => site.id === storedSite.id)) {
siteHelper.storeSite();
}
const handleSiteChange = (site: Site) => {
setSelectedSite(site);
siteHelper.storeSite(site);
form.post(route('sites.switch', { server: site.server_id, site: site.id }));
};

11
resources/js/components/ui/dynamic-field.tsx
View File

@ -43,7 +43,7 @@ export default function DynamicField({ value, onChange, config, error }: Dynamic
<Label htmlFor={config.name} className="capitalize">
{label}
</Label>
<Select value={value as string} onValueChange={onChange}>
<Select defaultValue={value as string} onValueChange={onChange}>
<SelectTrigger id={config.name}>
<SelectValue placeholder={config.placeholder || `Select ${label}`} />
</SelectTrigger>
@ -74,7 +74,14 @@ export default function DynamicField({ value, onChange, config, error }: Dynamic
<Label htmlFor={config.name} className="capitalize">
{label}
</Label>
<Input type="text" name={config.name} id={config.name} value={(value as string) || ''} onChange={(e) => onChange(e.target.value)} {...props} />
<Input
type="text"
name={config.name}
id={config.name}
defaultValue={(value as string) || ''}
onChange={(e) => onChange(e.target.value)}
{...props}
/>
{config.description && <p className="text-muted-foreground text-xs">{config.description}</p>}
<InputError message={error} />
</FormField>

10
resources/js/hooks/use-appearance.tsx
View File

@ -62,6 +62,14 @@ export function useAppearance() {
applyTheme(mode);
}, []);
// create a method to return the actual appearance light or dark
const getActualAppearance = useCallback(() => {
if (appearance === 'system') {
return prefersDark() ? 'dark' : 'light';
}
return appearance;
}, [appearance]);
useEffect(() => {
const savedAppearance = localStorage.getItem('appearance') as Appearance | null;
updateAppearance(savedAppearance || 'system');
@ -69,5 +77,5 @@ export function useAppearance() {
return () => mediaQuery()?.removeEventListener('change', handleSystemThemeChange);
}, [updateAppearance]);
return { appearance, updateAppearance } as const;
return { appearance, updateAppearance, getActualAppearance } as const;
}

5
resources/js/icons/php.tsx
View File

@ -2,17 +2,18 @@ import React from 'react';
import { LucideProps } from 'lucide-react';
export const PHPIcon = React.forwardRef<SVGSVGElement, LucideProps>(
({ color = 'currentColor', size = 24, strokeWidth = 2, className, ...rest }, ref) => {
({ color = 'currentColor', size = 24, strokeWidth = 30, className, ...rest }, ref) => {
return (
<svg
ref={ref}
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 512 512"
fill={color}
fill="none"
width={size}
height={size}
strokeWidth={strokeWidth}
stroke={color}
className={className}
{...rest}
>

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

@ -1,20 +1,23 @@
import { type NavItem } from '@/types';
import {
ArrowLeftIcon,
ChartLineIcon,
ClockIcon,
CloudIcon,
CloudUploadIcon,
CogIcon,
CommandIcon,
DatabaseIcon,
FlameIcon,
HomeIcon,
KeyIcon,
ListEndIcon,
ListIcon,
LockIcon,
LogsIcon,
MousePointerClickIcon,
RocketIcon,
Settings2Icon,
SignpostIcon,
TerminalSquareIcon,
UsersIcon,
} from 'lucide-react';
@ -26,6 +29,7 @@ import { usePage, usePoll } from '@inertiajs/react';
import { Site } from '@/types/site';
import PHPIcon from '@/icons/php';
import NodeIcon from '@/icons/node';
import siteHelper from '@/lib/site-helper';
export default function ServerLayout({ children }: { children: ReactNode }) {
usePoll(7000);
@ -41,6 +45,7 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
}
const isMenuDisabled = page.props.server.status !== 'ready';
const site = page.props.site || siteHelper.getStoredSite() || null;
const sidebarNavItems: NavItem[] = [
{
@ -78,19 +83,53 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
href: route('sites', { server: page.props.server.id }),
icon: MousePointerClickIcon,
isDisabled: isMenuDisabled,
children: page.props.site
hidden: !page.props.server.services['webserver'],
children: site
? [
{
title: 'All sites',
href: route('sites', { server: page.props.server.id }),
onlyActivePath: route('sites', { server: page.props.server.id }),
icon: ArrowLeftIcon,
icon: ListIcon,
},
{
title: 'Application',
href: route('sites.show', { server: page.props.server.id, site: page.props.site.id }),
href: route('application', { server: page.props.server.id, site: site.id }),
onlyActivePath: route('application', { server: page.props.server.id, site: site.id }),
icon: RocketIcon,
},
{
title: 'Commands',
href: route('commands', { server: page.props.server.id, site: site.id }),
icon: CommandIcon,
},
{
title: 'SSL',
href: route('ssls', { server: page.props.server.id, site: site.id }),
icon: LockIcon,
},
{
title: 'Workers',
href: route('workers.site', { server: page.props.server.id, site: site.id }),
icon: ListEndIcon,
isDisabled: isMenuDisabled,
hidden: !page.props.server.services['process_manager'],
},
{
title: 'Redirects',
href: route('redirects', { server: page.props.server.id, site: site.id }),
icon: SignpostIcon,
},
{
title: 'Logs',
href: route('sites.logs', { server: page.props.server.id, site: site.id }),
icon: LogsIcon,
},
{
title: 'Settings',
href: route('site-settings', { server: page.props.server.id, site: site.id }),
icon: Settings2Icon,
},
]
: [],
},
@ -123,6 +162,7 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
href: route('workers', { server: page.props.server.id }),
icon: ListEndIcon,
isDisabled: isMenuDisabled,
hidden: !page.props.server.services['process_manager'],
},
{
title: 'SSH Keys',

235
resources/js/lib/editor.ts Normal file
View File

@ -0,0 +1,235 @@
type monacoType = typeof import('/Users/saeed/Projects/vito/node_modules/monaco-editor/esm/vs/editor/editor.api') | null;
export function registerIniLanguage(monaco: monacoType): void {
monaco?.languages.register({ id: 'ini' });
monaco?.languages.setMonarchTokensProvider('ini', {
tokenizer: {
root: [
[/^\[.*]$/, 'keyword'],
[/^[^=]+(?==)/, 'attribute.name'],
[/=.+$/, 'attribute.value'],
],
},
});
}
export function registerNginxLanguage(monaco: monacoType): void {
monaco?.languages.register({ id: 'nginx' });
monaco?.languages.setMonarchTokensProvider('nginx', {
defaultToken: '',
tokenPostfix: '.nginx',
keywords: [
'server',
'location',
'listen',
'server_name',
'root',
'index',
'charset',
'error_page',
'try_files',
'include',
'deny',
'access_log',
'log_not_found',
'add_header',
'fastcgi_pass',
'fastcgi_param',
'fastcgi_hide_header',
],
operators: ['=', '~', '!='],
symbols: /[=~]+/,
tokenizer: {
root: [
[/#.*$/, 'comment'],
// Block names like server, location
[/\b(server|location)\b/, 'keyword'],
// Keywords/directives
[
/\b([a-z_]+)\b(?=\s)/,
{
cases: {
'@keywords': 'keyword',
'@default': '',
},
},
],
// Operators
[
/@symbols/,
{
cases: {
'@operators': 'operator',
'@default': '',
},
},
],
// IPs, ports, URLs, filenames, values
[/\d+\.\d+\.\d+\.\d+(:\d+)?/, 'number'],
[/\/[^\s;"]*/, 'string.path'],
[/\$[a-zA-Z_][\w]*/, 'variable'],
[/".*?"/, 'string'],
[/'.*?'/, 'string'],
// Braces and semicolons
[/[{}]/, 'delimiter.bracket'],
[/;/, 'delimiter'],
// Numbers
[/\b\d+\b/, 'number'],
],
},
});
}
export function registerCaddyLanguage(monaco: monacoType): void {
monaco?.languages.register({ id: 'caddy' });
monaco?.languages.setMonarchTokensProvider('caddy', {
defaultToken: '',
tokenPostfix: '.caddy',
keywords: [
'root',
'reverse_proxy',
'file_server',
'handle',
'route',
'redir',
'encode',
'tls',
'log',
'header',
'php_fastcgi',
'basicauth',
'respond',
'rewrite',
'handle_path',
],
operators: ['*', '=', '->'],
symbols: /[=*>]+/,
tokenizer: {
root: [
// Comments
[/#.*$/, 'comment'],
// Site label (e.g. example.com)
[/^[^\s{]+(?=\s*{)/, 'type.identifier'],
// Directives
[
/\b([a-z_][a-z0-9_]*)(?=\s|$)/i,
{
cases: {
'@keywords': 'keyword',
'@default': '',
},
},
],
// Braces
[/[{}]/, 'delimiter.bracket'],
// Operators
[
/@symbols/,
{
cases: {
'@operators': 'operator',
'@default': '',
},
},
],
// Paths, values, URIs
[/\/[^\s#"]+/, 'string.path'],
// Quoted strings
[/".*?"/, 'string'],
[/'.*?'/, 'string'],
// Variables (environment-style)
[/\$\{?[a-zA-Z_][\w]*\}?/, 'variable'],
// IPs and ports
[/\d+\.\d+\.\d+\.\d+(:\d+)?/, 'number'],
[/\b\d{2,5}\b/, 'number'],
],
},
});
}
export function registerBashLanguage(monaco: monacoType): void {
monaco?.languages.register({ id: 'bash' });
monaco?.languages.setMonarchTokensProvider('bash', {
defaultToken: '',
tokenPostfix: '.bash',
keywords: ['if', 'then', 'else', 'fi', 'for', 'while', 'in', 'do', 'done', 'case', 'esac', 'function', 'select', 'until', 'elif', 'time'],
builtins: [
'echo',
'read',
'cd',
'pwd',
'exit',
'kill',
'exec',
'eval',
'set',
'unset',
'export',
'source',
'trap',
'shift',
'alias',
'type',
'ulimit',
],
tokenizer: {
root: [
[/#.*$/, 'comment'],
[/"/, { token: 'string.quote', bracket: '@open', next: '@string_double' }],
[/'/, { token: 'string.quote', bracket: '@open', next: '@string_single' }],
[/\$[a-zA-Z_]\w*/, 'variable'],
[/\$\{[^}]+}/, 'variable'],
[/\b(if|then|else|fi|for|while|in|do|done|case|esac|function|select|until|elif|time)\b/, 'keyword'],
[/\b(echo|read|cd|pwd|exit|kill|exec|eval|set|unset|export|source|trap|shift|alias|type|ulimit)\b/, 'type.identifier'],
[/\b\d+\b/, 'number'],
[/==|=~|!=|<=|>=|<<|>>|[<>;&|]/, 'operator'],
],
string_double: [
[/[^\\"]+/, 'string'],
[/\\./, 'string.escape'],
[/"/, { token: 'string.quote', bracket: '@close', next: '@pop' }],
],
string_single: [
[/[^']+/, 'string'],
[/'/, { token: 'string.quote', bracket: '@close', next: '@pop' }],
],
},
});
}
export function registerDotEnvLanguage(monaco: monacoType): void {
monaco?.languages.register({ id: 'dotenv' });
monaco?.languages.setMonarchTokensProvider('dotenv', {
tokenizer: {
root: [
[/#.*$/, 'comment'],
[/^\w+/, 'variable'],
[/=/, 'delimiter'],
[/"[^"]*"/, 'string'],
[/'[^']*'/, 'string'],
],
},
});
}

20
resources/js/lib/site-helper.ts Normal file
View File

@ -0,0 +1,20 @@
import { Site } from '@/types/site';
const siteHelper = {
getStoredSite() {
const storedSite = localStorage.getItem('site');
if (storedSite) {
return JSON.parse(storedSite) as Site;
}
return null;
},
storeSite(site?: Site) {
if (!site) {
localStorage.removeItem('site');
return;
}
localStorage.setItem('site', JSON.stringify(site));
},
};
export default siteHelper;

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>

16
resources/js/types/command-execution.d.ts vendored Normal file
View File

@ -0,0 +1,16 @@
import { ServerLog } from '@/types/server-log';
export interface CommandExecution {
id: number;
command_id: number;
server_id: number;
user_id: number;
server_log_id: number;
log: ServerLog;
status: string;
status_color: 'gray' | 'success' | 'info' | 'warning' | 'danger';
created_at: string;
updated_at: string;
[key: string]: unknown;
}

12
resources/js/types/command.d.ts vendored Normal file
View File

@ -0,0 +1,12 @@
export interface Command {
id: number;
server_id: number;
site_id: number;
name: string;
command: string;
variables: string[];
created_at: string;
updated_at: string;
[key: string]: unknown;
}

23
resources/js/types/deployment.d.ts vendored Normal file
View File

@ -0,0 +1,23 @@
import { ServerLog } from '@/types/server-log';
export interface Deployment {
id: number;
site_id: number;
deployment_script_id: number;
log_id: number;
log: ServerLog;
commit_id: string;
commit_id_short: string;
commit_data: {
name?: string;
email?: string;
message?: string;
url?: string;
};
status: string;
status_color: 'gray' | 'success' | 'info' | 'warning' | 'danger';
created_at: string;
updated_at: string;
[key: string]: unknown;
}

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

@ -26,10 +26,11 @@ export interface NavItem {
title: string;
href: string;
onlyActivePath?: string;
icon?: LucideIcon | string | null;
icon?: LucideIcon | null;
isActive?: boolean;
isDisabled?: boolean;
children?: NavItem[];
hidden?: boolean;
}
export interface Configs {

11
resources/js/types/load-balancer-server.d.ts vendored Normal file
View File

@ -0,0 +1,11 @@
export interface LoadBalancerServer {
load_balancer_id: number;
ip: number;
port: number;
weight: boolean;
backup: string;
created_at: string;
updated_at: string;
[key: string]: unknown;
}

14
resources/js/types/redirect.d.ts vendored Normal file
View File

@ -0,0 +1,14 @@
export interface Redirect {
id: number;
server_id: number;
site_id: number;
from: string;
to: string;
mode: string;
status: string;
status_color: 'gray' | 'success' | 'info' | 'warning' | 'danger';
created_at: string;
updated_at: string;
[key: string]: unknown;
}

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

@ -1,6 +1,9 @@
export interface Server {
id: number;
project_id: number;
services: {
[key: string]: string;
};
user_id: number;
name: string;
ssh_user: string;

14
resources/js/types/site.d.ts vendored
View File

@ -4,23 +4,31 @@ export interface Site {
id: number;
server_id: number;
server?: Server;
source_control_id: string;
source_control_id: number;
type: string;
type_data: unknown;
type_data: {
method?: 'round-robin' | 'least-connections' | 'ip-hash';
[key: string]: unknown;
};
features: string[];
domain: string;
aliases?: string[];
web_directory: string;
webserver: string;
path: string;
php_version: string;
repository: string;
branch: string;
branch?: string;
status: string;
status_color: 'gray' | 'success' | 'info' | 'warning' | 'danger';
auto_deploy: boolean;
port: number;
user: string;
url: string;
force_ssl: boolean;
progress: number;
created_at: string;
updated_at: string;
[key: string]: unknown;
}

17
resources/js/types/ssl.d.ts vendored Normal file
View File

@ -0,0 +1,17 @@
import { ServerLog } from '@/types/server-log';
export interface SSL {
id: number;
server_id: number;
site_id: number;
is_active: boolean;
type: string;
log?: ServerLog;
status: string;
status_color: 'gray' | 'success' | 'info' | 'warning' | 'danger';
expires_at: string;
created_at: string;
updated_at: string;
[key: string]: unknown;
}

2
resources/svg/php.svg
View File

@ -1,5 +1,5 @@
<!--file-icons-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512" fill="#777BB3">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512" fill="none" stroke="currentColor" stroke-width="20">
<path
d="M170.322 349.808c-2.4-15.66-9-28.38-25.020-34.531-6.27-2.4-11.7-6.78-17.88-9.54-7.020-3.15-14.16-6.15-21.57-8.1-5.61-1.5-10.83 1.020-14.16 5.94-3.15 4.62-0.87 8.97 1.77 12.84 2.97 4.35 6.27 8.49 9.6 12.57 5.52 6.78 11.37 13.29 16.74 20.161 5.13 6.57 9.51 13.86 8.76 22.56-1.65 19.080-10.29 34.891-24.21 47.76-1.53 1.38-4.23 2.37-6.21 2.19-8.88-0.96-16.95-4.32-23.46-10.53-7.47-7.11-6.33-15.48 2.61-20.67 2.13-1.23 4.35-2.37 6.3-3.87 5.46-4.11 7.29-11.13 4.32-17.22-1.41-2.94-3-6.12-5.34-8.25-11.43-10.41-22.651-21.151-34.891-30.63-29.671-23.041-44.91-53.52-47.251-90.421-2.64-40.981 6.87-79.231 28.5-114.242 8.19-13.29 17.73-25.951 32.37-32.52 9.96-4.47 20.88-6.99 31.531-9.78 29.311-7.71 58.89-13.5 89.401-8.34 26.28 4.41 45.511 17.94 54.331 43.77 5.79 16.89 7.17 34.35 5.37 52.231-3.54 35.131-29.49 66.541-63.331 75.841-14.67 4.020-22.68 1.77-31.5-10.44-6.33-8.79-11.58-18.36-17.25-27.631-0.84-1.38-1.44-2.97-2.16-4.44-0.69-1.47-1.44-2.88-2.16-4.35 2.13 15.24 5.67 29.911 13.98 42.99 4.5 7.11 10.5 12.36 19.29 13.14 32.34 2.91 59.641-7.71 79.021-33.721 21.69-29.101 26.461-62.581 20.19-97.831-1.23-6.96-3.3-13.77-4.77-20.7-0.99-4.47 0.78-7.77 5.19-9.33 2.040-0.69 4.14-1.26 6.18-1.68 26.461-5.7 53.221-7.59 80.191-4.86 30.601 3.060 59.551 11.46 85.441 28.471 40.531 26.67 65.641 64.621 79.291 110.522 1.98 6.66 2.28 13.95 2.46 20.971 0.12 4.68-2.88 5.91-6.45 2.97-3.93-3.21-7.53-6.87-10.92-10.65-3.15-3.57-5.67-7.65-8.73-11.4-2.37-2.94-4.44-2.49-5.58 1.17-0.72 2.22-1.35 4.41-1.98 6.63-7.080 25.26-18.24 48.3-36.33 67.711-2.52 2.73-4.77 6.78-5.070 10.38-0.78 9.96-1.35 20.13-0.39 30.060 1.98 21.331 5.070 42.57 7.47 63.871 1.35 12.030-2.52 19.11-13.83 23.281-7.95 2.91-16.47 5.040-24.87 5.64-13.38 0.93-26.88 0.27-40.32 0.27-0.36-15 0.93-29.731-13.17-37.771 2.73-11.13 5.88-21.69 7.77-32.49 1.56-8.97 0.24-17.79-6.060-25.14-5.91-6.93-13.32-8.82-20.101-4.86-20.43 11.91-41.671 11.97-63.301 4.17-9.93-3.6-16.86-1.56-22.351 7.5-5.91 9.75-8.4 20.7-7.74 31.771 0.84 13.95 3.27 27.75 5.13 41.64 1.020 7.77 0.15 9.78-7.56 11.76-17.13 4.35-34.56 4.83-52.081 3.42-0.93-0.090-1.86-0.48-2.46-0.63-0.87-14.55 0.66-29.671-16.68-37.411 7.68-16.29 6.63-33.18 3.99-50.070l-0.060-0.15zM66.761 292.718c2.55-2.4 4.59-6.15 5.31-9.6 1.8-8.64-4.68-20.22-12.18-23.43-3.99-1.74-7.47-1.11-10.29 2.070-6.87 7.77-13.65 15.63-20.401 23.521-1.14 1.35-2.16 2.94-2.97 4.53-2.7 5.19-1.11 8.97 4.65 10.38 3.48 0.87 7.080 1.050 10.65 1.56 9.3-0.9 18.3-2.46 25.23-9v-0.030zM67.541 206.347c-0.030-6.18-5.19-11.34-11.28-11.37-6.27-0.030-11.67 5.58-11.46 11.76 0.27 6.21 5.43 11.19 11.61 11.070 6.24-0.090 11.22-5.19 11.16-11.43l-0.030-0.030z"></path>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB