mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-21 17:58:27 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Targets working?

Browse source
This commit is contained in:
Owen Schwartz 2024-10-19 20:47:05 -04:00
parent 0fa3382cda
commit bf106c221e
No known key found for this signature in database
GPG key ID: 8271FDFFD9E0CCBD
3 changed files with 208 additions and 188 deletions
Download patch file Download diff file Expand all files Collapse all files

2
server/routers/auth/verifyTargetAccess.ts
View file

@ -33,7 +33,7 @@ export async function verifyTargetAccess(req: Request, res: Response, next: Next
const resourceId = target[0].resourceId; const resourceId = target[0].resourceId;
if (resourceId) { if (!resourceId) {
return next( return next(
createHttpError( createHttpError(
HttpCode.INTERNAL_SERVER_ERROR, HttpCode.INTERNAL_SERVER_ERROR,

150
src/app/[orgId]/resources/[resourceId]/components/CreateResource.tsx
View file

@ -25,18 +25,18 @@ import { useRouter } from "next/navigation";
import { Checkbox } from "@app/components/ui/checkbox" import { Checkbox } from "@app/components/ui/checkbox"
import { import {
Command, Command,
CommandEmpty, CommandEmpty,
CommandGroup, CommandGroup,
CommandInput, CommandInput,
CommandItem, CommandItem,
CommandList, CommandList,
} from "@/components/ui/command" } from "@/components/ui/command"
import { import {
Popover, Popover,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "@/components/ui/popover" } from "@/components/ui/popover"
import { ListSitesResponse } from "@server/routers/site" import { ListSitesResponse } from "@server/routers/site"
import { AxiosResponse } from "axios" import { AxiosResponse } from "axios"
@ -141,10 +141,10 @@ export function CreateResourceForm() {
<FormControl> <FormControl>
{/* <Input placeholder="Your name" {...field} /> */} {/* <Input placeholder="Your name" {...field} /> */}
<CustomDomainInput {...field} <CustomDomainInput {...field}
domainSuffix={domainSuffix} domainSuffix={domainSuffix}
placeholder="Enter subdomain" placeholder="Enter subdomain"
/> />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
This is the fully qualified domain name that will be used to access the resource. This is the fully qualified domain name that will be used to access the resource.
@ -169,69 +169,69 @@ export function CreateResourceForm() {
</FormItem> </FormItem>
)} )}
/> */} /> */}
<FormField <FormField
control={form.control} control={form.control}
name="siteId" name="siteId"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-col"> <FormItem className="flex flex-col">
<FormLabel>Site</FormLabel> <FormLabel>Site</FormLabel>
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<FormControl> <FormControl>
<Button <Button
variant="outline" variant="outline"
role="combobox" role="combobox"
className={cn( className={cn(
"w-[200px] justify-between", "w-[200px] justify-between",
!field.value && "text-muted-foreground" !field.value && "text-muted-foreground"
)} )}
> >
{field.value {field.value
? sites.find( ? sites.find(
(site) => site.siteId === field.value (site) => site.siteId === field.value
)?.name )?.name
: "Select site"} : "Select site"}
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-[200px] p-0"> <PopoverContent className="w-[200px] p-0">
<Command> <Command>
<CommandInput placeholder="Search site..." /> <CommandInput placeholder="Search site..." />
<CommandList> <CommandList>
<CommandEmpty>No site found.</CommandEmpty> <CommandEmpty>No site found.</CommandEmpty>
<CommandGroup> <CommandGroup>
{sites.map((site) => ( {sites.map((site) => (
<CommandItem <CommandItem
value={site.name} value={site.name}
key={site.siteId} key={site.siteId}
onSelect={() => { onSelect={() => {
form.setValue("siteId", site.siteId) form.setValue("siteId", site.siteId)
}} }}
> >
<CheckIcon <CheckIcon
className={cn( className={cn(
"mr-2 h-4 w-4", "mr-2 h-4 w-4",
site.siteId === field.value site.siteId === field.value
? "opacity-100" ? "opacity-100"
: "opacity-0" : "opacity-0"
)} )}
/> />
{site.name} {site.name}
</CommandItem> </CommandItem>
))} ))}
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<FormDescription> <FormDescription>
This is the site that will be used in the dashboard. This is the site that will be used in the dashboard.
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<Button type="submit">Create Resource</Button> <Button type="submit">Create Resource</Button>
</form> </form>

240
src/app/[orgId]/resources/[resourceId]/targets/page.tsx
View file

@ -13,9 +13,15 @@ import api from "@app/api"
import { AxiosResponse } from "axios" import { AxiosResponse } from "axios"
import { ListTargetsResponse } from "@server/routers/target/listTargets" import { ListTargetsResponse } from "@server/routers/target/listTargets"
const isValidIPAddress = (ip: string) => {
const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
return ipv4Regex.test(ip);
}
export default function ReverseProxyTargets({ params }: { params: { resourceId: string } }) { export default function ReverseProxyTargets({ params }: { params: { resourceId: string } }) {
const [targets, setTargets] = useState<ListTargetsResponse["targets"]>([]) const [targets, setTargets] = useState<ListTargetsResponse["targets"]>([])
const [nextId, setNextId] = useState(1) const [nextId, setNextId] = useState(1)
const [ipError, setIpError] = useState("")
useEffect(() => { useEffect(() => {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
@ -30,35 +36,47 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
const [newTarget, setNewTarget] = useState({ const [newTarget, setNewTarget] = useState({
resourceId: params.resourceId, resourceId: params.resourceId,
ip: "", ip: "",
method: "GET", method: "http",
port: 80, port: 80,
protocol: "http", protocol: "TCP",
}) })
const addTarget = async () => { const addTarget = () => {
const res = await api.put(`/resource/${params.resourceId}/target`, { if (!isValidIPAddress(newTarget.ip)) {
setIpError("Invalid IP address format");
return;
}
setIpError("");
api.put(`/resource/${params.resourceId}/target`, {
...newTarget, ...newTarget,
resourceId: undefined resourceId: undefined
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err)
}); }).then((res) => {
// console.log(res)
setTargets([...targets, { ...newTarget, targetId: nextId, enabled: true }])
setNextId(nextId + 1)
setNewTarget({
resourceId: params.resourceId,
ip: "",
method: "GET",
port: 80,
protocol: "http",
})
});
setTargets([...targets, { ...newTarget, targetId: nextId, enabled: true }])
setNextId(nextId + 1)
setNewTarget({
resourceId: params.resourceId,
ip: "",
method: "GET",
port: 80,
protocol: "http",
})
} }
const removeTarget = async (targetId: number) => { const removeTarget = (targetId: number) => {
setTargets(targets.filter((target) => target.targetId !== targetId)) api.delete(`/target/${targetId}`)
const res = await api.delete(`/target/${targetId}`) .catch((err) => {
console.error(err)
}).then((res) => {
setTargets(targets.filter((target) => target.targetId !== targetId));
});
} }
const toggleTarget = (targetId: number) => { const toggleTarget = (targetId: number) => {
@ -67,7 +85,12 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
target.targetId === targetId ? { ...target, enabled: !target.enabled } : target target.targetId === targetId ? { ...target, enabled: !target.enabled } : target
) )
) )
const res = api.post(`/target/${targetId}`, { enabled: !targets.find((target) => target.targetId === targetId)?.enabled }) api.post(`/target/${targetId}`, { enabled: !targets.find((target) => target.targetId === targetId)?.enabled })
.catch((err) => {
console.error(err)
}).then((res) => {
console.log(res)
});
// Add a visual feedback // Add a visual feedback
const targetElement = document.getElementById(`target-${targetId}`) const targetElement = document.getElementById(`target-${targetId}`)
@ -81,93 +104,98 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{/* <Card> <form
<CardHeader> */} onSubmit={(e) => {
{/* <CardTitle>Add New Target</CardTitle> e.preventDefault()
</CardHeader> addTarget()
<CardContent> */} }}
<form className="space-y-4"
onSubmit={(e) => { >
e.preventDefault() <div className="grid grid-cols-2 gap-4">
addTarget() <div className="space-y-2">
}} <Label htmlFor="ip">IP Address</Label>
className="space-y-4" <Input
> id="ip"
<div className="grid grid-cols-2 gap-4"> value={newTarget.ip}
<div className="space-y-2"> onChange={(e) => {
<Label htmlFor="ip">IP Address</Label> setNewTarget({ ...newTarget, ip: e.target.value })
<Input setIpError("")
id="ip" }}
value={newTarget.ip} required
onChange={(e) => setNewTarget({ ...newTarget, ip: e.target.value })} />
required {ipError && <p className="text-red-500 text-sm">{ipError}</p>}
/> </div>
</div> <div className="space-y-2">
<div className="space-y-2"> <Label htmlFor="method">Method</Label>
<Label htmlFor="method">Method</Label> <Select
<Select value={newTarget.method}
value={newTarget.method} onValueChange={(value) => setNewTarget({ ...newTarget, method: value })}
onValueChange={(value) => setNewTarget({ ...newTarget, method: value })} >
> <SelectTrigger id="method">
<SelectTrigger id="method"> <SelectValue placeholder="Select method" />
<SelectValue placeholder="Select method" /> </SelectTrigger>
</SelectTrigger> <SelectContent>
<SelectContent> <SelectItem value="http">HTTP</SelectItem>
<SelectItem value="GET">GET</SelectItem> <SelectItem value="https">HTTPS</SelectItem>
<SelectItem value="POST">POST</SelectItem> </SelectContent>
<SelectItem value="PUT">PUT</SelectItem> </Select>
<SelectItem value="DELETE">DELETE</SelectItem> </div>
</SelectContent> <div className="space-y-2">
</Select> <Label htmlFor="port">Port</Label>
</div> <Input
<div className="space-y-2"> id="port"
<Label htmlFor="port">Port</Label> type="number"
<Input value={newTarget.port}
id="port" onChange={(e) => setNewTarget({ ...newTarget, port: parseInt(e.target.value) })}
type="number" required
value={newTarget.port} />
onChange={(e) => setNewTarget({ ...newTarget, port: parseInt(e.target.value) })} </div>
required <div className="space-y-2">
/> <Label htmlFor="protocol">Protocol</Label>
</div> <Select
<div className="space-y-2"> value={newTarget.protocol}
<Label htmlFor="protocol">Protocol</Label> onValueChange={(value) => setNewTarget({ ...newTarget, protocol: value })}
<Select >
value={newTarget.protocol} <SelectTrigger id="protocol">
onValueChange={(value) => setNewTarget({ ...newTarget, protocol: value })} <SelectValue placeholder="Select protocol" />
> </SelectTrigger>
<SelectTrigger id="protocol"> <SelectContent>
<SelectValue placeholder="Select protocol" /> <SelectItem value="UDP">UDP</SelectItem>
</SelectTrigger> <SelectItem value="TCP">TCP</SelectItem>
<SelectContent> </SelectContent>
<SelectItem value="http">HTTP</SelectItem> </Select>
<SelectItem value="https">HTTPS</SelectItem> </div>
</SelectContent> </div>
</Select> <Button type="submit">
</div> <PlusCircle className="mr-2 h-4 w-4" /> Add Target
</div> </Button>
<Button type="submit"> </form>
<PlusCircle className="mr-2 h-4 w-4" /> Add Target
</Button>
</form>
{/* </CardContent>
</Card> */}
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> <div className="space-y-4">
{targets.map((target) => ( {targets.map((target) => (
<Card key={target.targetId} id={`target-${target.targetId}`} > <Card key={target.targetId} id={`target-${target.targetId}`} className="w-full p-4">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-0 pt-0">
<CardTitle className="text-sm font-medium flex items-center"> <CardTitle className="text-lg font-medium flex items-center">
<Server className="mr-2 h-4 w-4" /> <Server className="mr-2 h-5 w-5" />
Target {target.targetId} Target {target.targetId}
</CardTitle> </CardTitle>
<Switch <div className="flex flex-col items-end space-y-2">
checked={target.enabled} <Switch
onCheckedChange={() => toggleTarget(target.targetId)} checked={target.enabled}
/> onCheckedChange={() => toggleTarget(target.targetId)}
/>
<Button
variant="ghost"
size="sm"
className="text-destructive hover:text-destructive hover:bg-destructive/10"
onClick={() => removeTarget(target.targetId)}
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="px-0 py-2">
<div className="grid gap-2"> <div className="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
<div className="flex items-center"> <div className="flex items-center">
<Globe className="mr-2 h-4 w-4 text-muted-foreground" /> <Globe className="mr-2 h-4 w-4 text-muted-foreground" />
<span className="text-sm">{target.ip}:{target.port}</span> <span className="text-sm">{target.ip}:{target.port}</span>
@ -181,14 +209,6 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
<Badge variant={target.enabled ? "default" : "secondary"}>{target.protocol?.toUpperCase()}</Badge> <Badge variant={target.enabled ? "default" : "secondary"}>{target.protocol?.toUpperCase()}</Badge>
</div> </div>
</div> </div>
<Button
variant="destructive"
size="sm"
className="mt-4 w-full"
onClick={() => removeTarget(target.targetId)}
>
<Trash2 className="mr-2 h-4 w-4" /> Remove
</Button>
</CardContent> </CardContent>
</Card> </Card>
))} ))}