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 - load balancer

Browse Source
This commit is contained in:
Saeed Vaziry
2025-06-04 21:30:47 +02:00
parent 0bd390f27c
commit ab68964d43
7 changed files with 153 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
resources/js/pages/application/components/load-balancer.tsx
View File

@ -6,8 +6,8 @@ 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 { FormEvent } from 'react';
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';
@ -15,6 +15,9 @@ 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<{
@ -26,26 +29,42 @@ export default function LoadBalancer() {
const form = useForm<{
method: 'round-robin' | 'least-connections' | 'ip-hash';
servers: {
server: string;
port: string;
load_balancer_id: number;
ip: string;
port: number;
weight: string;
backup: boolean;
}[];
}>({
method: 'round-robin',
servers: [],
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 }), {
onSuccess: () => {
form.reset();
},
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}`} />
@ -90,6 +109,99 @@ export default function LoadBalancer() {
</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>