mirror of
https://github.com/fosrl/pangolin.git
synced 2025-07-10 22:14:58 +02:00
fix key and remove animation from target card
This commit is contained in:
Milo Schwartz
parent
25b44ca3ba
commit
0d8c7e5d44
2 changed files with 163 additions and 108 deletions
|
|
@ -1,45 +1,47 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import * as React from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
interface CustomDomainInputProps {
|
||||
domainSuffix: string
|
||||
placeholder?: string
|
||||
onChange?: (value: string) => void
|
||||
domainSuffix: string;
|
||||
placeholder?: string;
|
||||
onChange?: (value: string) => void;
|
||||
}
|
||||
|
||||
export default function CustomDomainInput({
|
||||
domainSuffix,
|
||||
placeholder = "Enter subdomain",
|
||||
onChange
|
||||
}: CustomDomainInputProps = {
|
||||
domainSuffix: ".example.com"
|
||||
}) {
|
||||
const [value, setValue] = React.useState("")
|
||||
export default function CustomDomainInput(
|
||||
{
|
||||
domainSuffix,
|
||||
placeholder = "Enter subdomain",
|
||||
onChange,
|
||||
}: CustomDomainInputProps = {
|
||||
domainSuffix: ".example.com",
|
||||
},
|
||||
) {
|
||||
const [value, setValue] = React.useState("");
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = event.target.value
|
||||
setValue(newValue)
|
||||
if (onChange) {
|
||||
onChange(newValue)
|
||||
}
|
||||
}
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = event.target.value;
|
||||
setValue(newValue);
|
||||
if (onChange) {
|
||||
onChange(newValue);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full max-w-sm">
|
||||
<div className="flex">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
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">
|
||||
<span className="text-sm">{domainSuffix}</span>
|
||||
return (
|
||||
<div className="relative w-full max-w-sm">
|
||||
<div className="flex">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
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">
|
||||
<span className="text-sm">{domainSuffix}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,45 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { PlusCircle, Trash2, Server, Globe, Cpu, Power } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, 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"
|
||||
import { useEffect, useState } from "react";
|
||||
import { PlusCircle, Trash2, Server, Globe, Cpu } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
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 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);
|
||||
}
|
||||
};
|
||||
|
||||
export default function ReverseProxyTargets({ params }: { params: { resourceId: string } }) {
|
||||
const [targets, setTargets] = useState<ListTargetsResponse["targets"]>([])
|
||||
const [nextId, setNextId] = useState(1)
|
||||
const [ipError, setIpError] = useState("")
|
||||
export default function ReverseProxyTargets({
|
||||
params,
|
||||
}: {
|
||||
params: { resourceId: string };
|
||||
}) {
|
||||
const [targets, setTargets] = useState<ListTargetsResponse["targets"]>([]);
|
||||
const [nextId, setNextId] = useState(1);
|
||||
const [ipError, setIpError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
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);
|
||||
};
|
||||
fetchSites();
|
||||
|
|
@ -39,7 +52,7 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
|
|||
method: "http",
|
||||
port: 80,
|
||||
protocol: "TCP",
|
||||
})
|
||||
});
|
||||
|
||||
const addTarget = () => {
|
||||
if (!isValidIPAddress(newTarget.ip)) {
|
||||
|
|
@ -50,64 +63,62 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
|
|||
|
||||
api.put(`/resource/${params.resourceId}/target`, {
|
||||
...newTarget,
|
||||
resourceId: undefined
|
||||
resourceId: undefined,
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
}).then((res) => {
|
||||
console.error(err);
|
||||
})
|
||||
.then((res) => {
|
||||
// console.log(res)
|
||||
setTargets([...targets, { ...newTarget, targetId: nextId, enabled: true }])
|
||||
setNextId(nextId + 1)
|
||||
setTargets([
|
||||
...targets,
|
||||
{ ...newTarget, targetId: nextId, enabled: true },
|
||||
]);
|
||||
setNextId(nextId + 1);
|
||||
setNewTarget({
|
||||
resourceId: params.resourceId,
|
||||
ip: "",
|
||||
method: "GET",
|
||||
port: 80,
|
||||
protocol: "http",
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const removeTarget = (targetId: number) => {
|
||||
api.delete(`/target/${targetId}`)
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
}).then((res) => {
|
||||
setTargets(targets.filter((target) => target.targetId !== targetId));
|
||||
console.error(err);
|
||||
})
|
||||
.then((res) => {
|
||||
setTargets(
|
||||
targets.filter((target) => target.targetId !== targetId),
|
||||
);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTarget = (targetId: number) => {
|
||||
setTargets(
|
||||
targets.map((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)
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
});
|
||||
|
||||
// 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)
|
||||
}
|
||||
}
|
||||
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);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
addTarget()
|
||||
e.preventDefault();
|
||||
addTarget();
|
||||
}}
|
||||
className="space-y-4"
|
||||
>
|
||||
|
|
@ -118,18 +129,25 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
|
|||
id="ip"
|
||||
value={newTarget.ip}
|
||||
onChange={(e) => {
|
||||
setNewTarget({ ...newTarget, ip: e.target.value })
|
||||
setIpError("")
|
||||
setNewTarget({
|
||||
...newTarget,
|
||||
ip: e.target.value,
|
||||
});
|
||||
setIpError("");
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{ipError && <p className="text-red-500 text-sm">{ipError}</p>}
|
||||
{ipError && (
|
||||
<p className="text-red-500 text-sm">{ipError}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="method">Method</Label>
|
||||
<Select
|
||||
value={newTarget.method}
|
||||
onValueChange={(value) => setNewTarget({ ...newTarget, method: value })}
|
||||
onValueChange={(value) =>
|
||||
setNewTarget({ ...newTarget, method: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="method">
|
||||
<SelectValue placeholder="Select method" />
|
||||
|
|
@ -146,7 +164,12 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
|
|||
id="port"
|
||||
type="number"
|
||||
value={newTarget.port}
|
||||
onChange={(e) => setNewTarget({ ...newTarget, port: parseInt(e.target.value) })}
|
||||
onChange={(e) =>
|
||||
setNewTarget({
|
||||
...newTarget,
|
||||
port: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -154,7 +177,9 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
|
|||
<Label htmlFor="protocol">Protocol</Label>
|
||||
<Select
|
||||
value={newTarget.protocol}
|
||||
onValueChange={(value) => setNewTarget({ ...newTarget, protocol: value })}
|
||||
onValueChange={(value) =>
|
||||
setNewTarget({ ...newTarget, protocol: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="protocol">
|
||||
<SelectValue placeholder="Select protocol" />
|
||||
|
|
@ -172,8 +197,12 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
|
|||
</form>
|
||||
|
||||
<div className="space-y-4">
|
||||
{targets.map((target) => (
|
||||
<Card key={target.targetId} id={`target-${target.targetId}`} className="w-full p-4">
|
||||
{targets.map((target, i) => (
|
||||
<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">
|
||||
<CardTitle className="text-lg font-medium flex items-center">
|
||||
<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">
|
||||
<Switch
|
||||
checked={target.enabled}
|
||||
onCheckedChange={() => toggleTarget(target.targetId)}
|
||||
onCheckedChange={() =>
|
||||
toggleTarget(target.targetId)
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => removeTarget(target.targetId)}
|
||||
onClick={() =>
|
||||
removeTarget(target.targetId)
|
||||
}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</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="flex items-center">
|
||||
<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 className="flex items-center">
|
||||
<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 className="flex items-center space-x-2">
|
||||
<Badge variant={target.enabled ? "default" : "secondary"}>{target.method}</Badge>
|
||||
<Badge variant={target.enabled ? "default" : "secondary"}>{target.protocol?.toUpperCase()}</Badge>
|
||||
<Badge
|
||||
variant={
|
||||
target.enabled
|
||||
? "default"
|
||||
: "secondary"
|
||||
}
|
||||
>
|
||||
{target.method}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={
|
||||
target.enabled
|
||||
? "default"
|
||||
: "secondary"
|
||||
}
|
||||
>
|
||||
{target.protocol?.toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
@ -214,5 +267,5 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue