mirror of
https://github.com/vitodeploy/vito.git
synced 2025-07-01 22:16:15 +00:00
220 lines
8.9 KiB
TypeScript
220 lines
8.9 KiB
TypeScript
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, XIcon } 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 InputError from '@/components/ui/input-error';
|
|
import FormSuccessful from '@/components/form-successful';
|
|
import ServerSelect from '@/pages/servers/components/server-select';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Switch } from '@/components/ui/switch';
|
|
|
|
export default function LoadBalancer() {
|
|
const page = usePage<{
|
|
server: Server;
|
|
site: Site;
|
|
loadBalancerServers: LoadBalancerServer[];
|
|
}>();
|
|
|
|
const form = useForm<{
|
|
method: 'round-robin' | 'least-connections' | 'ip-hash';
|
|
servers: {
|
|
load_balancer_id: number;
|
|
ip: string;
|
|
port: number;
|
|
weight: string;
|
|
backup: boolean;
|
|
}[];
|
|
}>({
|
|
method: 'round-robin',
|
|
servers: page.props.loadBalancerServers,
|
|
});
|
|
|
|
const addServer = () => {
|
|
const newServer: LoadBalancerServer = {
|
|
load_balancer_id: 0,
|
|
ip: '',
|
|
port: 80,
|
|
weight: '100',
|
|
backup: false,
|
|
created_at: '',
|
|
updated_at: '',
|
|
};
|
|
|
|
form.setData('servers', [...form.data.servers, newServer]);
|
|
};
|
|
|
|
const submit = (e: FormEvent) => {
|
|
e.preventDefault();
|
|
form.post(route('application.update-load-balancer', { server: page.props.server.id, site: page.props.site.id }), {
|
|
preserveScroll: true,
|
|
});
|
|
};
|
|
|
|
const getFieldError = (field: string): string | undefined => {
|
|
return form.errors[field as keyof typeof form.errors];
|
|
};
|
|
|
|
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>
|
|
|
|
{form.data.servers.map((item, index) => (
|
|
<div key={`server-${index}`} className="relative rounded-md border border-dashed p-4">
|
|
<XIcon
|
|
className="text-muted-foreground hover:text-foreground absolute top-2 right-2 cursor-pointer"
|
|
onClick={() => {
|
|
const updatedServers = [...form.data.servers];
|
|
updatedServers.splice(index, 1);
|
|
form.setData('servers', updatedServers);
|
|
}}
|
|
/>
|
|
<div className="grid grid-cols-1 items-start gap-6 md:grid-cols-2 lg:grid-cols-4">
|
|
<FormField>
|
|
<Label htmlFor={`server-${index}`}>Server</Label>
|
|
<ServerSelect
|
|
id={`server-${index}`}
|
|
value={item.ip}
|
|
valueBy="local_ip"
|
|
onValueChange={(server) => {
|
|
const updatedServers = [...form.data.servers];
|
|
updatedServers[index] = {
|
|
...updatedServers[index],
|
|
ip: server ? server.local_ip || '' : '',
|
|
};
|
|
form.setData('servers', updatedServers);
|
|
}}
|
|
/>
|
|
<InputError message={getFieldError(`servers.${index}.ip`)} />
|
|
</FormField>
|
|
|
|
<FormField>
|
|
<Label htmlFor={`port-${index}`}>Port</Label>
|
|
<Input
|
|
id={`port-${index}`}
|
|
type="text"
|
|
value={item.port || ''}
|
|
onChange={(e) => {
|
|
const updatedServers = [...form.data.servers];
|
|
updatedServers[index] = {
|
|
...updatedServers[index],
|
|
port: parseInt(e.target.value, 10),
|
|
};
|
|
form.setData('servers', updatedServers);
|
|
}}
|
|
/>
|
|
<InputError message={getFieldError(`servers.${index}.port`)} />
|
|
</FormField>
|
|
|
|
<FormField>
|
|
<Label htmlFor={`weight-${index}`}>Weight</Label>
|
|
<Input
|
|
id={`weight-${index}`}
|
|
type="text"
|
|
value={item.weight || '100'}
|
|
onChange={(e) => {
|
|
const updatedServers = [...form.data.servers];
|
|
updatedServers[index] = {
|
|
...updatedServers[index],
|
|
weight: e.target.value,
|
|
};
|
|
form.setData('servers', updatedServers);
|
|
}}
|
|
/>
|
|
<InputError message={getFieldError(`servers.${index}.weight`)} />
|
|
</FormField>
|
|
|
|
<FormField>
|
|
<Label htmlFor={`backup-${index}`}>Backup</Label>
|
|
<Switch
|
|
id={`backup-${index}`}
|
|
checked={item.backup || false}
|
|
onCheckedChange={(checked) => {
|
|
const updatedServers = [...form.data.servers];
|
|
updatedServers[index] = {
|
|
...updatedServers[index],
|
|
backup: checked,
|
|
};
|
|
form.setData('servers', updatedServers);
|
|
}}
|
|
className="mt-2"
|
|
/>
|
|
<InputError message={getFieldError(`servers.${index}.backup`)} />
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<FormField
|
|
onClick={addServer}
|
|
className="text-muted-foreground hover:text-foreground flex h-[92px] items-center justify-center rounded-md border border-dashed hover:cursor-pointer"
|
|
>
|
|
Add server to the load balancer
|
|
</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>
|
|
);
|
|
}
|