direct-online/vito
2
0
Fork 0
mirror of https://github.com/vitodeploy/vito.git synced 2025-07-01 22:16:15 +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 fail-fast: true
matrix: matrix:
php: [ 8.4 ] php: [ 8.4 ]
node-version: [ "20.x" ] node-version: [ "22.x" ]
steps: steps:
- uses: actions/checkout@v4 - uses: actions/checkout@v4
@ -46,10 +46,13 @@ jobs:
- name: Set up the .env file - name: Set up the .env file
run: touch .env run: touch .env
- name: Generate Application Key
run: php artisan key:generate
- name: Setup Node.js - name: Setup Node.js
uses: actions/setup-node@v4 uses: actions/setup-node@v4
with: with:
node-version: "20.x" node-version: "22.x"
- name: Install NPM Dependencies - name: Install NPM Dependencies
run: npm install --force 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) { foreach ($input['servers'] as $server) {
$loadBalancerServer = new LoadBalancerServer([ $loadBalancerServer = new LoadBalancerServer([
'load_balancer_id' => $site->id, 'load_balancer_id' => $site->id,
'ip' => $server['server'], 'ip' => $server['ip'],
'port' => $server['port'], 'port' => $server['port'],
'weight' => $server['weight'], 'weight' => $server['weight'],
'backup' => (bool) $server['backup'], 'backup' => (bool) $server['backup'],
@ -43,7 +43,7 @@ public static function rules(Site $site): array
'required', 'required',
'array', 'array',
], ],
'servers.*.server' => [ 'servers.*.ip' => [
'required', 'required',
Rule::exists('servers', 'local_ip') Rule::exists('servers', 'local_ip')
->where('project_id', $site->project->id), ->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 HeaderContainer from '@/components/header-container';
import Heading from '@/components/heading'; import Heading from '@/components/heading';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { BookOpenIcon, LoaderCircleIcon } from 'lucide-react'; import { BookOpenIcon, LoaderCircleIcon, XIcon } from 'lucide-react';
import { FormEvent } from 'react'; import React, { FormEvent } from 'react';
import { LoadBalancerServer } from '@/types/load-balancer-server'; import { LoadBalancerServer } from '@/types/load-balancer-server';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Form, FormField, FormFields } from '@/components/ui/form'; 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 { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import InputError from '@/components/ui/input-error'; import InputError from '@/components/ui/input-error';
import FormSuccessful from '@/components/form-successful'; 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() { export default function LoadBalancer() {
const page = usePage<{ const page = usePage<{
@ -26,26 +29,42 @@ export default function LoadBalancer() {
const form = useForm<{ const form = useForm<{
method: 'round-robin' | 'least-connections' | 'ip-hash'; method: 'round-robin' | 'least-connections' | 'ip-hash';
servers: { servers: {
server: string; load_balancer_id: number;
port: string; ip: string;
port: number;
weight: string; weight: string;
backup: boolean; backup: boolean;
}[]; }[];
}>({ }>({
method: 'round-robin', 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) => { const submit = (e: FormEvent) => {
e.preventDefault(); e.preventDefault();
form.post(route('application.update-load-balancer', { server: page.props.server.id, site: page.props.site.id }), { form.post(route('application.update-load-balancer', { server: page.props.server.id, site: page.props.site.id }), {
onSuccess: () => {
form.reset();
},
preserveScroll: true, preserveScroll: true,
}); });
}; };
const getFieldError = (field: string): string | undefined => {
return form.errors[field as keyof typeof form.errors];
};
return ( return (
<ServerLayout> <ServerLayout>
<Head title={`${page.props.site.domain} - ${page.props.server.name}`} /> <Head title={`${page.props.site.domain} - ${page.props.server.name}`} />
@ -90,6 +109,99 @@ export default function LoadBalancer() {
</Select> </Select>
<InputError message={form.errors.method} /> <InputError message={form.errors.method} />
</FormField> </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> </FormFields>
</Form> </Form>
</CardContent> </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 <ServerSelect
value={form.data.server} value={form.data.server}
onValueChange={(value) => { onValueChange={(value) => {
form.setData('server', value.id.toString()); form.setData('server', value ? value.id.toString() : '');
setServer(value); setServer(value);
}} }}
/> />

32
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 { cn } from '@/lib/utils';
import axios from 'axios'; 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 [query, setQuery] = useState('');
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [selected, setSelected] = useState<string>(value); 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 })); const response = await axios.get(route('servers.json', { query: query }));
return response.data; return response.data;
}, },
enabled: false, enabled: prefetch,
}); });
const onOpenChange = (open: boolean) => { const onOpenChange = (open: boolean) => {
@ -47,12 +59,12 @@ export default function ServerSelect({ value, onValueChange }: { value: string;
} }
}, [query, open, refetch]); }, [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 ( return (
<Popover open={open} onOpenChange={onOpenChange}> <Popover open={open} onOpenChange={onOpenChange}>
<PopoverTrigger asChild> <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...'} {selectedServer ? selectedServer.name : 'Select server...'}
<ChevronsUpDownIcon className="opacity-50" /> <ChevronsUpDownIcon className="opacity-50" />
</Button> </Button>
@ -63,25 +75,21 @@ export default function ServerSelect({ value, onValueChange }: { value: string;
<CommandList> <CommandList>
<CommandEmpty>{isFetching ? 'Searching...' : query === '' ? 'Start typing to search servers' : 'No servers found.'}</CommandEmpty> <CommandEmpty>{isFetching ? 'Searching...' : query === '' ? 'Start typing to search servers' : 'No servers found.'}</CommandEmpty>
<CommandGroup> <CommandGroup>
{servers.map((server) => ( {servers.map((server: Server) => (
<CommandItem <CommandItem
key={`server-select-${server.id}`} key={`server-select-${server.id}`}
value={server.id.toString()} value={String(server[valueBy] as Server[keyof Server])}
onSelect={(currentValue) => { onSelect={(currentValue) => {
const newSelected = currentValue === selected ? '' : currentValue; const newSelected = currentValue === selected ? '' : currentValue;
setSelected(newSelected); setSelected(newSelected);
setOpen(false); setOpen(false);
if (newSelected) { const server = servers.find((s) => String(s[valueBy] as Server[keyof Server]) === newSelected);
const server = servers.find((s) => s.id.toString() === newSelected);
if (server) {
onValueChange(server); onValueChange(server);
}
}
}} }}
className="truncate" className="truncate"
> >
{server.name} ({server.ip}) {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> </CommandItem>
))} ))}
</CommandGroup> </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 && ( {server === undefined && (
<FormField> <FormField>
<Label htmlFor="server">Server</Label> <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} /> <InputError message={form.errors.server} />
</FormField> </FormField>
)} )}

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

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