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 (

Configs Modify load balancer configs

Method {form.data.servers.map((item, index) => (

{ const updatedServers = [...form.data.servers]; updatedServers.splice(index, 1); form.setData('servers', updatedServers); }} />

Server { const updatedServers = [...form.data.servers]; updatedServers[index] = { ...updatedServers[index], ip: server ? server.local_ip || '' : '', }; form.setData('servers', updatedServers); }} /> Port { const updatedServers = [...form.data.servers]; updatedServers[index] = { ...updatedServers[index], port: parseInt(e.target.value, 10), }; form.setData('servers', updatedServers); }} /> Weight { const updatedServers = [...form.data.servers]; updatedServers[index] = { ...updatedServers[index], weight: e.target.value, }; form.setData('servers', updatedServers); }} /> Backup { const updatedServers = [...form.data.servers]; updatedServers[index] = { ...updatedServers[index], backup: checked, }; form.setData('servers', updatedServers); }} className="mt-2" />

))} Add server to the load balancer

); }