mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-07-10 22:14:58 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix key and remove animation from target card

Browse source
This commit is contained in:
Milo Schwartz 2024-10-20 12:10:45 -04:00
parent 25b44ca3ba
commit 0d8c7e5d44
No known key found for this signature in database
2 changed files with 163 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/app/[orgId]/resources/[resourceId]/components/CustomDomainInput.tsx
View file

@ -1,45 +1,47 @@
"use client" "use client";
import * as React from "react" import * as React from "react";
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input";
interface CustomDomainInputProps { interface CustomDomainInputProps {
domainSuffix: string domainSuffix: string;
placeholder?: string placeholder?: string;
onChange?: (value: string) => void onChange?: (value: string) => void;
} }
export default function CustomDomainInput({ export default function CustomDomainInput(
domainSuffix, {
placeholder = "Enter subdomain", domainSuffix,
onChange placeholder = "Enter subdomain",
}: CustomDomainInputProps = { onChange,
domainSuffix: ".example.com" }: CustomDomainInputProps = {
}) { domainSuffix: ".example.com",
const [value, setValue] = React.useState("") },
) {
const [value, setValue] = React.useState("");
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const newValue = event.target.value const newValue = event.target.value;
setValue(newValue) setValue(newValue);
if (onChange) { if (onChange) {
onChange(newValue) onChange(newValue);
} }
} };
return ( return (
<div className="relative w-full max-w-sm"> <div className="relative w-full max-w-sm">
<div className="flex"> <div className="flex">
<Input <Input
type="text" type="text"
placeholder={placeholder} placeholder={placeholder}
value={value} value={value}
onChange={handleChange} onChange={handleChange}
className="rounded-r-none flex-grow" className="rounded-r-none flex-grow"
/> />
<div className="inline-flex items-center px-3 rounded-r-md border border-l-0 border-input bg-muted text-muted-foreground"> <div className="inline-flex items-center px-3 rounded-r-md border border-l-0 border-input bg-muted text-muted-foreground">
<span className="text-sm">{domainSuffix}</span> <span className="text-sm">{domainSuffix}</span>
</div>
</div>
</div> </div>
</div> );
</div> }
)
}

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

