direct-online/vito
2
0
Fork 0
mirror of https://github.com/vitodeploy/vito.git synced 2025-07-01 05:56:16 +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

7
.github/workflows/tests.yml vendored
View File

@ -17,7 +17,7 @@ jobs:
fail-fast: true
matrix:
php: [ 8.4 ]
node-version: [ "20.x" ]
node-version: [ "22.x" ]
steps:
- uses: actions/checkout@v4
@ -46,10 +46,13 @@ jobs:
- name: Set up the .env file
run: touch .env
- name: Generate Application Key
run: php artisan key:generate
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: "20.x"
node-version: "22.x"
- name: Install NPM Dependencies
run: npm install --force

4
app/Actions/Site/UpdateLoadBalancer.php
View File

@ -22,7 +22,7 @@ public function update(Site $site, array $input): void
foreach ($input['servers'] as $server) {
$loadBalancerServer = new LoadBalancerServer([
'load_balancer_id' => $site->id,
'ip' => $server['server'],
'ip' => $server['ip'],
'port' => $server['port'],
'weight' => $server['weight'],
'backup' => (bool) $server['backup'],
@ -43,7 +43,7 @@ public static function rules(Site $site): array
'required',
'array',
],
'servers.*.server' => [
'servers.*.ip' => [
'required',
Rule::exists('servers', 'local_ip')
->where('project_id', $site->project->id),

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>

2
resources/js/pages/scripts/components/execute.tsx
View File

@ -55,7 +55,7 @@ export default function Execute({ script, children }: { script: Script; children
<ServerSelect
value={form.data.server}
onValueChange={(value) => {
form.setData('server', value.id.toString());
form.setData('server', value ? value.id.toString() : '');
setServer(value);
}}
/>

34
resources/js/pages/servers/components/server-select.tsx
View File

@ -8,7 +8,19 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
import { cn } from '@/lib/utils';
import axios from 'axios';
export default function ServerSelect({ value, onValueChange }: { value: string; onValueChange: (selectedServer: Server) => void }) {
export default function ServerSelect({
value,
valueBy = 'id',
onValueChange,
id,
prefetch,
}: {
value: string;
valueBy?: keyof Server;
onValueChange: (selectedServer?: Server) => void;
id?: string;
prefetch?: boolean;
}) {
const [query, setQuery] = useState('');
const [open, setOpen] = useState(false);
const [selected, setSelected] = useState<string>(value);
@ -27,7 +39,7 @@ export default function ServerSelect({ value, onValueChange }: { value: string;
const response = await axios.get(route('servers.json', { query: query }));
return response.data;
},
enabled: false,
enabled: prefetch,
});
const onOpenChange = (open: boolean) => {
@ -47,12 +59,12 @@ export default function ServerSelect({ value, onValueChange }: { value: string;
}
}, [query, open, refetch]);
const selectedServer = servers.find((server) => server.id === parseInt(selected));
const selectedServer = servers.find((server) => String(server[valueBy] as Server[keyof Server]) === selected);
return (
<Popover open={open} onOpenChange={onOpenChange}>
<PopoverTrigger asChild>
<Button variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between">
<Button id={id} variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between">
{selectedServer ? selectedServer.name : 'Select server...'}
<ChevronsUpDownIcon className="opacity-50" />
</Button>
@ -63,25 +75,21 @@ export default function ServerSelect({ value, onValueChange }: { value: string;
<CommandList>
<CommandEmpty>{isFetching ? 'Searching...' : query === '' ? 'Start typing to search servers' : 'No servers found.'}</CommandEmpty>
<CommandGroup>
{servers.map((server) => (
{servers.map((server: Server) => (
<CommandItem
key={`server-select-${server.id}`}
value={server.id.toString()}
value={String(server[valueBy] as Server[keyof Server])}
onSelect={(currentValue) => {
const newSelected = currentValue === selected ? '' : currentValue;
setSelected(newSelected);
setOpen(false);
if (newSelected) {
const server = servers.find((s) => s.id.toString() === newSelected);
if (server) {
onValueChange(server);
}
}
const server = servers.find((s) => String(s[valueBy] as Server[keyof Server]) === newSelected);
onValueChange(server);
}}
className="truncate"
>
{server.name} ({server.ip})
<CheckIcon className={cn('ml-auto', selected && parseInt(selected) === server.id ? 'opacity-100' : 'opacity-0')} />
<CheckIcon className={cn('ml-auto', selected === String(server[valueBy] as Server[keyof Server]) ? 'opacity-100' : 'opacity-0')} />
</CommandItem>
))}
</CommandGroup>

2
resources/js/pages/sites/components/create-site.tsx
View File

@ -104,7 +104,7 @@ export default function CreateSite({ server, children }: { server?: Server; chil
{server === undefined && (
<FormField>
<Label htmlFor="server">Server</Label>
<ServerSelect value={form.data.server} onValueChange={(value) => form.setData('server', value.id.toString())} />
<ServerSelect value={form.data.server} onValueChange={(value) => form.setData('server', value ? value.id.toString() : '')} />
<InputError message={form.errors.server} />
</FormField>
)}

6
resources/js/types/load-balancer-server.d.ts vendored
View File

@ -1,9 +1,9 @@
export interface LoadBalancerServer {
load_balancer_id: number;
ip: number;
ip: string;
port: number;
weight: boolean;
backup: string;
weight: string;
backup: boolean;
created_at: string;
updated_at: string;