mirror of
https://github.com/vitodeploy/vito.git
synced 2025-07-03 15:02:34 +00:00
#591 - sites
This commit is contained in:
Saeed Vaziry
70
resources/js/pages/site-settings/components/branch.tsx
Normal file
70
resources/js/pages/site-settings/components/branch.tsx
Normal 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
73
resources/js/pages/site-settings/components/delete-site.tsx
Normal 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
75
resources/js/pages/site-settings/components/php-version.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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
104
resources/js/pages/site-settings/components/vhost.tsx
Normal 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
167
resources/js/pages/site-settings/index.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user