@ -1,32 +1,45 @@
"use client" "use client";
import { useEffect, useState } from "react" import { useEffect, useState } from "react";
import { PlusCircle, Trash2, Server, Globe, Cpu, Power } from "lucide-react" import { PlusCircle, Trash2, Server, Globe, Cpu } from "lucide-react";
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label" import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import {
import { Switch } from "@/components/ui/switch" Select,
import { Badge } from "@/components/ui/badge" SelectContent,
import api from "@app/api" SelectItem,
import { AxiosResponse } from "axios" SelectTrigger,
import { ListTargetsResponse } from "@server/routers/target/listTargets" SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import api from "@app/api";
import { AxiosResponse } from "axios";
import { ListTargetsResponse } from "@server/routers/target/listTargets";
const isValidIPAddress = (ip: string) => { 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]?)$/; 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); return ipv4Regex.test(ip);
} };
export default function ReverseProxyTargets({ params }: { params: { resourceId: string } }) { export default function ReverseProxyTargets({
const [targets, setTargets] = useState<ListTargetsResponse["targets"]>([]) params,
const [nextId, setNextId] = useState(1) }: {
const [ipError, setIpError] = useState("") params: { resourceId: string };
}) {
const [targets, setTargets] = useState<ListTargetsResponse["targets"]>([]);
const [nextId, setNextId] = useState(1);
const [ipError, setIpError] = useState("");
useEffect(() => { useEffect(() => {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
const fetchSites = async () => { const fetchSites = async () => {
const res = await api.get<AxiosResponse<ListTargetsResponse>>(`/resource/${params.resourceId}/targets`); const res = await api.get<AxiosResponse<ListTargetsResponse>>(
`/resource/${params.resourceId}/targets`,
);
setTargets(res.data.data.targets); setTargets(res.data.data.targets);
}; };
fetchSites(); fetchSites();
@ -39,7 +52,7 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
method: "http", method: "http",
port: 80, port: 80,
protocol: "TCP", protocol: "TCP",
}) });
const addTarget = () => { const addTarget = () => {
if (!isValidIPAddress(newTarget.ip)) { if (!isValidIPAddress(newTarget.ip)) {
@ -50,64 +63,62 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
api.put(`/resource/${params.resourceId}/target`, { api.put(`/resource/${params.resourceId}/target`, {
...newTarget, ...newTarget,
resourceId: undefined resourceId: undefined,
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
})
}).then((res) => { .then((res) => {
// console.log(res) // console.log(res)
setTargets([...targets, { ...newTarget, targetId: nextId, enabled: true }]) setTargets([
setNextId(nextId + 1) ...targets,
{ ...newTarget, targetId: nextId, enabled: true },
]);
setNextId(nextId + 1);
setNewTarget({ setNewTarget({
resourceId: params.resourceId, resourceId: params.resourceId,
ip: "", ip: "",
method: "GET", method: "GET",
port: 80, port: 80,
protocol: "http", protocol: "http",
}) });
}); });
};
}
const removeTarget = (targetId: number) => { const removeTarget = (targetId: number) => {
api.delete(`/target/${targetId}`) api.delete(`/target/${targetId}`)
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}).then((res) => { })
setTargets(targets.filter((target) => target.targetId !== targetId)); .then((res) => {
setTargets(
targets.filter((target) => target.targetId !== targetId),
);
}); });
} };
const toggleTarget = (targetId: number) => { const toggleTarget = (targetId: number) => {
setTargets( setTargets(
targets.map((target) => targets.map((target) =>
target.targetId === targetId ? { ...target, enabled: !target.enabled } : target target.targetId === targetId
) ? { ...target, enabled: !target.enabled }
) : target,
api.post(`/target/${targetId}`, { enabled: !targets.find((target) => target.targetId === targetId)?.enabled }) ),
.catch((err) => { );
console.error(err) api.post(`/target/${targetId}`, {
}).then((res) => { enabled: !targets.find((target) => target.targetId === targetId)
console.log(res) ?.enabled,
}); }).catch((err) => {
console.error(err);
// Add a visual feedback });
const targetElement = document.getElementById(`target-${targetId}`) };
if (targetElement) {
targetElement.classList.add('scale-105', 'transition-transform')
setTimeout(() => {
targetElement.classList.remove('scale-105', 'transition-transform')
}, 200)
}
}
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<form <form
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault() e.preventDefault();
addTarget() addTarget();
}} }}
className="space-y-4" className="space-y-4"
> >
@ -118,18 +129,25 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
id="ip" id="ip"
value={newTarget.ip} value={newTarget.ip}
onChange={(e) => { onChange={(e) => {
setNewTarget({ ...newTarget, ip: e.target.value }) setNewTarget({
setIpError("") ...newTarget,
ip: e.target.value,
});
setIpError("");
}} }}
required required
/> />
{ipError && <p className="text-red-500 text-sm">{ipError}</p>} {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" />
@ -146,7 +164,12 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
id="port" id="port"
type="number" type="number"
value={newTarget.port} value={newTarget.port}
onChange={(e) => setNewTarget({ ...newTarget, port: parseInt(e.target.value) })} onChange={(e) =>
setNewTarget({
...newTarget,
port: parseInt(e.target.value),
})
}
required required
/> />
</div> </div>
@ -154,7 +177,9 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
<Label htmlFor="protocol">Protocol</Label> <Label htmlFor="protocol">Protocol</Label>
<Select <Select
value={newTarget.protocol} value={newTarget.protocol}
onValueChange={(value) => setNewTarget({ ...newTarget, protocol: value })} onValueChange={(value) =>
setNewTarget({ ...newTarget, protocol: value })
}
> >
<SelectTrigger id="protocol"> <SelectTrigger id="protocol">
<SelectValue placeholder="Select protocol" /> <SelectValue placeholder="Select protocol" />
@ -172,8 +197,12 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
</form> </form>
<div className="space-y-4"> <div className="space-y-4">
{targets.map((target) => ( {targets.map((target, i) => (
<Card key={target.targetId} id={`target-${target.targetId}`} className="w-full p-4"> <Card
key={i}
id={`target-${target.targetId}`}
className="w-full p-4"
>
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-0 pt-0"> <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-0 pt-0">
<CardTitle className="text-lg font-medium flex items-center"> <CardTitle className="text-lg font-medium flex items-center">
<Server className="mr-2 h-5 w-5" /> <Server className="mr-2 h-5 w-5" />
@ -182,13 +211,17 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
<div className="flex flex-col items-end space-y-2"> <div className="flex flex-col items-end space-y-2">
<Switch <Switch
checked={target.enabled} checked={target.enabled}
onCheckedChange={() => toggleTarget(target.targetId)} onCheckedChange={() =>
toggleTarget(target.targetId)
}
/> />
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="text-destructive hover:text-destructive hover:bg-destructive/10" className="text-destructive hover:text-destructive hover:bg-destructive/10"
onClick={() => removeTarget(target.targetId)} onClick={() =>
removeTarget(target.targetId)
}
> >
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
</Button> </Button>
@ -198,15 +231,35 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
<div className="grid gap-2 md:grid-cols-2 lg:grid-cols-3"> <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>
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<Cpu className="mr-2 h-4 w-4 text-muted-foreground" /> <Cpu className="mr-2 h-4 w-4 text-muted-foreground" />
<span className="text-sm">{target.resourceId}</span> <span className="text-sm">
{target.resourceId}
</span>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Badge variant={target.enabled ? "default" : "secondary"}>{target.method}</Badge> <Badge
<Badge variant={target.enabled ? "default" : "secondary"}>{target.protocol?.toUpperCase()}</Badge> variant={
target.enabled
? "default"
: "secondary"
}
>
{target.method}
</Badge>
<Badge
variant={
target.enabled
? "default"
: "secondary"
}
>
{target.protocol?.toUpperCase()}
</Badge>
</div> </div>
</div> </div>
</CardContent> </CardContent>
@ -214,5 +267,5 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
))} ))}
</div> </div>
</div> </div>
) );
} }